Styling TinyMCE content in WordPress

I, for one, was tired of my left aligned images creating a staircase in TinyMCE when my theme CSS is set for them to nicely clear. Here is what it looks like in WordPress TinyMCE:

2013-06-28_10-12-37

When this is what it looks like on the page:

2013-06-28_10-16-01

In TinyMCE it can often be challenging to tell what the true layout of the page will look like when your front-end CSS is applied, but it turns out that it’s easy to change the TinyMCE styles as well. All you need to do is drop this code into your theme’s functions.php:


function my_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );

And then create a corresponding CSS file called custom-editor-styles.css in your theme folder.

h2 {
	clear: left;
	padding-top: 30px;
}

.alignleft{
	margin-right: 15px;
}

Write the CSS to clear your <h2>’s, make any other style changes you want to show up in TinyMCE, and voilà! You’ve got a page that makes visual sense.

Clearing Headings

There is a lot more you can do with this, like incorporating more of your actual theme CSS, but the main point is just to make your TinyMCE (back-end) and theme (front-end) CSS more consistent. We don’t need it to look exactly like the site, just enough to understand how the final page is going to lay out.

If you’d like to learn more, you can always check out the add_editor_style() post in the WordPress Codex.

Newsletter

Subscribe and stay connected through our Newsletter. We send out important news, tips and special offers.

  • This field is for validation purposes and should be left unchanged.