Paulund
2012-10-17 #wordpress

Enable Additional Buttons On Visual Editor

The default text editor in Wordpress is TinyMce, with this you get lots of additional features. It allows your content authors to change anything they want with the content they are creating. There are two views with TinyMce the visual editor and the HTML editor, when you change things in the visual editor it will automatically updated the HTML editor. You will find most content authors who don't know much HTML will just stick with visual editor screen. This screen gives you lots of flexibility to change the content, but there are additional buttons that you can import into the TinyMce visual editor. In Wordpress there are 2 filters you can use to get at these buttons to delete existing functionality or enable new functionality.

  • mce_buttons_2 - Second row of buttons
  • mce_buttons_3 - Third row of buttons

TinyMce Second Row Buttons

There are some buttons on the second row which are turned off by default this is the subscript button and the superscript button, if you want to turn these on use the following code snippet.


function second_row_buttons($buttons) { 
    $buttons[] = 'sup';
    $buttons[] = 'sub';

    return $buttons;
}
add_filter('mce_buttons_2', 'second_row_buttons');

You can also use this filter to remove buttons from the second row. Here is some code to remove all the buttons on the second row you can comment out the lines of the buttons you want to keep.


function remove_second_row_buttons($buttons) {
    if(($key = array_search('formatselect', $buttons)) !== false) {
        unset($buttons[$key]);
    }
    if(($key = array_search('underline', $buttons)) !== false) {
        unset($buttons[$key]);
    }
    if(($key = array_search('justifyfull', $buttons)) !== false) {
        unset($buttons[$key]);
    }
    if(($key = array_search('forecolor', $buttons)) !== false) {
        unset($buttons[$key]);
    }
    if(($key = array_search('pastetext', $buttons)) !== false) {
        unset($buttons[$key]);
    }
    if(($key = array_search('pasteword', $buttons)) !== false) {
        unset($buttons[$key]);
    }
    if(($key = array_search('removeformat', $buttons)) !== false) {
        unset($buttons[$key]);
    }
    if(($key = array_search('charmap', $buttons)) !== false) {
        unset($buttons[$key]);
    }
    if(($key = array_search('outdent', $buttons)) !== false) {
        unset($buttons[$key]);
    }
    if(($key = array_search('indent', $buttons)) !== false) {
        unset($buttons[$key]);
    }
    if(($key = array_search('undo', $buttons)) !== false) {
        unset($buttons[$key]);
    }
    if(($key = array_search('redo', $buttons)) !== false) {
        unset($buttons[$key]);
    }
    if(($key = array_search('wp_help', $buttons)) !== false) {
        unset($buttons[$key]);
    }
   return $buttons;
}
add_filter("mce_buttons_2", "remove_second_row_buttons");

Third Row Of TinyMce Buttons

TinyMce does have a few hidden buttons on the third line, which you can turn on with the following code snippet.


function enable_third_row_buttons($buttons) {
     $buttons[] = 'fontselect';
     $buttons[] = 'backcolor';
     $buttons[] = 'image';
     $buttons[] = 'media';
     $buttons[] = 'anchor';
     $buttons[] = 'sub';
     $buttons[] = 'sup';
     $buttons[] = 'hr';
     $buttons[] = 'wp_page';
     $buttons[] = 'cut';
     $buttons[] = 'copy';
     $buttons[] = 'paste';
     $buttons[] = 'newdocument';
     $buttons[] = 'code';
     $buttons[] = 'cleanup';
     $buttons[] = 'styleselect';

     return $buttons;
}
add_filter("mce_buttons_3", "enable_third_row_buttons");