How to Show Hidden Features in WordPress Visual Editor? Font Family, Sizes, Superscript, Subscript & More

Today morning which I was writing an article on Selection Sort algorithm in Java, I wanted to show time complexity for that program. Usually complexity would be O(n2).

I tried searching for some time and couldn’t found simplest way add those option in Visual Editor. But it seems, with very simple extra line of codes, you could have all above options in WordPress Visual Editor.

Let’s get started on mastering WordPress Visual Editor

Have below questions? Then you are at right place:

• Formatting text in wordpress pages
• WordPress visual editor plugin
• best wordpress visual editor
• how to modify TinyMCE without plugin
• Modify WordPress Visual Editor

Step-1

We are using Genesis WordPress Framework. So i’m going to add code to my Child theme’s functions.php file. If you are using normal WordPress theme then simply put it into your theme’s function.php file.

function crunchify_show_extra_editor_buttons($buttons) {
	$buttons[] = 'sub';
	$buttons[] = 'sup';
	$buttons[] = 'fontselect';
	$buttons[] = 'fontsizeselect';
	$buttons[] = 'styleselect';
	return $buttons;
}

add_filter("mce_buttons_3", "crunchify_show_extra_editor_buttons");

As you see above we are using mce_buttons_3 which will add new features into 3rd row/line.

Step-2

• Save functions.php file
• Go to Posts -> Add New
• You should see 3rd Row with Font Family, Font Sizes and Formats Options
• And you are all set.

Step-3

After having all options for a while, it turned out that for me, I just needed Formats Options as I hardly change font size and font family for my post.

To achieve that, I have updated code and added Formats option to 2nd row/line. Take a look at mce_buttons_2 🙂

And here is a code to have only Formats Option:

function crunchify_show_extra_editor_buttons($buttons) {
	$buttons[] = 'styleselect';
	return $buttons;
}

add_filter("mce_buttons_2", "crunchify_show_extra_editor_buttons");