More tips for styling the WordPress tinyMCE editor

Blue WordPress logo, courtesy http://wordpress.org/about/logos/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. :)

LA's question regarding styling the tinyMCE editor in WordPress

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.

This entry was posted in Tutorials, WordPress and tagged , , , . Bookmark the permalink.
  • http://www.imod.co.za Chris M

    Been so busy that I haven’t had a chance to go through all my RSS feeds, finally got to mattycoza and could catch up on some reads :)

    Always a treat, thanks Matt!

    • http://matty.co.za Matty

      Thanks Chris! :)

  • Ben Cope

    How would you modify the function to test if a particular page template is being used?

    • http://matty.co.za Matty

      Hi Ben,

      I would imagine you would make use of the `is_page_template()` function, passing to it the template file you’re wanting to check for… for example, `is_page_template(‘about.php’)`. which would check if the about.php file is in use.

      Alternatively, if this doesn’t work, you could use the `get_post_meta()` function to retrieve the value, if it exists from the database and then say, `if ( $_value == ‘about.php’ )` as the test. The meta value to retrieve is `_wp_page_template`.

      I hope this helps. :)

      Cheers,
      Matt.

      • http://parkourvisions.org Tyson

        If anyone cares I got this to work for changing the stylesheet for different page templates.

        global $post;
        $pagetemplate = get_post_meta($post->ID, ‘_wp_page_template’, true);

        Is the code I used for determining the page template, and then I append it to the file name like above.

        In the specific css file I then import the default changes which is nice (although navigating to the right directory didn’t work so well).