A few weeks ago, I blogged about styling the tinyMCE editor in WordPress to resemble your WordPress theme’s content area. On this post, I received a comment from LA, asking if it’s possible to style the tinyMCE editor for specific posts or post templates. Folks, it’s WordPress… anything’s possible!

With my mission at hand, I set to work. I’d been thinking about this for a while after writing the initial blog post and am please to say that I have found a solution. Please be sure you’ve read through the initial blog post, as the main points are covered over there.

There are a few steps we need to go through here. They’re pretty straight forward, so bear with me. 🙂

Reference the global $post object

First things first. How do we know what page, post or custom post type entry we’re working with? We need to get this information from WordPress. Luckily for us, WordPress also needs to know which entry we’re editing. We get this information by adding the following to the beginning of our function:

global $post;

This lets us work with the variable $post, which was previously created outside of our function. This variable is an object that holds information about the entry we are currently editing (ID, title, content, template, etc). We will be using this information at a later stage to insert our custom CSS file(s).

Due to this being a custom solution specific to a particular page, post or custom post type entry, this solution will only truly take effect on the “Edit” screens when targeting a specific entry or an entry with a particular custom template applied.

Check if the file we’re looking for exists

We wouldn’t want to call a file that we know doesn’t exist. Therefore, we will use a conditional (in this case, an IF statement) to determine whether or not to look for our custom CSS file, based on whether or not it exists.

If the CSS file exists, add it to the list of CSS files to include

After the line where we include our main editor-style.css file, add the following code:

if ( file_exists( trailingslashit( get_stylesheet_directory() ) . 'assets/css/editor-style-' . $post->post_type . '.css' ) ) {

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

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

} // End IF Statement

The above code checks if our custom CSS file (in this case, for a post type-specific CSS file) exists and, if it does, adds it to the list of CSS files to include in the tinyMCE editor. We include it after checking for our main editor-style.css file so that any of our custom CSS declarations override the defaults we have in the main editor-style.css file.

Extending this functionality

In the above example, I am including a custom CSS file based on the post type of the entry being edited. Altering this is relatively straight forward and can allow for custom CSS files depending on date published, post publish status, custom template being used and virtually any condition imaginable.

As an example of extending this functionality, we will include a file based on post ID. To do this, simply paste the above code into the function again and replace all instances of `post_type` with `ID` (such that $post->post_type becomes $post->ID). Thus, if a post has an ID of 7 (for example), the system will look for a file called editor-style-7.css and, if it exists, include it in the tinyMCE editor.

Please note that using post IDs can result in a large quantity of custom CSS files and is not recommended. The above is simply an example for extending the functionality we just created.

Folks, there you have it. Not too difficult, I hope. This allows for further customisation of the WordPress tinyMCE editor, creating a richer user experience for the bloggers using your theme, as well as creating a more accurate representation of what the post will look like on the front end of their WordPress website.