How to Add CSS Style to WordPress Post

Sometimes when writing using wordpress, we may want to give some style to some part of our post by adding <style> tag to the body of the post.

But in practice, it’s not easy since by default TinyMCE (wordpress default text editor) will strip out that tag, so today we’ll discuss how to add css style to wordpress post.

As we know that wordpress use TinyMCE as the default text editor, and TinyMCE is very strict in dealing with html tag. it will ensure that the existing

It will ensure that the existing html tag in the editor meets the standards, if not, then the tag will be removed from the editor.

Validation

W3C requires that the <style> tag declared in the <head> section, but began to HTML 5, it allowed being written in a <body> section. so it’s a valid structure.

Until wordpress version 4.4, which is used TinyMCE version 4.2.8, we have not been able to easily add a <style> tag to the editor, because when we write that tag in the Text mode, then back to Visual mode, that tag will be gone, therefore, we need to do some task to solve that problem.

Add CSS Style to WordPress Post

1. Adding valid_children options

valid_children is one of several TinyMCE options, that force TinyMCE to allow some HTML tag written in the editor, which in wordpress handled by tiny_mce_before_init function.

This option can be added manually or using a plugin. The manual way is done by adding a function to the functions.php file that located in the theme folder that we use.

function custom_mce_options($init) 
{
	$init['valid_children'] = "+body[style]";
	return $init;
}
add_filter('tiny_mce_before_init', 'custom_mce_options');

Explanation: Visual Mode on TinyMCE uses <iframe> tag that contains <body> tag, so using the above code, will allow the <style> tag exists within the <body> tag.

In addition, to add the above code, we can use a plugin: Advanced TinyMCE Configuration. once installed and activated, go to menu: Settings »TinyMCE Config, and then in the TinyMCE Advanced Settings page, fill

Once installed and activated, go to menu: Settings »TinyMCE Config, and then in the TinyMCE Advanced Settings page, fill valid_children in the Option name field and +body[style] in the Value field, then click Save Change.

tiny_mce_config_menu

Add CSS Style to WordPress Post - Advanced TunyMCE Setting

2. Hacking the editor

Next, let’s try to write some css rule to the text editor in the Text Mode:

<style type="text/css">
	.btn-warning {color: yellow}
	.btn-success {color: blue}
</style>

Then click on Visual tab and back to Text mode again, the result is TinyMCS will comment out the contents in the <style> tag:

<style type="text/css"><!--
	.btn-warning {color: yellow}
	.btn-success {color: blue}
--></style>

When we preview the content and view the source, the style will be stripped out, and the result is: <style type="text/css"></style>. There is no elegant way to solve that, all we have to do is to add comment close at the beginning and comment open at the end of the css code, so that our code become like so:

<style type="text/css"><!--
-->
	.btn-warning {color: yellow}
	.btn-success {color: blue}
<!--
--></style>

3. Clean Up The Code

So far our code work as expected, but what would happen if we write a lot of lines of code?, the result is there would be a lot of <p> tags. For example:

.add_style_tag_to_wordpress_post

 

when we view the source, it would look like this following figure.

add_style_tag_to_wordpress_post_view_source

so we need to clean it up. Open the functions.php file located in your theme folder and add the following functions:

add_filter( 'the_content', 'cleanup_style_tag');
function cleanup_style_tag( $content ) {
    return preg_replace_callback( '|<style.*>(.*)</style|isU' , 'remove_html_tags', $content );
}

function remove_html_tags( $matches ) {
    return str_replace( $matches[1], strip_tags($matches[1]), $matches[0] );
}

The result is

add_style_to_wordpress_post_done

Alternative Way

So now we can  safely add custom css to our post, but it may be at risk because we don’t know whether in the future version of wordpress / TinyMCE that code will still work.

As an alternative, we can use another reliable way by making separate css files and load it on a particular post to be desired, to do so you may want to follow this tutorial: Add Javascript and CSS Files to Specific Post or Pages in WordPress

Conclusion

With a little trick, we can safely add custom style to our particular posts in wordpress, however, there is more reliable way to do by making separate css files and load it to a particular post.

 

Subscibe Now

Loves articles on webdevzoom.com? join our newsletter to get quality article right to your inbox. Nothing else, just quality stuff!!!

Related Post

Leave a comment

Like Us

Newsletter

Great information from webdevzoom.com right to your inbox

We value your privacy

Social