Stuart Lambon

Advanced customisations to the WordPress WYSIWYG editor

Customising WordPress WYSIWYG

I’ve never really been a fan of content management systems that offer an in-context content editor unless they’re done well on a minimal scale; websites such as Medium do this very well. For most websites with more content and/or with e-commerce capabilities an in-context editor becomes hard to use because they user may get distracted by other parts of the site, lose their place or be bombarded by edit buttons everywhere.

I have always preferred content be added the way that WordPress does it; via a back-end interface that focuses the user on what they are writing—in fact in version 4.1 they also added a ‘distraction-free’ writing mode which takes this further by temporarily hiding all sidebars. WordPress uses the TinyMCE WYSIWYG editor and despite the positives of the standard settings there are a few customisations that I add to nearly every WordPress site that I build so I thought I’d share some. These are usually for mine and the clients benefit.

Limiting client access

One of the first customisations I’d recommend is to limit most (and probably all) users to a select few set of tools within the WYSIWYG editor. This at first sounds a little over-the-top but this is more to protect the design and branding of the website. Users shouldn’t be able to add large h1 tags everywhere around the site and to protect the design and branding of the company things like underlines and the ability to select the font colour should be removed. It’s not quite as good as training users to follow an agreed company style guide to but it’s better than nothing!

Limiting the block formats in the block listbox

Customising WordPress WYSIWYG

For example, to limit users to the choice of Paragraph, h2, h3 and h4 add this code to your theme’s functions.php file:

function customWYSIWYG($arr){
  $arr['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4';
  return $arr;
}

add_filter('tiny_mce_before_init', 'customWYSIWYG');

Limiting items on the first toolbar line

To limit the buttons on the first toolbar line add this code to your theme’s functions.php file, deleting the parts of the array that you want to remove from the toolbar:

if( !function_exists('customised_editor_mce_top') ){
  function customised_editor_mce_top($buttons) {
    // Remove parts of this array to delete from the toolbar
    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', 'customised_editor_mce_top', 0);
}

Limiting items on the second toolbar line

Customising WordPress WYSIWYG

The second line of the toolbar is the bar that appears when the user clicks ‘toolbar toggle’ is very much the same—just add to the functions.php file, deleting the parts of the array that you want to remove from the toolbar second line:

if( !function_exists('customised_editor_mce_bottom') ){
  function customised_editor_mce_bottom($buttons) {
    // Remove parts of this array to delete from the toolbar
    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', 'customised_editor_mce_bottom', 0);
}

Adding custom CSS to WordPress WYSIWYG

Customising WordPress WYSIWYG

Although I don’t agree with using an in-context editor for more complicated websites, sometimes it can be nice to view what you are writing in the same typeface and size that you’ll see on the front-end of the website. This can be done by loading in your theme stylesheet to the WYSIWYG editor alongside your web fonts. The easiest way to do this is to add a separate stylesheet in your theme’s directory and call it something like editor-styles.css. This way you can import your normal stylesheet and still control any changes you wish to make in a separate stylesheet—such as altering your WYSIWYG editor background colour for instance. This is an example of a what it might look like (importing web fonts from Google Fonts and the theme stylesheet also):

@import url('//fonts.googleapis.com/css?family=Open+Sans');
@import url('style.css');
body{
  background: #ffffff;
}

Once this is done, it’s as simple as telling WordPress to use it and you can do that with the add_editor_style() function (introduced in WordPress 3.0.0). In the theme’s functions.php add:

$stylesheet = 'editor-styles.css'; 
add_editor_style( $stylesheet );

Adding controlled classes to elements with the WordPress WYSIWYG

Customising WordPress WYSIWYG

Sometimes you just need to add a call-to-action, a flash or a button! Luckily, you can control how users do this by adding a new format dropdown to the WordPress WYSIWYG editor. You’ll want to import your custom CSS (as above) to see in-context results. To build the dropdown you just need to hook in using the same filters above—I usually place into the second toolbar:

function mce_editor_custom_formats( $buttons ) {
  array_unshift( $buttons, 'styleselect' );
  return $buttons;
}

add_filter( 'mce_buttons_2', 'mce_editor_custom_formats' );

The next step is to populate this dropdown—which is also pretty easy using the TinyMCE style_formats option. Using a few parameters you can quickly add some of your most useful or popular classes to paragraphs, buttons or anything you can think of! The below code adds a class called ‘button’ to a link, a classed called ‘intro’ to a paragraph, a class called ‘alert’ to paragraph and even a wrapper div that works as a panel. The wrapper parameter tells that the current format is a container format for block elements.

add_filter( 'tiny_mce_before_init', 'mce_before_init' );
 
function mce_before_init( $settings ) {
 
  $style_formats = array(
    array(
      'title' => 'Button',
      'selector' => 'a',
      'classes' => 'button'
    ),
    array(
      'title' => 'Intro',
      'selector' => 'p',
      'classes' => 'intro',
      'wrapper' => true
    ),
    array(
      'title' => 'Alert/Sale',
      'selector' => 'p',
      'classes' => 'alert',
      'wrapper' => true
    ),
    array(
      'title' => 'Panel',
      'selector' => 'div',
      'classes' => 'panel',
      'wrapper' => true
    )
  );
 
  $settings['style_formats'] = json_encode( $style_formats ); 
  return $settings;
 
}
Customising WordPress WYSIWYG Customising WordPress WYSIWYG

Using these small customisations I have had good success in protecting the website front-end whilst actually allowing myself and clients more freedom in creating content for the site.