Improving the WordPress Editor Experience for Users

We’re well over 100 sites into our WordPress Content Management rollout here at John Carroll University, and it’s been going swimmingly.

One of the reasons we selected WordPress was its Word-like interface for working with copy. For our users who had been using Dreamweaver for years, they’ve found it to be an easy transition.

The feedback we were getting is that what they were typing in the visual editor in WordPress wasn’t what they were seeing once when they previewed or saved their pages. They wanted to see actual line spacing, bulleted lists, blockquotes and more look more like what they’ll be like once they are published.

For our users, we want them to not see this:

Screen shot 2011 08 12 at 12 19 39 PM

But see this:

WP Editor Fancy

Luckily for us, it’s pretty easy to do this in WordPress. Here’s how:

Create a file in your theme’s main directory called editor-style.css. This is where you will style the HTML elements such as p, a, ul and so on for viewing in the editor. We made sure it matched up with our site’s CSS. Here are a few lines from it:

body, input, textarea, p{
  font-size: 14px;
  line-height: 24px;
 font-family: Helvetica, Arial, sans-serif;
  }

a{
	color: #003969;
  font-weight: bold;
  text-decoration: none;
}

blockquote{
	border: 4px solid #ebefef;
  border-width: 4px 0;
  margin: 0 0 32px -20px;
  font-family: 'MuseoSlab500', Georgia, "Times New Roman", Times, serif;
  padding: 8px 20px 0 40px;
}

blockquote p{
	margin-bottom: 8px;
	font-family: 'MuseoSlab500', Georgia, "Times New Roman", Times, serif;
}

Once that’s saved in your theme’s directory, open your functions.php file. You’ll need to insert this line somewhere in there:

add_editor_style();

Reload your editor and text put in the editor or using TinyMCE’s buttons should be styled correctly. Depending on your site’s CSS, you can add additional tags if you are styling them a certain way, such as hr or img.