Customise TinyMCE Buttons

If you, like me, are mostly disabling Gutenberg for all the things, you’re probably also looking to simplify the UI where possible.

I remove a few buttons and type styles from TinyMCE, so the client can only chose from stuff that won’t ruin the design of the site they paid a lot of money for. The only way they can screw it up is by manually fiddling with HTML, and, with the best will in the world, I wouldn’t expect clients to know that, in the same way they wouldn’t expect me to do their job.

This first snippet removes stuff like text alignment, font family and size, colour, stuff like that.

/*****
  Remove some editor buttons so client
  can't have the ability to justify text!
*****/
function origin_tinymce_editor_buttons($buttons) {
  return array(
    'formatselect',
    'separator',
    'bold',
    'italic',
    'underline',
    'strikethrough',
    'bullist',
    'numlist',
    'link',
    'unlink',
    'image',
    'blockquote',
    'outdent',
    'indent',
    'undo',
    'redo',
    'removeformat',
    'code'
  );
}
 add_filter('mce_buttons', 'origin_tinymce_editor_buttons', 99);

This second snippet removes some text block formats, such as <h1>, because we code that in to pretty much every page, usually taking the <?php the_title(); ?> value.

/*****
  Remove some block formats
*****/
function origin_tinymce_block_formats($formats){
  $formats['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Pre=pre;Code=code';
  return $formats;
}
add_filter('tiny_mce_before_init', 'origin_tinymce_block_formats');

Selectively Disable Gutenberg

Like many developers, I have a starter theme. Mine’s called Origin. It has a lot of stuff specific to a particular type of project I do often, so it’s not open source. But, there’s a lot of gems there which may be useful to others.

I’m going to start sharing them here, and add some Category nav items to the header so they’re easier to find.


Let’s say you’re not totally against Gutenberg, and want it to be used in a few places. The way WP lets you do this, is to disable it by post type.

In the example below, it’s disabled on the page, career and casestudy post types I have in a current project.

Pro tip: Unlike a lot of WP filters, you can use post as a type to disable.

function origin_disable_gutenberg($use_block_editor, $post_type) {
  $disabled_types = array(
    'page',
    'career',
    'casestudy'
  );

  if (in_array($post_type, $disabled_types)) :
    return false;
  endif;

  return $use_block_editor;
}
add_filter('use_block_editor_for_post_type', 'origin_disable_gutenberg', 10, 2);