{"id":42948,"date":"2020-02-27T13:29:53","date_gmt":"2020-02-27T07:59:53","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=42948"},"modified":"2026-10-07T07:34:38","modified_gmt":"2026-10-07T02:04:38","slug":"add-custom-css-wordpress-post-editor","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/add-custom-css-wordpress-post-editor\/","title":{"rendered":"How to Add Custom CSS to the WordPress Editor (Block and Classic)"},"content":{"rendered":"<p>Want your WordPress editor to look the way you like, or to match your site&#8217;s fonts and colours exactly? You can add custom CSS to the WordPress editor with a few lines of code using editor styles. I&#8217;ve used a dark editor with light text for years because it&#8217;s easier on my eyes during long writing sessions. Here&#8217;s how to add custom CSS to the WordPress editor in 2026, for both the block editor (Gutenberg) and the Classic Editor.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-42990\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/add-editor-styles.png\" alt=\"add custom CSS to the WordPress editor with a dark editor style\" width=\"497\" height=\"274\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/add-editor-styles.png 497w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/add-editor-styles-150x83.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/add-editor-styles-300x165.png 300w\" sizes=\"(max-width: 497px) 100vw, 497px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> In your child theme&#8217;s <code>functions.php<\/code>, add <code>add_theme_support( 'editor-styles' );<\/code> and <code>add_editor_style( 'editor-style.css' );<\/code> inside an <code>after_setup_theme<\/code> hook, then put your CSS in <code>editor-style.css<\/code> in the theme folder.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6ae2a6a18db41\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ae2a6a18db41\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/add-custom-css-wordpress-post-editor\/#Why_add_custom_CSS_to_the_WordPress_editor\" >Why add custom CSS to the WordPress editor?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/add-custom-css-wordpress-post-editor\/#Step_1_Enable_editor_styles_in_functionsphp\" >Step 1: Enable editor styles in functions.php<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/add-custom-css-wordpress-post-editor\/#Step_2_Create_the_editor-stylecss_file\" >Step 2: Create the editor-style.css file<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/add-custom-css-wordpress-post-editor\/#Step_3_Add_your_CSS\" >Step 3: Add your CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/add-custom-css-wordpress-post-editor\/#Other_ways_to_style_the_WordPress_editor\" >Other ways to style the WordPress editor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/add-custom-css-wordpress-post-editor\/#Frequently_asked_questions\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/add-custom-css-wordpress-post-editor\/#Does_editor_CSS_affect_my_live_site\" >Does editor CSS affect my live site?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/add-custom-css-wordpress-post-editor\/#Why_isnt_my_editor-stylecss_working\" >Why isn&#8217;t my editor-style.css working?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/add-custom-css-wordpress-post-editor\/#Can_I_use_Google_Fonts_in_the_editor\" >Can I use Google Fonts in the editor?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Why_add_custom_CSS_to_the_WordPress_editor\"><\/span>Why add custom CSS to the WordPress editor?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>What you see is what you get:<\/strong> make headings, fonts, colours and spacing in the editor match the front end of your site.<\/li>\n<li><strong>Comfortable writing:<\/strong> use a dark background, larger text or a narrower column for easier reading.<\/li>\n<li><strong>Custom classes:<\/strong> preview styled boxes, buttons or notes in the editor exactly as readers will see them.<\/li>\n<\/ul>\n<p>Before, our Classic Editor looked like this:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-42989\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/no-editor-styles1.png\" alt=\"no editor styles\" width=\"499\" height=\"247\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/no-editor-styles1.png 499w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/no-editor-styles1-150x74.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/no-editor-styles1-300x148.png 300w\" sizes=\"(max-width: 499px) 100vw, 499px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_1_Enable_editor_styles_in_functionsphp\"><\/span>Step 1: Enable editor styles in functions.php<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Use a <strong>child theme<\/strong> so your changes aren&#8217;t lost when the theme updates. Add this to the child theme&#8217;s <code>functions.php<\/code>, and keep a backup in case of a typo, since an error here can take your site offline:<\/p>\n<pre><code>function qot_editor_styles() {\r\n    add_theme_support( 'editor-styles' );     \/\/ needed for the block editor\r\n    add_editor_style( 'editor-style.css' );   \/\/ loads the file from your theme folder\r\n}\r\nadd_action( 'after_setup_theme', 'qot_editor_styles' );<\/code><\/pre>\n<p><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_editor_style\/\" target=\"_blank\" rel=\"noopener\">add_editor_style()<\/a> looks for the file in the child theme first, then the parent theme.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_2_Create_the_editor-stylecss_file\"><\/span>Step 2: Create the editor-style.css file<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Create <code>editor-style.css<\/code> in your child theme folder using your host&#8217;s File Manager, FTP, or by <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/wordpress-theme-files-without-ftp\/\">creating theme files without FTP<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-49660\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/custom-editor-css.png\" alt=\"custom editor css\" width=\"302\" height=\"207\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/custom-editor-css.png 302w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/custom-editor-css-300x206.png 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/custom-editor-css-150x103.png 150w\" sizes=\"(max-width: 302px) 100vw, 302px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_3_Add_your_CSS\"><\/span>Step 3: Add your CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>For the block editor (Gutenberg),<\/strong> write normal CSS. WordPress automatically prefixes it with <code>.editor-styles-wrapper<\/code>, so it only affects the content area, not the admin interface:<\/p>\n<pre><code>body {\r\n  font-family: Georgia, serif;\r\n  font-size: 19px;\r\n  line-height: 1.7;\r\n  color: #ddd;\r\n  background: #222;\r\n}\r\na { color: #7fff00; }\r\nh2 { border-bottom: 2px solid #f28c1e; padding-bottom: 6px; }\r\n.note { background: #fff3cd; padding: 12px 16px; border-radius: 6px; }<\/code><\/pre>\n<p><strong>For the Classic Editor (TinyMCE),<\/strong> the content is inside an iframe with the <code>body#tinymce<\/code> selector:<\/p>\n<pre><code>body#tinymce.wp-editor {\r\n  font-family: Arial, Helvetica, sans-serif;\r\n  margin: 30px;\r\n  color: #ddd;\r\n  background: #333;\r\n}\r\nbody#tinymce.wp-editor a { color: #7fff00; }<\/code><\/pre>\n<p>Save the file and reload the editor (use a hard refresh, <strong>Ctrl + Shift + R<\/strong>, if you don&#8217;t see changes).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Other_ways_to_style_the_WordPress_editor\"><\/span>Other ways to style the WordPress editor<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>Block themes and theme.json:<\/strong> in block themes like Twenty Twenty-Five, styles set in <code>theme.json<\/code> or <strong>Appearance \u2192 Editor \u2192 Styles<\/strong> apply to the editor automatically.<\/li>\n<li><strong>Editor interface CSS:<\/strong> to change the admin UI around the content (sidebar, toolbar), enqueue a stylesheet on the <code>enqueue_block_assets<\/code> or <code>admin_enqueue_scripts<\/code> hook instead.<\/li>\n<li><strong>Import frameworks:<\/strong> you can also <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/bootstrap-font-awesome-in-wordpress-visual-post-editor\/\">add Bootstrap CSS and Font Awesome icons to the editor<\/a> so their classes preview correctly.<\/li>\n<\/ul>\n<p>Note that <strong>Appearance \u2192 Customize \u2192 Additional CSS<\/strong> styles only the front end, not the editor.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Frequently_asked_questions\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Does_editor_CSS_affect_my_live_site\"><\/span>Does editor CSS affect my live site?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No. Editor styles only load inside the WordPress editor. Your site&#8217;s front end uses the theme&#8217;s normal stylesheet.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Why_isnt_my_editor-stylecss_working\"><\/span>Why isn&#8217;t my editor-style.css working?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Check the file name and location, make sure <code>add_theme_support( 'editor-styles' )<\/code> is set for the block editor, and clear your browser and caching plugin cache.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Can_I_use_Google_Fonts_in_the_editor\"><\/span>Can I use Google Fonts in the editor?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes. Pass the font stylesheet URL to <code>add_editor_style()<\/code> as well, and use the font family in your editor CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want your WordPress editor to look the way you like, or to match your site&#8217;s fonts and colours exactly? You&#8230;<\/p>\n","protected":false},"author":4,"featured_media":42990,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49,17],"class_list":["post-42948","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/42948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=42948"}],"version-history":[{"count":1,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/42948\/revisions"}],"predecessor-version":[{"id":63394,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/42948\/revisions\/63394"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/42990"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=42948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=42948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=42948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}