How to add styles and buttons to the WYSIWYG Visual Editor in WordPress

The Visual Editor in WordPress is great for clients. It lets them feel comfortable adding content with Word-like buttons that they are familiar with.

But, what happens when they want more font styles?

Although you can find plugins that add Quicktags to the HTML view Editor, such as Oren Yomtov’s Post Editor Buttons Plugin, I wanted to make adding content as easy as possible for clients by putting the extra styles in the visual editor instead.

I wanted to add one style to the list of default format styles: h1, h2, etc. but every time I tried some new code in my functions.php, it just wouldn’t show up correctly.

And then I gave in and saw what the massive TinyMCE Advanced plugin had to offer. I was hesitant to use it since it has so many options and I just needed to add one style but it turned out to be a quick and really easy way to add styles to the Visual Editor.

How to add custom styles to the TInyMCE Advanced Plugin:

1. After you activate the plugin, go to the settings page and drag and drop the Styles dropdown to the row of buttons above.
2. Go to the plugin files and in the CSS folder, open the tadv-mce.css file. Follow the examples that are there and add your styles to the list. It then looks to your theme’s stylesheet for the style definition.
3. The styles then show up in the Styles dropdown in the Post or Page Visual Editor!

Tags: custom, tinymce, visual editor, WYSIWYG

Category: WordPress as CMS