Premium Responsive WordPress Themes

Buy Over 150+ Premium Themes for Only $99 – Lifetime Membership
( Free Install + Demo Setup ) | Trusted by 97,000+ Users

WordPress Editor Customization. How to Add Custom Buttons Manually

WordPress is the best ever CMS produced, but still as any other thing considered to be ideal, it can be improved. This blog post we’d like to dedicate to the most used used part of this content management system i.e. the WYSIWYG editor.

If you think that WordPress editor is really cool, you’ll be right, but what if you could improve it. I bet you have a number of favorite tags. Like h3 or a shortcode you’re using frequently in your posts, and every time you’re using it, you have to Copy and Paste it, over and over again. This is not hard to do, but if you count the time you spend every week on this action you will see that you spend quite a lot of time.

So how to make this action consume four times less time? All you need it to create a button. Single button allows using your favorite tag without some unnecessary body movement.

Either I’m so lazy or those buttons can really help.

So How to Get This Done?

Everything is quite easy and straightforward, I assure you you’ll be able to do it just like that.

What made me add those buttons to the editor?

I got the habit to watch the code through the Text tab when TinyMCE editor was adding extra < br > tags, and that was the this I really hated. This made me to leave Visual tab like for ever, meaning that I’m not using it at all.

Adding couple more buttons to the editor was an automation that I’m looking for. Every blog has it’s own styles for text formatting, that’s why you can easily customize WP editor for your own needs.
This is how the latest version WP editor looks like.

And you can make it look whatever you like.

So, the first thing you need to do is open your functions.php file, you can find it via:

Dashboard > Appearance > Theme Editor > functions.php

Next you need to add this piece of code at the bottom of the file:

function enable_more_buttons($buttons) {
  $buttons[ ] = 'hr';
  $buttons[ ] = 'sub';
  $buttons[ ] = 'sup';
  $buttons[ ] = 'fontselect';
  $buttons[ ] = 'fontsizeselect';
  $buttons[ ] = 'cleanup';
  $buttons[ ] = 'styleselect';
  return $buttons;
}
add_filter("mce_buttons_3", "enable_more_buttons");

In case you’re using Text tab only this function will add extra buttons to your panel.

If you need more buttons here is another option:

if( !function_exists('_add_my_quicktags') ){
function _add_my_quicktags()
{ ?>


It will add buttons with tags p, br, h3 and h4.

In the last piece of code you can change button parameter to add tags you’re using more often.

Example:

In the following line:

QTags.addButton( 'p', 'p', '

', '

' );:

'p' stands for button ID
'p' stands for button value
'< p >'stands for button opening tag
'< /p >' stands for button closing tag

Easy as a pie isn’t it? That’s because WordPress was created by humanz for humanz 🙂

* * *

That’s it, as I told you it’s really easy to add extra buttons to WordPress editor.

If you have any questions feel free to ask them in the comments below.

Bio: The article is written by Alex Bulat

Sometimes I feel like there is not enough furry covers for sun-beds on the upper deck of a yacht,
but then suddenly I wake up and have to do some blogging. Luckily, I know where to get things you need...
Psst, looking for a new theme for your site?
Ask me where to get one,
or just say hello on
.