Archives For TinyMCE

Customizing TinyMCE formats, and Other Things

Often what seems simple for an experienced user is really hard for the beginning WordPress user to grasp. It’s not uncommon for clients to totally mess up the formatting of their site with the WordPress WYSIWYG editor. To that end let’s look at programmatically setting up TinyMCE for clients to reduce any confusion.

As always the screencast is at the bottom. If you’d like to subscribe to every episode there is an iTunes link on the side of the site.

The Goal

We will start by taking some of the items out of the WordPress ‘formats’ dropdown to help make sure that our user does not ‘mess’ with the document hierarchy. To do this we are going to need to work with TinyMCE and the tiny_mce_before_init filter.

/**
 * Strips out H1 & H2 from TinyMCE since we don't really want the
 * user to add them anyway. We don't want the user to add them so
 * because they can screw with the document hierarchy and that's bad
 * for SEO.
 *
 * We also always show the 'kitchen sink' because users ask for it often
 * and this saves support emails/calls.
 *
 * @param     array  $format_array  req		The formats that TinyMCE starts with
 *
 * @return    array  Our custom formats for TinyMCE
 *
 * @author    WP Theme Tutorial, Curtis McHale
 * @since     Theme Name X/Y
 *
 */
function theme_t_wp_custom_tinymce( $format_array ){

	$format_array['theme_advanced_blockformats'] = 'p, address, pre, code, h3, h4, h5, h6';

	return $format_array;

}
add_action( 'tiny_mce_before_init', 'theme_t_wp_custom_tinymce' );

The code above takes starts with a properly formatted phpDoc block (so other devs know whats going on). The function itself takes the array of objects, in the $format_array and changes what is there to suit our needs.

To remove the h1 and h2 formats we use the theme_advanced_blockformats item and only provide it with the items we want it to have, which does not include the h1 or h2 tags.

I often get client emails about fonts having different colours. Typically this happens the first time they let an author who wasn’t on the original project write something. So instead of handling the support email and then going and fixing a bunch of content I often just remove the option for the user to change font colours. It’s way faster to add that option back in than it is to clean a bunch of posts with ugly coloured fonts.

We can do this in our same function above by adding the following line.

$format_array['theme_advanced_disable'] = 'forecolor';

Kitchen Sink

I’m all for minimal UI, but I often also have to train clients to find the ‘format’ dropdown as well, so why not just show it by default. Add this next line to the function above to always show the ‘kitchen sink’.

// shows the 'kitchen sink' always
$format_array['wordpress_adv_hidden'] = false;

Since we are always going to show it why don’t we just remove the button to hide/show it as well. Currently it will hide the kitchen sink options but on refresh they will be back. In the name of making our client experience better add the line below to remove the button.

// hides the colour options and the kitchen sink
$format_array['theme_advanced_disable'] = 'forecolor, wp_adv';

Now we have removed a bunch of options in TinyMCE that I’ve found simply confuse clients more often than they are useful. Are there any other ways you’d like to see TinyMCE customized?

Video

Forget Shortcodes Use Custom CSS buttons in TinyMCE

Post has been around for a while and I’ve used it on a few projects. I like this much more than adding a ton of shortcodes to a site that may mean nothing later. I’ve used it to create buttons, special headings and columns of text.