{"id":1741,"date":"2011-08-12T12:26:22","date_gmt":"2011-08-12T16:26:22","guid":{"rendered":"https:\/\/www.highedwebtech.com\/?p=1741"},"modified":"2013-10-18T14:18:50","modified_gmt":"2013-10-18T18:18:50","slug":"improving-the-wordpress-editor-experience-for-users","status":"publish","type":"post","link":"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/","title":{"rendered":"Improving the WordPress Editor Experience for Users"},"content":{"rendered":"<p>We&#8217;re well over 100 sites into our WordPress Content Management rollout here at <a href=\"http:\/\/www.jcu.edu\" target=\"_blank\" rel=\"nofollow\">John Carroll University<\/a>, and it&#8217;s been going swimmingly.<\/p>\n<p>One of the reasons we selected WordPress was its Word-like interface for working with copy. For our users who had been using Dreamweaver for years, they&#8217;ve found it to be an easy transition.<\/p>\n<p>The feedback we were getting is that what they were typing in the visual editor in WordPress wasn&#8217;t what they were seeing once when they previewed or saved their pages. They wanted to see actual line spacing, bulleted lists, blockquotes and more look more like what they&#8217;ll be like once they are published.<\/p>\n<p>For our users, we want them to not see this:<\/p>\n<p><img decoding=\"async\" style=\"display: block; margin-left: auto; margin-right: auto; border: 0px;\" alt=\"Screen shot 2011 08 12 at 12 19 39 PM\" src=\"http:\/\/media.highedwebtech.com.s3.amazonaws.com\/wp-content\/uploads\/2011\/08\/Screen-shot-2011-08-12-at-12.19.39-PM.png\" border=\"0\" \/><\/p>\n<p>But see this:<\/p>\n<p><img decoding=\"async\" style=\"display: block; margin-left: auto; margin-right: auto;\" alt=\"WP Editor Fancy\" src=\"http:\/\/webmedia.jcu.edu.s3.amazonaws.com\/webupdates\/files\/2011\/06\/Screen%2Bshot%2B2011-05-31%2Bat%2B3.37.27%2BPM.png\" width=\"575\" \/><\/p>\n<p>Luckily for us, it&#8217;s pretty easy to do this in WordPress. Here&#8217;s how:<\/p>\n<p>Create a file in your theme&#8217;s main directory called <code>editor-style.css<\/code>. This is where you will style the HTML elements such as p, a, ul and so on for viewing in the editor. We made sure it matched up with our site&#8217;s CSS. Here are a few lines from it:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nbody, input, textarea, p{\r\n  font-size: 14px;\r\n  line-height: 24px;\r\n font-family: Helvetica, Arial, sans-serif;\r\n  }\r\n\r\na{\r\n\tcolor: #003969;\r\n  font-weight: bold;\r\n  text-decoration: none;\r\n}\r\n\r\nblockquote{\r\n\tborder: 4px solid #ebefef;\r\n  border-width: 4px 0;\r\n  margin: 0 0 32px -20px;\r\n  font-family: 'MuseoSlab500', Georgia, &quot;Times New Roman&quot;, Times, serif;\r\n  padding: 8px 20px 0 40px;\r\n}\r\n\r\nblockquote p{\r\n\tmargin-bottom: 8px;\r\n\tfont-family: 'MuseoSlab500', Georgia, &quot;Times New Roman&quot;, Times, serif;\r\n}\r\n<\/pre>\n<p>Once that&#8217;s saved in your theme&#8217;s directory, open your <code>functions.php<\/code> file. You&#8217;ll need to insert this line somewhere in there:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">add_editor_style();<\/pre>\n<p>Reload your editor and text put in the editor or using TinyMCE&#8217;s buttons should be styled correctly. Depending on your site&#8217;s CSS, you can add additional tags if you are styling them a certain way, such as hr or img.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s how to style your WordPress visual editor.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[21,58,79],"tags":[102,296,755,986,812,818],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Improving the WordPress Editor Experience for Users - HighEdWebTech<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Improving the WordPress Editor Experience for Users - HighEdWebTech\" \/>\n<meta property=\"og:description\" content=\"Here&#039;s how to style your WordPress visual editor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/\" \/>\n<meta property=\"og:site_name\" content=\"HighEdWebTech\" \/>\n<meta property=\"article:published_time\" content=\"2011-08-12T16:26:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-10-18T18:18:50+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/media.highedwebtech.com.s3.amazonaws.com\/wp-content\/uploads\/2011\/08\/Screen-shot-2011-08-12-at-12.19.39-PM.png\" \/>\n<meta name=\"author\" content=\"Mike\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mrichwalsky\" \/>\n<meta name=\"twitter:site\" content=\"@mrichwalsky\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/\"},\"author\":{\"name\":\"Mike\",\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"headline\":\"Improving the WordPress Editor Experience for Users\",\"datePublished\":\"2011-08-12T16:26:22+00:00\",\"dateModified\":\"2013-10-18T18:18:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/\"},\"wordCount\":312,\"publisher\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"image\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/media.highedwebtech.com.s3.amazonaws.com\/wp-content\/uploads\/2011\/08\/Screen-shot-2011-08-12-at-12.19.39-PM.png\",\"keywords\":[\"add_editor_style();\",\"editor-style.css\",\"Visual Editor CSS\",\"wordpress\",\"WordPress Editor CSS\",\"WordPress Visual Editor\"],\"articleSection\":[\"CSS\",\"PHP\",\"wordpress\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/\",\"url\":\"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/\",\"name\":\"Improving the WordPress Editor Experience for Users - HighEdWebTech\",\"isPartOf\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/media.highedwebtech.com.s3.amazonaws.com\/wp-content\/uploads\/2011\/08\/Screen-shot-2011-08-12-at-12.19.39-PM.png\",\"datePublished\":\"2011-08-12T16:26:22+00:00\",\"dateModified\":\"2013-10-18T18:18:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/#primaryimage\",\"url\":\"http:\/\/media.highedwebtech.com.s3.amazonaws.com\/wp-content\/uploads\/2011\/08\/Screen-shot-2011-08-12-at-12.19.39-PM.png\",\"contentUrl\":\"http:\/\/media.highedwebtech.com.s3.amazonaws.com\/wp-content\/uploads\/2011\/08\/Screen-shot-2011-08-12-at-12.19.39-PM.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.highedwebtech.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Improving the WordPress Editor Experience for Users\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.highedwebtech.com\/#website\",\"url\":\"https:\/\/www.highedwebtech.com\/\",\"name\":\"HighEdWebTech\",\"description\":\"Web &amp; Marketing for Education &amp; Nonprofits\",\"publisher\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.highedwebtech.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\",\"name\":\"Mike\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png\",\"contentUrl\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png\",\"width\":595,\"height\":128,\"caption\":\"Mike\"},\"logo\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/mikerichwalsky\/\",\"https:\/\/twitter.com\/mrichwalsky\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Improving the WordPress Editor Experience for Users - HighEdWebTech","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/","og_locale":"en_US","og_type":"article","og_title":"Improving the WordPress Editor Experience for Users - HighEdWebTech","og_description":"Here's how to style your WordPress visual editor.","og_url":"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/","og_site_name":"HighEdWebTech","article_published_time":"2011-08-12T16:26:22+00:00","article_modified_time":"2013-10-18T18:18:50+00:00","og_image":[{"url":"http:\/\/media.highedwebtech.com.s3.amazonaws.com\/wp-content\/uploads\/2011\/08\/Screen-shot-2011-08-12-at-12.19.39-PM.png"}],"author":"Mike","twitter_card":"summary_large_image","twitter_creator":"@mrichwalsky","twitter_site":"@mrichwalsky","twitter_misc":{"Written by":"Mike","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/#article","isPartOf":{"@id":"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/"},"author":{"name":"Mike","@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"headline":"Improving the WordPress Editor Experience for Users","datePublished":"2011-08-12T16:26:22+00:00","dateModified":"2013-10-18T18:18:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/"},"wordCount":312,"publisher":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"image":{"@id":"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/#primaryimage"},"thumbnailUrl":"http:\/\/media.highedwebtech.com.s3.amazonaws.com\/wp-content\/uploads\/2011\/08\/Screen-shot-2011-08-12-at-12.19.39-PM.png","keywords":["add_editor_style();","editor-style.css","Visual Editor CSS","wordpress","WordPress Editor CSS","WordPress Visual Editor"],"articleSection":["CSS","PHP","wordpress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/","url":"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/","name":"Improving the WordPress Editor Experience for Users - HighEdWebTech","isPartOf":{"@id":"https:\/\/www.highedwebtech.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/#primaryimage"},"image":{"@id":"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/#primaryimage"},"thumbnailUrl":"http:\/\/media.highedwebtech.com.s3.amazonaws.com\/wp-content\/uploads\/2011\/08\/Screen-shot-2011-08-12-at-12.19.39-PM.png","datePublished":"2011-08-12T16:26:22+00:00","dateModified":"2013-10-18T18:18:50+00:00","breadcrumb":{"@id":"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/#primaryimage","url":"http:\/\/media.highedwebtech.com.s3.amazonaws.com\/wp-content\/uploads\/2011\/08\/Screen-shot-2011-08-12-at-12.19.39-PM.png","contentUrl":"http:\/\/media.highedwebtech.com.s3.amazonaws.com\/wp-content\/uploads\/2011\/08\/Screen-shot-2011-08-12-at-12.19.39-PM.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.highedwebtech.com\/2011\/08\/12\/improving-the-wordpress-editor-experience-for-users\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.highedwebtech.com\/"},{"@type":"ListItem","position":2,"name":"Improving the WordPress Editor Experience for Users"}]},{"@type":"WebSite","@id":"https:\/\/www.highedwebtech.com\/#website","url":"https:\/\/www.highedwebtech.com\/","name":"HighEdWebTech","description":"Web &amp; Marketing for Education &amp; Nonprofits","publisher":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.highedwebtech.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980","name":"Mike","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/","url":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png","contentUrl":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png","width":595,"height":128,"caption":"Mike"},"logo":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/www.instagram.com\/mikerichwalsky\/","https:\/\/twitter.com\/mrichwalsky"]}]}},"_links":{"self":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts\/1741"}],"collection":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/comments?post=1741"}],"version-history":[{"count":0,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts\/1741\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/media?parent=1741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/categories?post=1741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/tags?post=1741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}