{"id":153592,"date":"2016-04-01T11:00:40","date_gmt":"2016-04-01T15:00:40","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=153592"},"modified":"2022-04-13T23:50:24","modified_gmt":"2022-04-13T23:50:24","slug":"live-editing-css","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/live-editing-css\/","title":{"rendered":"Free CSS Plugins for Live Editing Your WordPress Site"},"content":{"rendered":"<p>Fine-tuning how your WordPress site looks on the front-end is faster and easier \u2013 not to mention more satisfying \u2013 when you can see your changes live as you make them. And the best way to live edit CSS is, of course, with a plugin.<\/p>\n<p>Custom CSS plugins are plentiful in the WordPress Plugin Directory. If you&#8217;re looking for a plugin that will generate a custom CSS stylesheet, you have lots of options to choose from. But while there are lots of plugins you can use to create a custom CSS file, there are a lot fewer options if you&#8217;re looking for one that pairs a custom stylesheet with a live preview feature.<\/p>\n<p>So after scouring the directory for custom CSS plugins with a live preview feature, I tracked down and tested several of the best. Best of all, they&#8217;re all free!<\/p>\n<p>Continue reading, or jump ahead using these links:<\/p>\n<ul>\n<li><a href=\"#customizer-custom-css\">Customizer Custom CSS<\/a><\/li>\n<li><a href=\"#modular-custom-css\">Modular Custom CSS<\/a><\/li>\n<li><a href=\"#site-origin-css\">SiteOrigin CSS<\/a><\/li>\n<\/ul>\n<h2 id=\"customizer-custom-css\">Customizer Custom CSS<\/h2>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-208720\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/04\/customizer-1.png\" alt=\"Customizer header.\" width=\"600\" height=\"192\" \/><\/div>\n<\/div>\n<p>The <a href=\"https:\/\/wordpress.org\/plugins\/customizer-custom-css\/\" target=\"_blank\">Customizer Custom CSS<\/a> plugin from independent plugin developer <a href=\"http:\/\/bijayyadav.com.np\/\" rel=\"noopener\" target=\"_blank\">Bijay Yadav<\/a>\u00a0wins the prize for\u00a0<em>simplest CSS live-edit plugin<\/em>. Once you install the plugin and activate it, find your way to\u00a0<strong>Appearance &gt; Customize<\/strong>\u00a0and you will see a\u00a0<strong>Custom CSS<\/strong>\u00a0tab has been added to the list of Customizer menu items. Open the menu item and you will find a single text box into which CSS rules can be written.<\/p>\n<p>As you write rules into the text box, the Customizer preview will update automatically to reflect the changes. While automatic presets aren\u2019t built into the plugin to target smaller device, the plugin will accept media queries, so you can write styles that target specific viewport breakpoints.<\/p>\n<p><strong>Summary:\u00a0<\/strong>Dead-simple and lightweight. Use it if you value simplicity over features.<\/p>\n<h2 id=\"modular-custom-css\" class=\"wpdui-tutorial-list__item__title\">Modular Custom CSS<\/h2>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-208721\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/04\/modular-custom-css.png\" alt=\"Modular Custom CSS header.\" width=\"600\" height=\"126\" \/><\/div>\n<\/div>\n<p>Do you change WordPress themes frequently? If so, the <a href=\"https:\/\/wordpress.org\/plugins\/modular-custom-css\/\" target=\"_blank\">Modular Custom CSS<\/a> is the CSS editing plugin you\u2019ve been dreaming of.<\/p>\n<p>Install it, activate it, and find it by going to\u00a0<strong>Appearance &gt; Customize<\/strong>. Then select the\u00a0<strong>Custom CSS<\/strong>\u00a0tab, which you\u2019ll find at the bottom of the Customizer menu.<\/p>\n<p>With this plugin, you can write CSS rules that are either theme-specific or theme-agnostic:<\/p>\n<ul>\n<li><em>Theme-specific<\/em>\u00a0rules will only be applied to the active theme. Switch themes and you\u2019re given a new blank theme-specific slate to work with, switch back and the theme-specific rules you had written previously will be re-applied.<\/li>\n<li><em>Theme-agnostic<\/em>\u00a0rules will be applied regardless of which theme is active. Switch themes and theme-agnostic rules will continue to be applied.<\/li>\n<\/ul>\n<p>You can find out more about the plugin on the\u00a0<a href=\"http:\/\/celloexpressions.com\/plugins\/modular-custom-css\" rel=\"noopener\" target=\"_blank\">Cello Expressions<\/a>\u00a0site.<\/p>\n<p><strong>Summary:\u00a0<\/strong>Easy to use, with a theme-switching feature unmatched by the other candidates on this list. Use it if you switch themes frequently and want to be able to write theme-specific and theme-agnostic CSS rules.<\/p>\n<h2 id=\"site-origin-css\" class=\"wpdui-tutorial-list__item__title\">SiteOrigin CSS<\/h2>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-208722\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/04\/SiteOrigin.png\" alt=\"SiteOrgin header.\" width=\"600\" height=\"182\" \/><\/div>\n<\/div>\n<p>By far the most feature-packed plugin on this list,\u00a0<a href=\"https:\/\/siteorigin.com\/css\/\" rel=\"noopener\" target=\"_blank\">SiteOrigin CSS<\/a>\u00a0is surprisingly powerful considering it\u2019s free.<\/p>\n<p>This plugin is the only one on this list that doesn\u2019t use the\u00a0<a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/customizer-api\/\" rel=\"noopener\" target=\"_blank\">Customizer<\/a>\u00a0(<strong>Appearance &gt; Customize<\/strong>) to power a live preview feature. After installing and activating the plugin, go to\u00a0<strong>Appearance &gt; Custom CSS<\/strong>\u00a0to access the plugin\u2019s stylesheet. On that page, you will see a text editor that does not include a live preview.<\/p>\n<p>To access the live preview, click on either of the two buttons that appear on the right, just above the text box. The button with the eye icon will open up an easy-to-use visual CSS editor that non-technical designers will appreciate. The icon with the expanding arrows is a stripped-down version of the visual editor that requires you to manually write CSS rules.<\/p>\n<p>The visual CSS editor provides a set of controls that make it easy to adjust a wide variety of text, decoration, and layout options without needing to know very much CSS syntax. Of all the CSS editors on this list, the visual editor mode of the SiteOrigin CSS plugin is the most user-friendly for non-technical WordPress users.<\/p>\n<p>To edit an item using the visual CSS editor, start by clicking on the element you want to edit. Then adjust the element attributes using the available text, decoration, and layout options. Changes are previewed as you make them.<\/p>\n<p>If you prefer to edit CSS manually, select the expanding arrows icon rather than the eye icon from the\u00a0<strong>Appearance &gt; Custom CSS<\/strong>\u00a0page.<\/p>\n<p>This preview mode works the same as the visual editor mode with the exception that CSS rules must be manually typed into the text area on the left-hand side of the browser.<\/p>\n<p>This plugin also maintains a history of CSS revisions so that you can revert to a previous version of saved CSS rules if you ever need to.<\/p>\n<p>While there are a lot of reasons to like this plugin, there are two areas which could be cited as\u00a0<em>needs improvement<\/em>.<\/p>\n<ul>\n<li>Not all of the available options in the visual CSS editor are very intuitive. For example, the\u00a0<strong>Font Family<\/strong>\u00a0and\u00a0<strong>Text Shadow<\/strong>\u00a0options are just empty text boxes. If you know CSS syntax, these aren\u2019t too difficult to figure out. However, if you don\u2019t know CSS syntax, figuring these options out may pose a challenge.<\/li>\n<li>There is no option to write CSS rules to target devices of different sizes like the Advanced CSS Editor. This may seem like splitting hairs, but considering how easy-to-use this plugin is, it\u2019s worth pointing out that you will have to manually write media queries to target viewports of different sizes \u2013 a task many non-technical users would prefer to avoid.<\/li>\n<\/ul>\n<p><strong>Summary:\u00a0<\/strong>Full-featured and powerful. Use it if you need to make a lot of changes and want a plugin that makes it easy to write custom CSS without having to actually write any CSS.<\/p>\n<h2>And the Best Live Editing Plugin Is&#8230;<\/h2>\n<p>I can&#8217;t pick a favorite. Each of these plugins will appeal to a different type of designer and will be best suited to tackle specific CSS coding tasks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Fine-tune the styling of your WordPress website with live editing. This roundup of free plugins highlights five of the best custom CSS plugins that include a built-in live preview of your changes as you type them.<\/p>\n","protected":false},"author":388460,"featured_media":153651,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[4],"tags":[1044,10029,9976],"tutorials_categories":[],"class_list":["post-153592","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","tag-css","tag-free-plugins","tag-plugins-3"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/153592","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/388460"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=153592"}],"version-history":[{"count":27,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/153592\/revisions"}],"predecessor-version":[{"id":208986,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/153592\/revisions\/208986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/153651"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=153592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=153592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=153592"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=153592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}