Isn’t it annoying when you have to keep hitting the Preview button every time you want to see what your WordPress post will actually look like when it’s published? What if I told you there’s a way to add custom WordPress editor styles to the admin area? Awesome, right?!
Basically, you can take the same styles that your WordPress theme is using, and apply them to the post editor screen when you’re writing a post. Preview your WordPress posts & pages in real-time, as you write them.
The best WordPress themes will have already taken care of this for you, but many free themes (and even some premium ones) don’t bother to take this extra step.
If you’re a theme developer, or building a custom theme for a client, custom editor styles are a great way to add some polish to the editing experience.
Let’s dive in and take a look at…
- how to add custom editor styles using WordPress’
add_editor_style
function - which styles you should add to the post editor
- how to format your
editor-style.css
file
Here’s what my WordPress editor styles look like when editing a post:
Really similar to the actual website, right?!
add_editor_style WordPress Function
First, let’s take a look at the add_editor_style
function, what it does, where it goes, and the parameters we can use with it.
Where to place the code
Because WordPress editor styles are directly related to your theme, we’ll be placing this code in our theme’s functions.php
file.
add_editor_style();
What add_editor_style
actually does
When you reference add_editor_style
in your theme, it tells WordPress to load a separate CSS file for the TinyMCE visual editor on your WordPress post editing screen.
WordPress doesn’t specify exactly where in the functions.php
file the code should be placed, but I recommend following the convention of the default WordPress themes, Twenty Seventeen, Twenty Sixteen, etc., and placing it inside a function that is hooked to the after_setup_theme
action hook.
The simplest example would look like this:
function themename_setup() {
add_editor_style();
}
add_action( 'after_setup_theme', 'themename_setup' );
If you’re using a theme that has already defined a function for setting up theme options, you’ll likely see other features like:
function themename_setup() {
add_theme_support( 'automatic-feed-links' );
add_theme_support( 'title-tag' );
add_theme_support( 'post-thumbnails' );
add_theme_support( 'html5', array(
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
) );
add_theme_support( 'customize-selective-refresh-widgets' );
add_editor_style();
}
add_action( 'after_setup_theme', 'themename_setup' );
add_editor_style
parameters
There is only one parameter, and it’s optional. You can define a specific filename for your editor styles. By default, just using add_editor_style();
will look for a file named editor-style.css
placed in the root of your theme directory (i.e. /wp-content/themes/themename/).
If you’re OK using that default filename, and placing your CSS file in the root of your theme, then the simple add_editor_style();
will suffice.
If you want to put the CSS file in another folder, or call it something different, your code would look like this:
add_editor_style( 'css/custom-editor-styles.css' );
You would then need to create a file called custom-editor-styles.css, and place it in this directory:
/wp-content/themes/yourtheme/css/
What Do I Include in my WordPress Editor Styles?
Great question! You certainly DON’T want to include everything in your website’s style.css
file. Remember, we’re just targeting the main content (think just the content after the page title and before the comments start). Here’s a rough checklist of which styles should be included, but keep in mind each scenario could be different.
Do include styles pertaining to:
- Font family & font size
- Links (
<a>
) - Headlines (
<h2>
,<h3>
, etc.) - Blockquotes (
<blockquote>
) - Tables (
<table>
) - Images & captions
<pre>
and<code>
elements- Horizontal rules (
<hr />
) - Messages, alerts & callout boxes
- Buttons, CTA (call-to-action) elements
- Any custom CSS classes you use often (in the main content of your posts & pages)
- Any third-party framework elements (i.e. Bootstrap, Foundation, etc.)
Do NOT include styles pertaining to:
- Your site’s header, footer or sidebar
- The layout or structure of your page
- CSS animations or transitions
Formatting the WordPress Editor Styles CSS File
I manually copied items from my site’s style.css
file, and hand-picked which ones to include in my editor styles. I broke my styles into sections, as follows:
- 1.0 – Body & Base Elements
- 2.0 – Headlines
- 3.0 – General Elements
- 3.1 – Links
- 3.2 – Images
- 4.0 – Tables
- 5.0 – Buttons
- 6.0 – Custom CSS Classes
- 7.0 – Alerts & Messages
- 8.0 – Inherited from Twenty Seventeen
- 9.0 – Text Editor
The 9.0 – Text Editor section is there to change the appearance of the “Text” mode in the WordPress editor (as opposed to the Visual mode). When looking at the raw code, I prefer to use a dark background with light text, and a larger font size. The CSS classes I’ve used here should target just the Text editor, and not the Visual styles.
.wp-editor-container .wp-editor-area {
...your text editor styles here...
}
Here’s my preferred styling. I increase the padding, darken the background, lighten the text, increase the font size, and adjust the letter spacing. This makes the WordPress Text Editor a little easier on my eyes.
.wp-editor-container .wp-editor-area {
padding: 2rem 12rem;
background: #232323;
color: #999;
font-size: 17px;
letter-spacing: -0.03rem;
}
Hopefully this provides you with an easy way to implement your website’s actual styles into the WordPress editor. If you have any trouble implementing WordPress editor styles onto your site, or have additional tips, please let me know in the comments.
We Recommend
https://kinsta.com › wordpress-hosting
Fast and secure infrastructure, worldwide CDN, edge caching, 35 data centers, and enterprise-level features included in all plans. Free site migrations.
https://gravityforms.com › features
Create custom web forms to capture leads, collect payments, automate your workflows, and build your business online. All without ever leaving WordPress.
Leave a Comment