Add Custom Styles in WordPress TinyMCE Editor

Adding custom styles to WordPress TinyMCE editor is very easy. But before styling your TinyMCE editor you should know about WordPress post editor.

WordPress TinyMCE editor

There are two modes of editing: Visual and Text. Choose the mode by clicking on the appropriate tab. Visual mode gives you a WYSIWYG editor. Click the last icon in the row to get a second row of controls. The Text mode allows you to enter HTML along with your post text. Line breaks will be converted to paragraphs automatically. You can insert media files by clicking the icons above the post editor and following the directions. You can go to the distraction-free writing screen via the Fullscreen icon in Visual mode (second to last in the top row) or the Fullscreen button in Text mode (last in the row). Once there, you can make buttons visible by hovering over the top area. Exit Fullscreen back to the regular post editor.

Add Custom styles to TinyMCE editor

To style your WordPress post or TinyMCE editor simply add the following snippet to functions.php file.

add_filter( 'mce_css', 'custom_mce_css' );
function custom_mce_css($wp) {
    return $wp .= ',' . get_bloginfo('stylesheet_directory') . '/css/tinymce.css';
}

If you look at the above snippets you will see I have added a style sheet as tinymce.css in css directory. So you should create a css folder in your current theme folder. And create the tinymce.css file in the css folder Now add the below CSS snippet to tinymce.css

body { background: #eeddaa; }
h1, h2, h3 { padding: 5px; }
h1 { background: #eee; }
h2 { background: #ff6600; }
h3 { background: #eeaacc; }

Now refresh your WordPress post or page editor and add some text with heading 1, heading 2, heading 3 style. You will see, you have added custom styles to TinyMCE editor. Now you can add more CSS snippets to the newly created tinymce.css file to design your TinyMCE editor like your website’s style.

You must see: How to add custom color in WordPress editor color picker

Masum Billah has written 326 articles

Hi I am Md. Masum Billah Contributor of this website. I always like to share various things with other. In this website I am sharing web design related tips and tricks, necessary web development tools, source codes for beginner and advance web developer. You may join with us to help other who want to learn web design and development. Thank you for stay with.

Recommended Articles

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>