Do you add regular content to your WordPress site? If so, you know the drill… Log in to the admin dashboard, click that “add new” post button, and proceed to stare at the screen write captivating and meaningful content.
I don’t know about you, but I’ve spent as much time tinkering with my site design and typography as I have writing content. Wouldn’t it be nice if I could enjoy all of my site styles from within the post editor screen? Turns out I can! And so can you.
Today I’ll show you how, in 5 minutes or less, to apply your site’s styles to your post editor. That means you can see your site fonts, colors, and sizes within your editor, making it easier to preview your content without actually previewing it. 🙂
Add Editor Style to Your Site
We’re going to use add_editor_style, a function available in WordPress core, to do the trick. Simply drop the following into your site’s functions.php file (or wherever you add custom functionality in your site).
| add_action( 'init', 'cd_add_editor_styles' ); | |
| /** | |
| * Apply theme's stylesheet to the visual editor. | |
| * | |
| * @uses add_editor_style() Links a stylesheet to visual editor | |
| * @uses get_stylesheet_uri() Returns URI of theme stylesheet | |
| */ | |
| function cd_add_editor_styles() { | |
| add_editor_style( get_stylesheet_uri() ); | |
| } |
Now go check out a post and you’ll see the magic in action! That’s it!
Note that I’m just using my theme’s stylesheet, which may bring in some styles to my editor that I don’t want (i.e. set widths, padding, margins, etc.). If you only want to bring in font-related styles, create a separate stylesheet and link to that instead of your theme stylesheet.
In the function above, remove get_stylesheet_uri() and replace it with 'your-custom-styles.css' (in quotes).
Props
Thanks to AJ Clarke over at WPExplorer.com for introducing me to style in the post editor screen and pointing me to the add_editor_style function reference in the WordPress Codex.
You rock, thanks!
Why, thank you!
Pingback: How To Make Bones Starter Theme ‘Theme Check’ Friendly
Thanks Carrie. I really appreciate the guidance here.
However, adding this code to my child theme’s functions.php file made no difference in my visual editor. and I have a fair amount of custom coding in my styles.css page.
I am using the Dynamik Web Builder child theme for Genesis.
Might this code for some reason not function in this instance?
You said you added the code to the child theme’s functions.php… if you entered that via the Dynamik functions window, you’ll need to make sure the “affect admin area” checkbox is selected. Otherwise, no functions dealing with the admin area are executed.
If you’ve done that and you’re still not seeing the result, there may be some other style conflicts in your site.
Hi,
Great technique, but infortunately, I see no difference in the Editor.
I use a child theme and all my css are located in custom.css and not in style.css. Is it the reason why I can’t see any difference ?
Thx
Yes, line 10 in the code is bringing in the theme stylesheet. You’d have to modify that to point to a custom style sheet. The instructions are in the post.
Can I access 2 style.css files? My child theme has it’s own styles file with lots of useful code and then I have my custom styles file that overrides some of the standard css and adds additional code.
Any way to have my visual editor reflect all my css styles?
Just can’t get this to work.
Nothing changes in TinyMCE.
My main stylesheet is the default filename of style.css in my custom theme.
But style.css’s contents are:
@import url( ‘/bootstrap/dist/css/bootstrap.min.css’ );
@import url( ‘custom.css’ );
Is this valid?
Do a view source on your page and see what it’s showing the URL structure as for both of those files. It’s likely just an incorrect path.
What would be correct?
The source HTML for a post-edit page doesn’t contain any link references to my style.css, custom.css or the bootstrap CSS file. The bootstrap file is referenced in an impossibly-long “tinyMCEPreInit” variables string somehow, but not style.com.
I’m in the same boat as Robert Andrews. This simply doesn’t work. The add_action part works, but add_editor_style doesn’t work. I’m using WordPress 4.1.5.
By “doesn’t work”, I mean the CSS file does not appear in the head of the document.