, LLC.

Customizing the TinyMCE WYSIWYG Editor in  WordPress

WordPress has a custom configuration of TinyMCE built-in for rich text editing. On many occasions I’ve found it useful to trim down the editor buttons and format options in the WordPress TinyMCE WYSIWYG editor to make content management and publishing easier for writers and editor.

What I Remove From the WYSIWYG Editor

  1. Heading 1 from Format dropdown – This follows SEO best practices. Since you should only have a single H1 per page, there’s no need for an option in the editor.
  2. Separators/spaces
  3. Strikethrough text.
  4. Underline text.
  5. Justify text – This helps me control the format and output of the text. There’s no need for a content editor or writer to set justified text in my experience.
  6. Media – This promotes users NOT to use uploaded flash or FLV files. This is a best practice for mobile compatibility. Using YouTube or Vimeo is generally a much better approach.
  7. Text color – This option is NEVER unneeded if you know what you’re doing.

Customize the TinyMCE Toolbar Options

Here’s the set of options that I use on most of my WordPress setups. Feel free to customize this, I’ve included the default array values in each function. To get started, add the following functions to your theme’s functions.php file.

// TinyMCE: First line toolbar customizations
if( !function_exists('base_extended_editor_mce_buttons') ){
	function base_extended_editor_mce_buttons($buttons) {
		// The settings are returned in this array. Customize to suite your needs.
		return array(
			'formatselect', 'bold', 'italic', 'sub', 'sup', 'bullist', 'numlist', 'link', 'unlink', 'blockquote', 'outdent', 'indent', 'charmap', 'removeformat', 'spellchecker', 'fullscreen', 'wp_more', 'wp_help'
		/* WordPress Default
		return array(
			'bold', 'italic', 'strikethrough', 'separator', 
			'bullist', 'numlist', 'blockquote', 'separator', 
			'justifyleft', 'justifycenter', 'justifyright', 'separator', 
			'link', 'unlink', 'wp_more', 'separator', 
			'spellchecker', 'fullscreen', 'wp_adv'
		); */
	add_filter("mce_buttons", "base_extended_editor_mce_buttons", 0);

// TinyMCE: Second line toolbar customizations
if( !function_exists('base_extended_editor_mce_buttons_2') ){
	function base_extended_editor_mce_buttons_2($buttons) {
		// The settings are returned in this array. Customize to suite your needs. An empty array is used here because I remove the second row of icons.
		return array();
		/* WordPress Default
		return array(
			'formatselect', 'underline', 'justifyfull', 'forecolor', 'separator', 
			'pastetext', 'pasteword', 'removeformat', 'separator', 
			'media', 'charmap', 'separator', 
			'outdent', 'indent', 'separator', 
			'undo', 'redo', 'wp_help'
		); */
	add_filter("mce_buttons_2", "base_extended_editor_mce_buttons_2", 0);

Customize the Format Dropdown Tags

This is the code I use to remove the H1 from the Format dropdown in the editor. You can add whatever tags you like here, just as long as they are block-level elements.

// Customize the format dropdown items
if( !function_exists('base_custom_mce_format') ){
	function base_custom_mce_format($init) {
		// Add block format elements you want to show in dropdown
		$init['theme_advanced_blockformats'] = 'p,h2,h3,h4,h5,h6,pre';
		// Add elements not included in standard tinyMCE dropdown p,h1,h2,h3,h4,h5,h6
		//$init['extended_valid_elements'] = 'code[*]';
		return $init;
	add_filter('tiny_mce_before_init', 'base_custom_mce_format' );

More Resources

Meet the Author

Kevin Leary, WordPress Consultant

I'm a freelance web developer and WordPress consultant in Boston, MA with 16 years of experience building websites and applications. View a portfolio of my work or request an estimate for your next project.