Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Turn On More Buttons in the WordPress Visual Editor

These buttons (like one for adding an <hr> tag) aren't there by default in the WordPress visual editor, but you can turn them on pretty easily. This is code for your active theme's functions.php file, or make a functionality plugin.

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

Reference URL


  1. Permalink to comment#

    This was very helpful functionality for WordPress that I had no idea existed! I don’t personally use the visual editor but most of my clients would. This will really come in handy. Thanks Chris!

  2. Permalink to comment#

    The first word “funtion” is missing above ie the code is:

    function add_more_buttons($buttons) {
    $buttons[] = ‘hr';
    $buttons[] = ‘del';
    $buttons[] = ‘sub';
    $buttons[] = ‘sup';
    $buttons[] = ‘fontselect';
    $buttons[] = ‘fontsizeselect';
    $buttons[] = ‘cleanup';
    $buttons[] = ‘styleselect';
    return $buttons;
    add_filter(“mce_buttons_3″, “add_more_buttons”);

  3. Permalink to comment#


  4. Allo!

    Just wondered if there was a way to get similar functionality into

    I know their version of MCE is usually a little further ahead in terms of updates, and that a solution most likely wouldn’t involve editing the theme files, but it would be awesome if anyone would share a few relevant words.

    Pretty please?…

  5. Thanks, I’ve been looking for this snippet for a while :)

  6. John mulligan
    Permalink to comment#

    Great! I always wondered why there wasn’t automatically a button to change font size!!!!

  7. Thanks for sharing this excellent information with us!
    This has helped me out getting the right style i need to write up my pages the correct way. many thanks

    Garden to Go

  8. How can I add a custom button? For example, let’s say I want my client to be able to highlight some of their text, then click a button to apply all the styles to it. The styles that need to apply when this button is clicked include…

    color:#A6C425; font-size:20px; font-weight:bold;

    I will actually want more than one of these buttons each with its own styles. The code above seems to be turning on default WP buttons that are normally hidden, but I want completely custom buttons. Do you know how to do that?

    Thanks, Kirkland

  9. Great! Now I only need to find a way to enable a button for <code> tags…

  10. Thanks for the code I’m off to give it a try!

  11. Rod

    Great!, how can I add Emoticons or icons in TinyMce? please it will be great to know that. Thanks

  12. The values for Superscript & Subscript have changed to
    $buttons[] = 'superscript';
    $buttons[] = 'subscript';

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";