Style the WordPress TinyMCE visual editor

This function allows you to use custom CSS to style the WordPress TinyMCE visual editor.

Create a CSS file named editor-style.css and paste your styles inside. As a placeholder, I like to start with styles in



the editor-style.css file of the Twenty Twelve theme.

In the functions.php add the following:

add_editor_style();

If you don’t want to use the name “editor-style” for your CSS file and also want to move the file elsewhere, e.g. in

within a css directory, then modify the function.

For example, I want to name my file tiny-mce-styles.css and I want it within my CSS directory; so my function will look

like this:

add_editor_style('/css/editor-style.css');

While we’re at it, we might as well style the editor for right-to-left languages. In the theme directory, create a CSS

file called editor-style-rtl.css and, at the very least, include the following:

html .mceContentBody {
    direction: rtl;
    unicode-bidi: embed;
}
li {
    margin: 0 24px 0 0;
    margin: 0 1.714285714rem 0 0;
}
dl {
    margin: 0 24px;
    margin: 0 1.714285714rem;
}
tr th {
    text-align: right;
}
td {
    padding: 6px 0 6px 10px;
    text-align: right;
}
.wp-caption {
    text-align: right;
}

Again, as a placeholder, the above styles are from the Twenty Twelve theme. Restyle and extend as needed.