How to Add Custom Styles in WordPress Visual Editor

How to Add Custom Styles in WordPress Visual Editor

Adam Morgan

Are the standard formatting and style options of WordPress visual editor holding you back? These can often be limiting and leave many users switching endlessly between text and visual editor in order to make custom HTML or CSS changes. It’s a headache that many of us could do without.

Fortunately, there is a solution even for those with very little knowledge of web development. Creating custom styles in the dropdown menu of the visual editor can save valuable time and streamline day to day duties. Here we take a look at two ways to add styles that are tailored to your needs whether it be taglines, CSS buttons or content blocks.

Add styles using a plugin

The help of a plugin is the recommended choice for the technologically challenged where all the hard work is done for you. There’s several to choose from but you can’t go wrong with TinyMCE Custom Styles plugin. After downloading, you’ll have the option to change settings according to your preference. Once established, you’ll be able to add a new style button with ease.

Simply enter a name for the new style which will appear in the drop down menu. After selecting a type of style – block, selector or element – you can add a selection of CSS rules along with the CSS class. Once you’ve saved these settings, the new styles should appear on the second row format drop down menu in WordPress visual editor. To apply, simply select the style and hit the preview button to ensure it looks good.

Add styles using code

Depending on your ability, this method may be a little more challenging. Firstly, a new drop down menu will need to be added in the visual editor. The following code must be added to your theme’s functions.php file:

1 function wpb_mce_buttons_2($buttons) {

2 array_unshift($buttons, ‘styleselect’);

3 return $buttons;

4 }

5 add_filter(‘mce_buttons_2’, ‘wpb_mce_buttons_2’);


Now the drop down menu has been created, you’ll have to add the desired styles. This requires an extensive input of code which sets the parameters for several or more styles. Although this allows for a much greater degree of modification, enabling you to customise almost anything, it can be complex for the novice. To learn more about the correct code to use, take a look at information on the WordPress Codex.

After defining the styles with code, you’ll next have to apply the CSS rules for these new styles. This can be added to your theme and should apply rules covering ‘background’ ‘text director’ ‘border’ ‘padding’ and so on.

Finally, you can check the new styles by applying them in visual editor and clicking ‘preview’. To alter the style or make a change to the appearance of content, you can always use the editor stylesheet. This should give a selection of options to play around and make minor edits to the new style options.

Whichever method you choose, creating your own styles allows for more freedom and should make your life easier when using WordPress.


Image via (Creative Commons 2.0 License)