business & technology for wedding and lifestyle pros

Adding a Visual Editor Stylesheet


By default, WordPress’ visual editor looks a bit boring, and might not be very reminiscent of your actual post’s look and feel. Today, we’re going to change all that by adding in a visual editor stylesheet to your WordPress theme.

Visual Editor Stylesheet in WordPress How-To

Photo: @Minamoto Images / Stocksy

What’s a visual editor stylesheet?

A visual editor stylesheet replaces the WordPress post editor defaults with your own theme’s styles, so that as you are crafting your post, you are able to immediately see the end result. Adding in this functionality isn’t necessary if you don’t have a lot of custom styling in your posts, but if you are using special fonts, image alignment, or even items as simple as custom bullet points, you may love this feature!

You’ll want to perform all of the steps below in your test site first, to be sure you have it down before replicating in your actual production site.

Below, my visual editor with the WordPress defaults:

WordPress Visual Editor Stylesheet How-To

Step 1: Edit functions.php

First, we’ll want to tell our WordPress theme that we want to use the visual editor stylesheet functionality. Add the following code into your theme’s functions.php file:

/**
 * Add editor stylesheet
 *
 */
 add_editor_style();

Step 2: Create your editor stylesheet

Log into your favorite FTP client (refresher on FTP here) and FTP down your theme’s style.css file to your computer. Change its name to editor-style.css, and FTP it back into your blog’s theme directory.

Step 3: Edit your editor stylesheet

In your WordPress dashboard, navigate to Appearance » Editor. You should now see your editor-style.css file. Click on it, and let’s edit it. Remember, none of the changes we’ll be making to this file will affect your front-end appearance, only what you see when you are creating a post.

Remove any unnecessary code, such as your theme’s container, header, footer, sidebar, widget, form styles, etc. You’re only looking for the styles that apply to your posts. If your theme’s CSS file is well-commented or well-sectioned out, this part should be easy.

Because the visual editor isn’t encased in your WordPress theme, you will want to remove any ascendant CSS selectors. For example, your theme (like mine) may have a class that applies only to post text. My ascendant selector class is .post_text, and the .post_text class precedes all of my CSS within posts. Where my style.css file says:

.post_text a, .post_text a:visited { 
	color: #aaa;
	text-decoration: none; 
	outline: none; 
	transition: color 100ms linear 0s;
}

, my editor-style.css only says:

a, a:visited { 
	color: #aaa;
	text-decoration: none; 
	outline: none; 
	transition: color 100ms linear 0s;
}

Also, any code directly in my .post_text CSS went straight into my editor-style.css file’s body tag, like so:

body {
	line-height: 1.5em;
	padding: 20px;
}

This process may take a little trial and error, but if you’re using this functionality, you probably know what custom code you are adding into your posts, and those are the classes you’ll want to have in your editor-style.css file.

Tip: If you are a bit blind (like I am) and your theme contains relatively small fonts, you may want to up the font sizes in your visual editor stylesheet to make it easier to see as you are writing your posts.

Step 4: Import custom fonts

If you are using custom fonts in your theme, such as Google Fonts, Typekit, or Fonts.com, you will need to import these into your visual editor stylesheet using the @import command and the CSS instructed by the font provider. This code can go at the top of your visual editor stylesheet. Example for the Google Karla font:

@import url('http://fonts.googleapis.com/css?family=Karla:400,700');

Step 5: Add a dropdown for custom styles in your visual editor

The excellent TinyMCE Advanced plugin allows you to add/edit the buttons in your WordPress visual editor. Install the plugin, then, under Settings -> TinyMCE Advanced, set up the buttons as you like them, and under Advanced Options check the box for “Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.” This adds a Formats dropdown to your visual editor, where you can easily select any styles in your editor-style.css for use in your posts.

Your visual editor should now look something like this:

Add a Visual Editor Stylesheet in WordPress

Much better, yes?

A few final tips:

  • It bears repeating, do this process in your test site first, as you are editing your theme’s functions.php file and installing a plugin.
  • If you are using caching of your site, disable it while you put the code into production, and purge your cache after making all of your updates.
  • Don’t forget that you can make custom changes to your editor-style.css that don’t affect your style.css file, such as making your fonts larger for easy editing.

Have fun with your new editor stylesheet!

Chime In

Leave a Comment

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

TO TOP