Last week I alluded to introducing a way to change font sizes, font families, and more when editing a post or page in WordPress.  For those that have been asking for that functionality, your patience has paid off!

WordPress uses TinyMCE, a JavaScript ‘what you see is what you get’ (WYSIWYG) front end visual editor.  There are dozens of configuration options, most of which aren’t enabled by default.  In order to enable these options, you would normally need to code them in.  If you’re like me, you have better things to do, but if your curious, dig through the site at http://
www.tinymce.com/wiki.php.  Don’t blame me if your eyes cross and you get a headache though.

The good news is that there is a plugin titled TinyMCE Advanced, developed by Andrew Ozz, that makes configuring some of these options very easy.  Our current maintenance plan subscribers can get this plugin installed for free; just ask!  If your not one of our customers, to install, log into your WordPress site, navigate to Plugins, then click on Add New.  Add New
In the search box, type in TinyMCE Advanced, hit enter, then click on the title of the plugin.  Once the screen loads, click on Install Plugin, then activate the plugin.  Once activation is complete, navigate to Settings / TinyMCE Advanced.Settings

From here, you’re presented with the editor settings.  This is a live preview of how your toolbar will look when editing a post or page.  Not only is there a drop-down menu added to the top of the toolbar, you have four rows to use, instead of the default two.

Editor

 

Below this is the Unused Buttons area:

Unused Buttons

You can add, remove, and reorder any of the buttons in the editor.  If you want to add a feature that doesn’t exist in your editor, simply click and drag from the Unused Buttons area to where you want the button on your toolbar.  Likewise, if there are buttons you don’t want to see, you can drag them down to the Unused Buttons area.

Move Button

 

 

Here’s my customized final product.

TinyMCE Final

 

If you want the same options as I’ve selected, you can copy the code below (courtesy of the TinyMCE Advanced ‘code’ button).  Click on the Import Settings button under Administration at the bottom of the screen, and paste the code in.

{"settings":{"toolbar_1":"bold,italic,underline,strikethrough,superscript,subscript,hr,wp_code,blockquote,bullist,numlist,alignleft,aligncenter,alignright,alignjustify,link,unlink,table,undo,redo,wp_adv","toolbar_2":"fontselect,fontsizeselect,forecolor,backcolor,outdent,indent,pastetext,removeformat,charmap,emoticons,searchreplace,wp_help","toolbar_3":"","toolbar_4":"","options":"advlist,menubar","plugins":"anchor,code,insertdatetime,nonbreaking,print,searchreplace,table,visualblocks,visualchars,emoticons,advlist"},"admin_settings":{"options":"fontsize_formats","disabled_plugins":""}}

Now you can change your Font Family, Font Sizes, and more!  You may notice the font selection is limited; there are ways to add more fonts to choose from, but that is a decidedly more advanced topic.  Should you want specific fonts, contact us!