Styling the tinyMCE editor in WordPress

With WordPress’ easy to use nature and user inter­face, con­tent man­age­ment of web­sites is access­ible to a vast range of users, from the Bill Gates’ of the world right through to users who dis­covered this “inter­net thing” just yes­ter­day. Once the con­cepts of “what is a con­tent man­age­ment sys­tem?” and “Okay, so this is the ‘backend’ and the web­site is the ‘fron­tend’” have been grasped, the usual ques­tion arises: “So, why does the backend con­tent look dif­fer­ent to the fron­tend con­tent?”. To this ques­tion, we are about to say one thing: “Question… be gone!”

What are we going to achieve today?

Today, we’re going to style the editor in the WordPress backend to resemble the con­tent as it is in the theme that is being used on the fron­tend. Simple object­ive, so lets get started.

What do we need?

We’ll need three things to get this done: an editor-​​specific CSS stylesheet (I usu­ally call this editor-style.css), a PHP func­tion to do the work and a WordPress fil­ter to piece things all together.

Creating the editor-​​specific CSS stylesheet

To do this, we need to keep in mind one thing: we’re clon­ing the styl­ing of our theme’s con­tent area into a new stylesheet. Simply load­ing the exist­ing stylesheet in place of this file will not work out prop­erly. One other thing to note is, the con­tent area styles are now to be placed within the .mce­Con­tent­Body{} CSS style. In addi­tion to copy­ing and past­ing the con­tent styl­ing from my theme  (and chan­ging all instances of #con­tent to read .mce­Con­tent­Body), I have also impor­ted the CSS reset script I use via an @import call. This is to ensure added con­sist­ency within the editor styl­ing. If your theme uses a CSS reset file, I would recom­mend import­ing it as well.

A snip­pet from my editor-style.css file looks like this:

.mceContentBody { color: #666666; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px; line-height: 18px; width: 640px; }
		.mceContentBody a, .mceContentBody a:visited { background: none; color: rgb(60, 130, 170); text-decoration: underline; }
		.mceContentBody a:hover { background: none; color: rgb(60, 140, 180); text-decoration: underline; }

Writing the PHP func­tion to do the work

Right, folks. This is where we do the main work involved with this. We’ll be writ­ing a func­tion to add our new editor-style.css file into the mix with the exist­ing tinyMCE stylesheet in the backend. The func­tion looks like this:

/**
 * matty_editor_style()
 */

function matty_editor_style( $url ) {

  if ( !empty($url) )
    $url .= ',';

  // Change the path here if using sub-directory
  $url .= trailingslashit( get_stylesheet_directory_uri() ) . 'assets/css/editor-style.css';

  return $url;

} // End matty_editor_style()

And in English, this func­tion reads like this:

The func­tion accepts $url as a para­meter. This is the exist­ing tinyMCE stylesheet, passed through the WordPress fil­ter. More on that in a bit. If the URL is provided (and not empty), add a comma (,) at the end of it. After that, cre­ate the URL to our editor-style.css file, as it sits in our theme folder, and add it to the end of $url. Return out the newly filtered $url back to the system.

The WordPress fil­ter that makes it all happen

The last line. Nice and simple.

add_filter( 'mce_css', 'matty_editor_style' );

This is using the nat­ive WordPress func­tion, add_​filter(), to take in the ‘mce_​css’ stylesheet (the apply_​filters() func­tion is applied to the main tinyMCE CSS stylesheet before it is loaded into the sys­tem) and add the editor-style.css file into the mix with the exist­ing file. No mess, no fuss.

Place the above PHP func­tion and fil­ter in your theme’s functions.php file, and you’re set.

And there we have it, folks. The editor in the WordPress backend no resembles the fron­tend of our WordPress theme. I hope this tutorial helps you in cre­at­ing beau­ti­ful and easy to use con­tent man­aged web­sites with WordPress.

Related Posts

• More tips for styl­ing the WordPress tinyMCE editor
• Enhancing the com­ments list in WordPress
• Storing a Twitter user­name with com­ments in WordPress
• Javascript and WordPress – The Definitive Guide
• Why you need to be on the WordPress Support forums