• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Carrie Dils

Carrie Dils

WordPress Developer, Consultant, and Instructor

  • About
    • Work with Me
    • Around the Web
    • Media Kit
  • Blog
  • Podcast
  • Web Development Courses
  • Freelancing Courses

The Five Minute Guide to Add Editor Style

Originally published on October 24, 2013 by Carrie Dils 33 Comments
Last updated on October 24, 2013

FacebookTweetPinLinkedIn

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() );
}
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.

FacebookTweetPinLinkedIn

Filed Under: WordPress Tutorials

About Carrie Dils

I believe you can make a good living doing work that makes you excited to get out of bed every morning.

In addition to this blog, I host a podcast for freelancers, teach business courses at The Fearless Freelancer®, and teach WordPress and Front-end Development courses for Lynda.com and LinkedIN Learning. I'm also writing a book for freelancers.

Reader Interactions

Comments

  1. Brad Smith says

    October 25, 2013 at 9:42 am

    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.

    Reply
    • Carrie Dils says

      October 25, 2013 at 9:49 am

      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

      Reply
      • Brad Smith says

        October 25, 2013 at 10:19 am

        Ahh, now I see it. Missed that detail on my first read through. Thanks bunches.

        Reply
  2. Steve Wharton says

    October 25, 2013 at 10:03 am

    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.

    Reply
    • Carrie Dils says

      October 25, 2013 at 10:04 am

      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

      Reply
      • Steve Wharton says

        October 25, 2013 at 10:21 am

        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.

        Reply
  3. Mike Metcalfe says

    October 27, 2013 at 4:10 am

    That’s cool Carrie. Did your typekit fonts load ok in the editor? Cheers!

    Reply
    • Carrie Dils says

      October 27, 2013 at 8:03 am

      Yep!

      Reply
  4. gravatar@tibesar.com says

    October 27, 2013 at 4:36 pm

    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.

    Reply
    • Carrie Dils says

      October 27, 2013 at 6:13 pm

      It only impacts the visual editor. 🙂

      Reply
      • Marcus L Tibesar says

        October 27, 2013 at 8:34 pm

        Thank you 🙂

        Reply
  5. Debbie says

    March 7, 2014 at 9:20 pm

    Well that was easy! Thanks bunches. 😀

    Reply
  6. Jim Proctor says

    March 8, 2014 at 5:07 pm

    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

    Reply
    • Carrie Dils says

      March 8, 2014 at 6:16 pm

      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.

      Reply
  7. Jim Proctor says

    March 8, 2014 at 10:45 pm

    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

    Reply
  8. jannmirchandani says

    April 23, 2014 at 7:08 pm

    This is awesome! I was able to create a editor-style.css file for the h3 tags, etc that were confusing visually to differentiate from other styles.

    Perfect!

    Reply
    • Carrie Dils says

      April 24, 2014 at 9:03 am

      Glad to hear it!

      Reply
  9. Adam says

    July 15, 2014 at 3:47 pm

    You rock, thanks!

    Reply
    • Carrie Dils says

      July 15, 2014 at 4:33 pm

      Why, thank you!

      Reply
  10. Chess says

    August 30, 2014 at 12:14 pm

    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?

    Reply
    • Carrie Dils says

      September 1, 2014 at 8:17 am

      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.

      Reply
  11. lorembolo says

    September 8, 2014 at 8:55 am

    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

    Reply
    • Carrie Dils says

      September 9, 2014 at 7:36 am

      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.

      Reply
  12. Chess says

    September 10, 2014 at 12:06 pm

    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?

    Reply
  13. Robert Andrews says

    April 27, 2015 at 5:50 pm

    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?

    Reply
    • Carrie Dils says

      April 27, 2015 at 7:33 pm

      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.

      Reply
      • Robert Andrews says

        April 28, 2015 at 4:03 am

        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.

        Reply
  14. webcomm says

    August 21, 2015 at 1:04 pm

    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.

    Reply
  15. webcomm says

    August 21, 2015 at 1:10 pm

    By “doesn’t work”, I mean the CSS file does not appear in the head of the document.

    Reply
  16. susantau says

    January 28, 2016 at 5:19 pm

    Hi Carrie,

    I love your wry effervescent energy and astute wordpress and freelancing insights! I find myself cracking up often as I read through your posts. I’m an official subscriber now. 🙂

    I love the idea of this thing soooo much but I am unable to get The Five Minute Guide to Add Editor Style to work. Here’s what I did:
    – I replaced get_stylesheet_uri() in functions.php with edit-style.css (lives in the root of my child theme and contains one initial test style).
    – I upload the functions.php (also btw in root of my child theme) along with edit-style.css but when I go to the visual editor of any page or post on my site, I see no evidence of the new style. Just the same old styles (Heading 1-6, paragraph, preformatted).

    My theme is a child of Twenty Fifteen, and my WordPress version is 4.4.1.

    Would you possibly have any idea what the issue is?

    Thanks for any thoughts – I know you’re very busy.

    Susan
    p.s. um – heh heh – please kindly overlook my pathetic archaic ancient website which I am updating in a couple weeks – i swear.

    Reply
    • Carrie Dils says

      January 28, 2016 at 8:44 pm

      Hey Susan!
      Glad you’re finding helpful stuff on here (and giggling a little). 🙂

      I hate to ask this question, but …. have you tried clearing your cache?

      Reply
  17. susantau says

    February 10, 2016 at 11:32 am

    Hello Carrie, Forgive me for vanishing for a couple weeks (I forgot to click “Notify me of new comments via email”)(I won’t this time). Yes, i cleared my cache and tried it two ways: with the function calling in my main stylesheet (get_stylesheet_uri()) and then with the function calling my custom ‘edit-style.css’ stylesheet that has just one style in it. But only the standard Visual Editor styles continue to show (paragraph, six header styles and preformatted). You explanation couldn’t be clearer – what on earth can I be doing wrong?

    Reply

Trackbacks

  1. How To Make Bones Starter Theme ‘Theme Check’ Friendly says:
    July 25, 2014 at 4:58 pm

    […] it’s 1.7 now, but I couldn’t find it. One of the easiest ways to add Editor style is to use your style sheet as one. Of course, it’s not the best way to do it. You can create your own version or just […]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Search

Heya, I’m Carrie Dils

Carrie Dils chillin at the beach

Articles

  • Business
  • Front-End Development
  • Genesis Framework
  • Mental Health
  • Web Accessibility
  • WordPress Tutorials

Things I Love ❤️

My Tech Toolbox

Favorite Business Books

  • OfficeHours.FM
  • My Courses on LinkedIN Learning
  • The Fearless Freelancer®

© 2021 CWD Holdings LLC