• 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

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.

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. 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
  2. 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
« Older Comments

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

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

© 2022 CWD Holdings LLC