How to insert custom CSS style in WordPress Blog Post or Pages by Editor

How to put CSS code in WordPress Content

Say you want to put the following code in WordPress content. We are assuming your website is www.abcd.com and the page content is www.abcd.com/my_content/ and title of the page is "This is my new content"

So you need to place the following CSS code in your webpage(assume it is a page not a post) www.abcd.com/my_content/, we have shown below the output of the css/xhtml code in this page, you will see a blue box with white text in it.

<style type="text/css">
div.cl   
{  
color:white;
width: 200px;
height: 200px;
background: blue;  
}
</style>  

<div class="cl">
Hello How are you ?
</div>  

The steps to place your CSS code or HTML code in your wordpress Blog Post or Pages

1. Goto Control Panel or Admin Panel or Dashboard

2. Goto Users -> Your Profile

3. In the profile page you will see the VISUAL EDITOR (Disable the visual editor when writing) is uncheked. Normally the visual editor is unchecked. Click on that box to Disable the visual editor when writing.

4. After that goto the dashboard -> pages

5. Open the webpage "This is my new content" in edit mode and insert the above CSS stylesheet code in the editor and then click update button

View the code in action :

Hello How are you ?

View a better video tutorial here :

7 thoughts on “How to insert custom CSS style in WordPress Blog Post or Pages by Editor

  1. Hi, Neat post. There’s an issue with your website in web explorer, would test this? IE nonetheless is the market leader and a large element of people will miss your great writing due to this problem.

  2. Fantastic beat ! I wish to apprentice while you amend your web site, how could i subscribe for a blog web site? The account helped me a acceptable deal. I had been tiny bit acquainted of this your broadcast provided bright clear concept

  3. Thanks!

    I did not know about the option in admin panel to Turn Off Visual editor, or what it did.
    Previous, all attempts to add styles or links to style sheets had failed.

    So, I copied the styles from my external style sheet to the top of the post in HTML view, with “visual editor turned off.”
    Then I changed “#” in the style definitions to “div.”,
    and changed my “<div id=".. tags in the post to "<div class="..

    Now all is well.

    I also have found a number of plugins that add even greater power to this functionality.
    For example one can add a folder of css files, and from the admin panel, selectively apply specific files to specific pages or posts. Another adds fields to the Post/Page Editing pages to insert specific css/js or external files to use for the post. There are many variations.

    If you prefer to use plugins to accomplish this task, (or your css style list is very long too long to type into a post )
    http://wordpress.org/extend/plugins/tags/stylesheet
    brings up a list of plugins that are available on wordpress.
    I also ran across a few that are not on wordpress.

    Google search: "specific stylesheet wordpress plugin"
    and: "css stylesheet plugin wordpress for a single Post "
    helped me find this post, as well as more advanced php/loop solutions, and simpler plugin solutions. Good Luck to all !

    Thanks for this helpful post. Just what I needed.

Comments are closed.