Automatically generate editor styles in WordPress

By default the editor in WordPress is not, as some people describe it, a WYSIWYG editor. Often there is a huge disconnect between the front-end of the site and the admin which results in a poor experience and more support requests. Attempts have been taken to improve this with front-end editing and also custom fields in the backend with specific controls for the user. These are welcome improvements but there are times when the editor is the best solution – this blog posts for example.

It is very much the job of the theme to reflect the front end styles in the WordPress editor in order to give a true representation of what the user is typing. It isn’t, however, always a requirement of the theme to do this and is a cumbersome task to retrofit and maintain. I’ve manually created editor styles before but this really requires an automated solution.

less-gulp

To do this you’ll need to be familiar with a CSS pre-processor such as Less or Sass and also be using a task runner such as Gulp or Grunt. I’ll be using Less & Gulp in this example but it should be easy for you to switch it out with your tools – it’s the approach I’m trying to illustrate.

Structure

If you’re not already taking a modular approach to writing your CSS then this is the first place to start. Instead of just having style.less and compiling that to make style.css you’ll need to split your code up a bit more.

structure

You may well have more files or a slightly different structure in your project but I’m just showing the bare minimum we need to achieve this task. As you can see above, I’ve split the variables.less (colours, fonts) out into it’s own file and also the style-guide.less for the site has it’s own file too. We now have two files that will be compiled editor-style.less for the backend and style.less for the front end.

Styling

I’m going to keep the styling very minimal in this example, again it’s the concept rather than me providing a complete solution. 

The first task is to create your variables for the site which will go in variables.less

@body-font: "Georgia", serif;
@header-font: "Helvetica", sans-serif;
/* Colours */
@brand-red: #b23636;
@brand-blue: #257eb1;
view raw variables.less hosted with ❤ by GitHub

Next, I’ll create a style-guide.less. It’s probably worth noting that this technique only works effectively if you do have a style guide that is standardised across the site. If you don’t have this standardisation you may have bigger problems when creating the site, but I digress.

.style-guide() {
font-family: @body-font;
h2,
h3 {
font-family: @header-font;
}
h2 {
font-weight: 300;
font-size: 30px;
line-height: 36px;
}
h3 {
color: @brand-red;
text-transform: uppercase;
font-size: 16px;
line-height: 20px;
}
p {
font-size: 17px;
line-height: 24px;
margin: 20px 0;
font-weight: 300;
}
}
view raw style-guide.less hosted with ❤ by GitHub

Here I’ve created a mixin that defines the styles that should be used in the main content area on the site and therefore in the editor. You may want the heading tags to be larger or a different colour in the sidebar but I’m just focusing on the content the user has control over and will be editing. Also, I’ve only including the h2, h3 and p tags – you’ll also need to define others such as ul, ol, blockquote and so on.

Next we need to incorporate these styles into our main stylesheet – style.less

@import "style-guide.less";
@import "variables.less";
body {
font-size: 15px;
}
h1,
h2,
h3 {
color: #222;
}
.main .content {
.style-guide();
}
view raw style.less hosted with ❤ by GitHub

Again, super simple but here we have a base font size of 15px across the site and in general the colours of the headings are #222. However, in the main content area (.main .content) of the site we’ll now be applying the styles set in our mixin. The h2 will now be #b23636 (our brand red) and our p (our copy) will be 17px along with the other attributes we have set.

As we want our main content area to be reflected in the editor we can now apply these exact same styles in the backend to TinyMCE. We do this by creating the final file editor-style.less

@import "style-guide.less";
@import "variables.less";
#tinymce {
.style-guide();
}
view raw editor-style.less hosted with ❤ by GitHub

You can probably see now why it was important to modularise the variables and the styles themselves. Quickly importing these two and then applying the mixin to #tinymce is all we need to do to produce the correct styles. It also means if we need to changing h2 to be @brand-blue instead of @brand-red we can change in style-guide.less and it will change everywhere.

Compiling

Once we have created those four files we’ll now need to compile them. style.less will compile as style.css (which you’re probably already doing and then editor-style.less will compile as editor-style.css

gulp.task('editor-style', function() {
return gulp
.src('css/editor-style.less')
.pipe(less())
.pipe(autoprefixer('last 2 version', "> 1%", "ie 8"))
.pipe(minify())
.pipe(gulp.dest('css'))
.pipe(notify({ message: 'Editor Style Compiled'}));
});
gulp.task('default', function() {
gulp.watch('./css/style-guide.less', ['editor-style']);
});
view raw gulpfile.js hosted with ❤ by GitHub

This is just a snapsnot of our gulpfile.js to automatically produce the editor styles. Whenever style-guide.less changes then your editor-style.less will be compiled and editor-style.css will be (re)created into the css directory. This is very much set-and-forget which is the desired result here because it adds no extra overhead to your project without compromise to the quality.

Link Stylesheet

The final thing you’ll need to do is to make sure that the stylesheet is added to the admin so it’s applied to TinyMCE. To do this you’ll need to use add_editor_style().

<?php
function stomp_add_editor_styles() {
add_editor_style( 'css/editor-style.css' );
}
add_action( 'admin_init', 'stomp_add_editor_styles' );
view raw add-editor-style.php hosted with ❤ by GitHub

Now, when you’re referring to the editor in the admin you can say it’s WYSIWYG with pride. Also there won’t be as many surprises for your users when switching between the backend and frontend on their site.

Work with me on your project Get started