How to Add Font Sizes to WordPress Visual Editor

The WordPress visual editor is one of the most useful tools that WordPress has. Personally I don’t use it as I prefer to format my posts manually and the reasons for that are to maintain control of the formatting itself as well as ensuring my typing skills don’t degrade.

Typing like any skill is a matter of practice but anyone who has coded will know that typing code is quite different from typing text as text doesn’t break if you make a typo – sure it might not make sense, but you will still get the gist of it. Code on the other hand will break if you make typos.

PHP for example requires you to follow a strict syntax – if you don’t it will throw errors and in some cases just a blank screen. So good typing skills are necessary.

On the other hand I recognize that not everyone wants to type HTML and the limitations of the visual editor became problematic for a custom Thesis Skin that I am building for a client whose design requires varying font sizes for the purpose of landing pages.

The solution to this problem was to add a filter that enables the font size drop down menu to the visual editor.

font size select dropwdown menu for wordpress visual editor

I know there are plugins out there that can add a whole bunch of extra buttons to the visual editor – however I prefer to see less clutter and keep the amount of resources required to run this bulky interface as small as possible. WordPress doesn’t need more stuff adding to it – it requires a lot of resources to open the editor as it is, so I would consider your requirements prior to adding a plugin that will easily double the amount of buttons and resources.

Including the Font Size Filter to your Theme

Generic Themes

A generic theme is one that is built using the traditional theme file system, files such as header.php, footer.php, single.php etc…

You can include this filter by adding the following to your functions.php

function wp_editor_fontsize_filter( $buttons ) {
        array_shift( $buttons );
        array_unshift( $buttons, 'fontsizeselect');
        array_unshift( $buttons, 'formatselect');
        return $buttons;
}    
add_filter('mce_buttons_2', 'wp_editor_fontsize_filter');

Thesis

Thesis 2 is constructed in a different way to that of generic themes and so you will need to include this filter in a different way. There are in fact 2 ways you can do this and each has its reasons.

Including the filter via custom.php

Thesis has a file called custom.php and this file serves exactly the same purpose as functions.php does in a generic theme.

What this file does is allow you as a user of the skin to include additional functions without breaking the skin. So if you are a user of a skin and don’t want to alter the skin in anyway just add the same code as above to custom.php.

If you are a Thesis 1 user then add it to custom_functions.php.

Including the filter as Part of the Skin

Skin developers who wish to include this filter as part of the core of their skin will want to add it to skin.php like so.

protected function construct() {
        /* if you already have the contruct() method - don't include it again
           just add the filter below inside your existing contruct() method */
        add_filter('mce_buttons_2', array( $this, 'wp_editor_fontsize_filter'));
}

function wp_editor_fontsize_filter( $buttons ) {
        array_shift( $buttons );
        array_unshift( $buttons, 'fontsizeselect');
        array_unshift( $buttons, 'formatselect');
        return $buttons;
}

The key differences here are protected function construct() and array( $this, 'function_name').

The construct method is described in the Thesis 2 docs as:

The Skin pseudo-constructor runs at the beginning of each page load (both on the admin side and front end). If you need to initialize hooks and/or filters for your Skin, this is the place to do that.

array( $this, 'function_name') is a callback to the referenced function.

Changing the Font Size Unit

Once you activate the font size drop down menu you will notice that the default font size unit is pt (Points) which is traditionally used for printing. One point is equal to 1/72 of an inch.

For most websites this unit is not useful and so we need to include another filter to add a more preferred unit.

Generic Themes & Thesis 1

Once again you will be adding this to your functions.php and in the case of Thesis 1 custom_functions.php.

function customize_text_sizes($initArray){
           $initArray['theme_advanced_font_sizes'] = "10px,11px,12px,13px,14px,15px,16px,17px,18px,19px,20px,21px,22px,23px,24px,25px,26px,27px,28px,29px,30px,32px";
           return $initArray;
}        
add_filter('tiny_mce_before_init', 'customize_text_sizes');

Thesis 2

If you are including this function to custom.php then just add the same as above.

For skin developers or those simply wanting to add it to their skins core use skin.php.

You can add the function as normal but remember add_filter goes inside the contruct() method.

protected function construct() {
        /* if you already have the contruct() method - don't include it again
           just add the filter below inside your existing contruct() method */
        add_filter('tiny_mce_before_init', array( $this, 'customize_text_sizes'));
}

public function customize_text_sizes($initArray){
        $initArray['theme_advanced_font_sizes'] = "10px,11px,12px,13px,14px,15px,16px,17px,18px,19px,20px,21px,22px,23px,24px,25px,26px,27px,28px,29px,30px,32px";
        return $initArray;
}

Further Notes

There are other buttons that can be added to the visual editor but as stated above, you should only use what you need.

You can also change the font size unit by changing the array. For example em units.

// font size 12px - 16px with a base font size of 16px
$initArray['theme_advanced_font_sizes'] = "0.750em,0.813em,0.875em,0.938em,1.000em";
Note: Only use em if you understand how they work. They can be a little confusing and they could also present a problem if the bases font size is changed.
Thesis Tutorials Wordpress Tutorials

Leave a Comment

Current month ye@r day *

Comments

This site rocks the DIYWP Optimized Skin for Thesis & is hosted by Webhostingbuzz