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

Leave a Comment

Current day month ye@r *

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