How To: Add Custom Styles to the WordPress Visual Post Editor
TinyMCE is like your regular rich text editors with lots of buttons to do different things. It is extendable just like WordPress and can be used to provide an extended user interface to users for writing posts. Most of the advanced buttons are hidden in the default WordPress Visual Editor. You can display the full range of buttons by switching to the Advanced Editor Mode.
Hint: Use Shift+Alt+Z to display all buttons in Visual Editor or click the Show/Hide Kitchen Sink button
Why Would You Want to Customize TinyMCE
As a WordPress developer or site owner, there will be times when you will have users other than yourself contributing content on your website. Not all of them will be familiar with your editorial style. Sometimes you will even have contributors who do not even know how to make a hyperlink in HTML editor.
So as a website admin/developer it is your job to make it simpler for them to follow your editorial style by providing them an interface where they can easily use the same styles as you want them to. Websites that have a lot of non-tech savvy contributors will benefit a lot if they customized their TinyMCE editor in WordPress. This will provide a consistency in style, content would look better, and the contributors will be able to focus on just writing.
In this example we will be adding a Styles drop down menu to TinyMCE, then we will add a purple button to it, and another element for writing tag lines. At WPlift we use that purple button to highlight links to external sites and downloads. So I thought it would be fun learning how it can be added to TinyMCE.
How to add Custom Styles to WordPress Visual Editor
Firstly, we are going to enable Styles dropdown menu for TinyMCE in our WordPress edit screen.
Hint: This code goes into your theme’s functions.php file
// Add the Style Dropdown Menu to the second row of visual editor buttons
What we have done here is that we have enabled the Styles Menu. The above code will show the default style classes available. We don’t want default classes to confuse our user so we add our own classes to it with friendly titles.
// Now we add classes with title and separate them with;
$init_array[‘theme_advanced_styles’] = "Tag Line=tag-line;Button=custom-button";
Now we have added a menu with two style items in it, Tag Line and button. However, nothing happens when a user selects text and then selects these options from the menu. So we need to define these styles in our Editor Style Sheet and our Theme Stylesheet.
Since version 3.0, WordPress allows theme developers and website admins to define custom styles for the Visual Post Editor. This means that theme developers can provide the same style for the visual editor as their themes and when a user is writing a post they know how it will look when published. This feature makes the TinyMCE in WordPress truly a WYSIWYG editor.
Using add_editor_style we add these styles and tell WordPress where to look for the CSS for these styles. The default location is
editor-style.css, you can create this file in your theme directory if it does not already have it. Or you can use a custom style sheet of your own.
Now we are going to add CSS to either editor-style.css or custom-editor-style.css and we will also add the same css in our Theme’s style.css
Font:italic 14px Georgia, serif;
padding: 2px 5px 2px;
border- radius: 4px;
margin:10px 10px 0 0;
Show and Hide Buttons in TinyMCE
The default settings for the TinyMCE buttons and plugins are saved in
/wp-includes/class-wp-editor.php. These settings can be over written by using the filter tiny_mce_before_init. There are several buttons in the visual editor which many people never use and you can remove these buttons if you want. Look at the following code and see if there are things that you don’t want. Also notice that you can add a third and fourth row of buttons to your Visual Editor UI.
$in[‘content_css’]=get_template_directory_uri() . "/editor-style.css";
add_filter(‘tiny_mce_before_init’, ‘myformatTinyMCE’ );
Creating TinyMCE Custom Buttons in WordPress
Just like WordPress, TinyMCE is also extendible by using plugins. There are some tinyMCE plugins available in
/wp-includes/js/tinymce/plugins directory, which you can look at if you want to write a plugin for yourself. Also look at the TinyMCE documentation on creating a plugin. These plugins can be embedded into the UI of your Visual Editor in WordPress.
However, creating TinyMCE plugins for WordPress is not a very simple task. For users who don’t want to dive into writing plugins there are some excellent WordPress Plugins that allow you to extend TinyMCE in WordPress.
Ultimate TinyMCE Plugin
The Ultimate TinyMCE plugin is a powerful WordPress plugin that extends your TinyMCE editor to the maximum level. It comes loaded with lots of buttons which will make it a lot easier for MSWord users to create their posts in Visual Editor. I particularly liked the YouTube Button, which allows users to set the width and height, along with other options. However, there are some buttons that many would find useless and these buttons can be disabled from the plugin settings page.
Ultimate TinyMCE plugin also comes with premium addons which can be bought from the plugin author’s website. These addons include Google Web Fonts, Custom Styles, Mood Icons, Advance Configuration options, etc.
TinyMCE Template Plugin
TinyMCE template plugin is a very useful tool for the websites where authors are required to follow a format and style guide to contribute content. TinyMCE Template plugin allows you to create template posts which you can use inside your visual editor to create new posts. The idea is so simple and beautiful and works flawlessly. You can create templates, predefine required fields which post authors can then fill in quickly and move on.
Oli has previously written a thorough review of this plugin in his post How to Extend WordPress Visual Editor Buttons, so I will keep this one short. As the name says this plugin adds extra features to the Visual Editor in WordPress. One feature that I particularly found useful was the ability to load CSS classes from the theme’s style sheet and make them available in Visual Editor. The plugin settings page has a drag and drop interface to set buttons, add separators between them, and modify the editor to meet your needs.
Using custom styles with TinyMCE can make it a lot easier and quicker for users to create buttons, format content, and stylize posts quickly. It does not completely eliminate the need for switching to HTML editor from time to time, but it can be great tool for users coming from desktop publishing environment who just want to write posts not code.