Beef up TinyMCE in WordPress with the style selector

The code

First you’ll need to create a new plugin or find space in your functions.php file. You may want to place it in a plugin if you need it available no matter what theme is installed, and in the functions.php file if it’s specific to the theme you’re developing. This PHP code will get you started:

This code sets up the style selector, but passing $settings['style_formats'] a JSON-encoded array of your styles. TinyMCE will then process this array and make your styles available in the new dropdown. Let’s isolate the $style_formats array and drop in an example style.

You can pretty quickly see what’s happening here. title sets up the title used in the dropdown menu and 'block' => 'aside' tells TinyMCE to create a new block-level <aside> tag for this style with the classes defined in classes (you can also use inline in place of block for an inline-level tag). 'wrapper' => true means that this particular style can wrap around other block-level items (in this case, it’s necessary because the <aside> tag will wrap around a <p> tag that TinyMCE will auto-insert) and then styles is a subarray of the styles I want applied inline directly to the element. In this case, I chose to apply these attributes inline because it will mean the pull quote still displays reasonably well for email and RSS subcribers. The additional class is useful for adding styles that you may not want those subscribers to get, such as site-specific colors and fonts.