Add a Font Size dropdown to your Visual Composer Editor

I was working with Visual Composer for my first “build from scratch” project.  The client needed a more customizable WordPress experience as opposed to a fixed theme platform, which we normally build a theme using Advanced Custom Fields.

I’d like to think I’m pretty skilled in CSS/SCSS, so designing everything in the browser from an Illustrator/PSD file using Visual Composer took me longer than I had expected.  Perhaps using it more often in the future will get me more comfortable with the platform.

Don’t get me wrong, Visual Composer is a GREAT tool for those who don’t know HTML/CSS/PHP in order to build a WordPress home page and landing page (or anything else they can think of).  There’s just one thing I found missing…a font size tool.

You can click into text and use CSS, but I found this code to be much nicer for my everyday Visual Composer usage.  Hope you like it!

Add this to your WordPress theme’s functions.php file.


/* Add Font Size Dropdown to Visual Editor */
function wp_editor_fontsize_filter( $buttons ) {
array_shift( $buttons );
array_unshift( $buttons, 'fontsizeselect');
return $buttons;
}
add_filter('mce_buttons_2', 'wp_editor_fontsize_filter');
function customize_text_sizes($initArray){
$initArray['fontsize_formats'] = "14px 15px 16px 17px 18px 19px 20px 21px 22px 23px 24px 26px 28px 30px 32px 34px 36px 38px 40px";
return $initArray;
}
add_filter('tiny_mce_before_init', 'customize_text_sizes');

I haven’t tested it with a regular WordPress Visual Editor, but I can’t imagine it NOT working, as it does use TinyMCE.