Want VIP access? Get the latest tutorials, videos, giveaways and more!

×

Customizing the WordPress TinyMCE Editor for your clients

We have all been there. You finish up the most beautiful design with perfectly picked colours, font sizes and page style and pass it off to the client. A few days later you check back at the site and they have happily splattered underlined neon green h1 tags with inline styles. Why why why? Because the WordPress WYSIWYG editor is hard to use and by default it temps you with a basic colour pallet and basic h1-h6 tags.

Not to worry! With a few lines of code we can remove the harmful parts of TinyMCE and supply a few useful features! Pop open your theme’s functions.php file and create a basic function and hook like this:

function make_mce_awesome( $init ) {
	// our Options will go here..
	return $init;
}

add_filter('tiny_mce_before_init', 'make_mce_awesome');

Only allow certain block level elements

Out of the box WordPress has a bunch of elements which you can use to style your text. Chances are your client doesnt need most of them. Also, they certainly do not need access to h1 and h2 elements as they should be already coded into your theme.

$init['theme_advanced_blockformats'] = 'h3,h4,h5,h6,p';

Remove Unnecessary Buttons

This is totally up to you, but I like to remove the underline as its ugly, the spellchecker as this is now built into most browsers and the WordPress Help button. You can find the names of all the buttons by opening up dev tools and looking at the title attribute of each button.

	$init['theme_advanced_disable'] = 'underline,spellchecker,wp_help';

Create a custom Colour Pallet based on the themes colours.

Changes are the default colours in WordPress arent the same as your theme’s colours. Feed in a comma separated list of hex colours and you’re off the the races!

	$init['theme_advanced_text_colors'] = '0f3156,636466,0486d3';

Add Custom Classes to mirror your CSS

When you want to move past your basic heading and paragraph tags, it can be helpful to append custom classes to your elements from within TinyMCE. First you want to enable the style select drop down:

	$init['theme_advanced_buttons2_add'] = 'styleselect';

Then you can specify a list of labels and associated CSS classes.

$init['theme_advanced_styles'] = "bigTitle=bigTitle;Call To Action Button=ctaButton,Rounded Corners=rounded";

Our Final function looks like this:

function make_mce_awesome( $init ) {
	$init['theme_advanced_blockformats'] = 'h2,h3,h4,p';
	$init['theme_advanced_disable'] = 'underline,spellchecker,wp_help';
	$init['theme_advanced_text_colors'] = '0f3156,636466,0486d3';
	$init['theme_advanced_buttons2_add'] = 'styleselect';
   	$init['theme_advanced_styles'] = "bigTitle=bigTitle;Call To Action Button=ctaButton,Rounded Corners=rounded";
	return $init;
}

add_filter('tiny_mce_before_init', 'make_mce_awesome');

Style the editor on the backend

Your theme’s styles should mirror on the backend. You can add in a custom stylesheet for the backend with the following line. This is helpful for getting an accurate idea of what size/colour/alignment your page will have.

	add_editor_style('editor-style.css');

I found that passing in editor-style.css (which should be found in the root of your theme) busted any cache that add_editor_style() was giving me.

Have more tips?

I would love to hear them! Leave them in the comments below and I’ll update this list as we go along.

This entry was posted in CSS, PHP, WordPress. Bookmark the permalink.

16 Responses to Customizing the WordPress TinyMCE Editor for your clients

  1. Pingback: links for 2011-08-17 – The 5th incarnation of Elmer's blog

  2. Afraithe says:

    Very few ppl customize or even know the power of customizaton in TinyMCE that WordPress uses, good article, I hope more ppl read this before ranting.

  3. TradiArt says:

    This is extremely useful. Is a fact that a fully functional WYSIWYG editor is very dangerous for a client! :-)

  4. Chris Reber says:

    Exactly what I’ve been looking for. Didn’t know most of these features existed so easily. Adding custom classes is going to be so helpful to my clients much easier than going manually into the html editor to add floats on images.

  5. Chuck says:

    what about allowing javascript w/o the editor stripping it out or breaking it? such as 3rd party gallery code or cookie code etc. Any luck with that?

  6. rsi says:

    great article! thanks!

    i’m looking for a way to use one css-file per template.
    let’s say articles and standard templates all use the same css, but some templates have different widths and i want the editor to reflect that.
    is there a simple way?

  7. Mohamed Said says:

    Amazing article, it’s something I’ve been looking for.

  8. There is a small error at line 6 which stuck TinyMCE. The first semicolon should be a comma.

  9. Kove says:

    Great article, exactly the solution I was looking for.

    Also, to disable the “more colors” button, you can use:

    $init [‘theme_advanced_more_colors’] = false;

    hope this helps,

    regards :)

  10. Barry Bloye says:

    I found that adding ?now to the editor stylesheet path helps to force the latest version:

    add_editor_style(‘editor-style.css?now’);

  11. Just i want is to have functionality of creating multiple blocks for web post pages. Do you have any solution for this ? Dividing post content to appear in different blocks on same page , i do not mean in different pages or subpages.

  12. Bridget says:

    Awesome tips! Just what I needed.

  13. Monika says:

    where to add the function : function make_mce_awesome( $init ) {….}
    which file do i add this code ???
    :(

  14. Great guide. I came here after searching for some default CSS to add for the styling of Hx tags. Removing the H1 option is a must since I do not want to see my creation down the road having two H1 tags per single post :)

  15. Exactly what I was looking for. Thank you!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>