With WordPress’ easy to use nature and user interface, content management of websites is accessible to a vast range of users, from the Bill Gates’ of the world right through to users who discovered this “internet thing” just yesterday. Once the concepts of “what is a content management system?” and “Okay, so this is the ‘backend’ and the website is the ‘frontend’” have been grasped, the usual question arises: “So, why does the backend content look different to the frontend content?”. To this question, 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 content as it is in the theme that is being used on the frontend. Simple objective, so lets get started.

What do we need?

We’ll need three things to get this done: an editor-specific CSS stylesheet (I usually call this editor-style.css), a PHP function to do the work and a WordPress filter to piece things all together.

Creating the editor-specific CSS stylesheet

To do this, we need to keep in mind one thing: we’re cloning the styling of our theme’s content area into a new stylesheet. Simply loading the existing stylesheet in place of this file will not work out properly. One other thing to note is, the content area styles are now to be placed within the .mceContentBody{} CSS style. In addition to copying and pasting the content styling from my theme  (and changing all instances of #content to read .mceContentBody), I have also imported the CSS reset script I use via an @import call. This is to ensure added consistency within the editor styling. If your theme uses a CSS reset file, I would recommend importing it as well.

A snippet 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 function to do the work

Right, folks. This is where we do the main work involved with this. We’ll be writing a function to add our new editor-style.css file into the mix with the existing tinyMCE stylesheet in the backend. The function 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 function reads like this:

The function accepts $url as a parameter. This is the existing tinyMCE stylesheet, passed through the WordPress filter. More on that in a bit. If the URL is provided (and not empty), add a comma (,) at the end of it. After that, create 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 filter that makes it all happen

The last line. Nice and simple.

add_filter( 'mce_css', 'matty_editor_style' );

This is using the native WordPress function, add_filter(), to take in the ‘mce_css’ stylesheet (the apply_filters() function is applied to the main tinyMCE CSS stylesheet before it is loaded into the system) and add the editor-style.css file into the mix with the existing file. No mess, no fuss.

Place the above PHP function and filter 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 frontend of our WordPress theme. I hope this tutorial helps you in creating beautiful and easy to use content managed websites with WordPress.