How to Customize Styles For WordPress Editor

We have been seen many changes every year 2 or 3 times when WordPress is updated. Mostly the new update bounces either some improvements to the existing features or new feature included. Here we will discuss some problems with WordPress Editor Styles. After following up this article, you will know how to customize WordPress editor styles. For visual editors for WordPress, you can check our post here.

Before the WordPress 3.0 version, when editor feature was first launched, you were having the trouble by refreshing your page every time to see how your post looks line on the front side. As we know WordPress uses TinyMCE editor. But this is editor is very difficult from one at the front-side as the editor styles come from the WordPress core and front-end come from the theme’s style.css file.

Take a look at the following screenshot, the WordPress editor uses Serif font family for the content, but at the front-side WordPress uses Sans Serif font.

different-styles-for backend and frontend

But after the WordPress 3.0, you have the choice to customize your editor styles according to your theme’s design.┬áLet’s find out how to customize editor styles.

How to add editor styles function

WordPress 3.0 provides a function add_editor_style() to add editor styles. So now, I will recommend to use separate CSS file for editor styles in your theme’s folder apart from the default CSS file. Let’s say, you have picked a name for that CSS file as “stylesheet_editor.css“, now put the following code inside functions.php.

add_editor_style('stylesheet_editor.css');

Don’t stuff that stylesheet with messy code, just put the styles for the elements you needed such as images, links, headings and paragraphs. But if you don’t know what to included in the CSS file, here is my simple tip for you:

Go to the default WordPress theme like “Twenty Ten“, copy the editor-style.css from there and pasted to your created stylesheet.

How to add editor styles for post types

After the release of WordPress 3.0, we also have the option to create as many posts types. Here is a tutorial to create and use WordPress post types. As we know, WordPress’ default post types are Post and Page.

So add the following code inside your functions.php to add specific editor styles for your extra post types.

function editor_style_for_post_types() {
  global $post;
  $post_type = get_post_type($post->ID);
  $editor_style = 'stylesheet_'. $post_type . '.css';
  add_editor_style($editor_style);

}
add_action('pre_get_posts, 'editor_style_for_post_types');

Now just create a stylesheet stylesheet-editor-{post-type}.css. I hope you will find these guidelines useful for customizing styles for WordPress editor.

Duan Lingxin

Duan Lingxin

Content crafter and chief editor at Scratching Info. Also regular contributor on other major online tech platforms. Security Specialist by day and a writer by night, he does his best to instill his knowledge about tech while delivering inspiring and life changing resources through his writing,

More Posts - Website

Leave a Comment