Add Editor Styles in WordPress

The Five Minute Guide to Add Editor Style

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).

1 2 3 4 5 6 7 8 9 10 11 12
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() );
 
}
view raw editor-style.php hosted with ❤ by GitHub

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.

Rainmaker Platform: Build a Powerful Website

Carrie Dils

I’m a recommended Genesis Developer with 15+ years experience in web design and development. I'm creative, resourceful, and ready to put my mind to your project. Want to discuss your WordPress project? Let's talk!

Comments

  1. says

    Hey Carrie this looks promising. Hoping this makes writing more comfortable for our members.

    I’m having a wee bit of trouble getting this to work. I suspect its how I’m referencing the theme css file [http://www.toastmasters-d58.org/wp-content/themes/magazine/style.css?ver=2.0.1].

    Do I use the entire path? If not, what portion. Thanks.

    • says

      Hi Brad, you should be able to use the code snippet as is. get_stylesheet_uri() will pull in your theme’s stylesheet. Otherwise, if you wanted to do a special stylesheet, you could just name the file (not full path), assuming it’s in your theme’s root directory.

      Cheers,
      Carrie

  2. Steve Wharton says

    Pretty cool stuff, Carrie. Thanks for the post.

    Just to clarify would this be added to the functions.php file in the framework directory? (My site uses Genesis.)

    Or, in the child-theme directory? (I’m using StudioPress’ sixteen-nine-pro theme.)

    My host provider, Synthesis, requires file edits via sFTP; the edit files option is removed from WP admin–so I wasn’t sure. Thanks again.

    • says

      Hey Steve,
      It’ll be your child theme’s functions.php file. You don’t ever want to edit Genesis Framework files. :)

      Glad to see you ’round these parts again.

      Cheers,
      Carrie

      • Steve Wharton says

        Yeah, duh me.

        I just saw the warning in the framework’s function.php file: “WARNING: This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances. Please do all modifications in the form of a child theme.”

        Works like a charm! (in only 2-minutes)

        Thanks, it’s good to be back.

  3. says

    I added this code to my child theme’s functions.php file but, I’m not sure what’s different when I am using my Post editor? I work almost all of the time in the Text tab and seldom in the Visual tab.

  4. says

    Carrie, just tried this (with Beautiful Pro Genesis child theme), and it looked like it was working great, but I noticed that unordered and ordered lists don’t show up as such anymore in the visual editor, though they do when published. Ideas/workarounds? I tested the other WSYISYG buttons and seems like everything else pretty much shows up okay. Could be a point of confusion to my students (am setting this up for them)…Thanks, Jim

    • says

      Ah, I think that has to do with the margin/padding on lists (the bullets are offscreen to the left). In that instance, it’d be helpful to have an additional stylesheet that adds in extra styles just for the editor for cases like this.

  5. says

    Yes, understood! But now we’re getting into >5 minutes ;-). Actually, what seems to happen across browsers in the visual editor is that all text is now disturbingly sent to the right side with a wide window, and the and markers disappear when all is sent to left side with a narrower visual editor window. I played a bit with adding e.g. a .wp-editor-container style to the stylesheet’s .entry-content specification (so that they’d be the same), but no luck…ideas welcome!…Jim

  6. Chess says

    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?

    • says

      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.

  7. says

    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

  8. Chess says

    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?

Trackbacks

Leave a Reply