How to allow Style tag/element within your WordPress Blog for inline CSS

If you trust yourself enough to use the <style> tag within your self-hosted WordPress blog then here is how to get them to work:

  • Go to your WordPress installation and locate the wp-includes\kses.php file
  • Open the file in a text editor and locate the $allowedposttags variable
  • Paste the following snippet of code:
    ‘style’ => array(),
  • just after the line that says:
    $allowedposttags = array(

Your code should now look like the image below:

kses.php showing where to add style tag

That gets the backend of WordPress accepting the style tag. If you write a post now and post it using LiveWriter or the “HTML” editor in wp-admin it should get rendered out into your browser as desired.

The problem is, if you create or edit a post using the WYSIWIG “Visual” editor you will find that your style tag gets turned into a comment like so:

 Wordpress TinyMCE visual editor showing style tag converted to comments

That’s because the client side JavaScript responsible for the WYSIWYG editor is stripping out the style tag and turning it into a comment. In the default WordPress install the WYSIWYG component is called TinyMCE. Here are the instructions for hacking (that’s the spirit of php isn’t it? ;-)) TinyMCE to allow the element tag:

  • Open the wp-admin\includes\post.php file in a text editor
  • Locate code where the $initArray variable is defined. Hint: it begins like this:
    // TinyMCE init settings
    $initArray = array (
  • Now add the following line to the end of the array
    ‘extended_valid_elements’ => ‘style’
  • Don’t forget to add a comma to the end of the preceding line! (in this example thats the one ending in “$plugins”)

If all goes to plan the lower half of the $initArray declaration should look like this:

post.php after its been edited to allow element tag

After all that’s done don’t forget to force your browser to flush its cache i.e. by using Control + F5.

You should now be able to use the style element in your posts, allowing you to create inline CSS to your hearts content.

The same principle applies if you want to allow any other html tags in WordPress.

4 thoughts on “How to allow Style tag/element within your WordPress Blog for inline CSS

  1. Carlos Espinoza

    This works!!! thank you so much, i tried a million plugins and hacks to be able to insert style tags to give each page a different color palette directly through TinyMCE as i created them and nothing worked till now.

    (well it can be done in html view and then publishing immediatly, but as soon as you switch to wysiwyg gets lost)

    This worked in WP 2.8.6

  2. Pingback: CSS styling inside WordPress posts « Mike Potra

  3. Pingback: Fixing the blog: my winning combination : LA.NET [EN]

  4. Annette

    THANK YOU!! I have looked for a solution for this. I am rather new. I know this is an old post but it was hard to figure out on my own.

Leave a Reply

Your email address will not be published. Required fields are marked *