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

Comments

  1. Jeff
    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. Paul
    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. Karan Rajput
    Permalink to comment#

    Nice……!

  4. Nick Sizer
    Permalink to comment#

    Allo!

    Just wondered if there was a way to get similar functionality into WP.com?

    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. Rockit Web
    Permalink to comment#

    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. Jules @Garden to Go
    Permalink to comment#

    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

    regards
    Garden to Go

  8. Kirkland
    Permalink to comment#

    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. Boerman

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

  10. wordpress developer guy
    Permalink to comment#

    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. Sorin Haidau
    Permalink to comment#

    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:

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