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

    Nice……!

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

    regards
    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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".