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");
Back to top ^

Join Paulund

  • Get access to 100s of premium tutorials and downloadable content
  • Members content consists of Premium WordPress plugins, CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
  • In-depth development tutorials
  • Priority tutorial requests
  • Priority email development support
  • No ads

Here at Paulund you'll find Web Development tutorials and snippets focusing mainly on PHP, WordPress and CSS. Members will get access to premium tutorials that go into more detail about development with these languages. You will also get access to downloadable premium content based on the tutorial.

Join Paulund

Leave a Reply

Your email address will not be published. Required fields are marked *