How to Add Custom Styles in WordPress Tinymce Editor

Add Tool

How to Add Custom Styles in WordPress Tinymce Editor

How to Add Custom Styles in WordPress Tinymce Editor

Adding Custom Styles in WordPress Tinymce Editor is very easy. But before styling your TinyMCE editor you should know about WordPress post editor.

WordPress Post 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.

Tags: custom styles tinymce wordpress, tiny mce custom styles, wordpress add styles to tinymce, tinymce custom styles wordpress, tinymce custom format, tinymce custom classes, tinymce define styles, tinymce style formats, tinymce add custom styles, joomla tinym

About Masum Billah

How to Add Custom Styles in WordPress Tinymce Editor 1stWebSuite website seo tool is a free website ranking tool site provides a lot of on page and off page seo useful tools for you. On this site, we have a large number of website ranking tools


Discuss about: How to Add Custom Styles in WordPress Tinymce Editor