For all its customizability, WordPress made it quite difficult to change appearances right until the end of 2016. Even now, articles all over the web before this date give outdated advice on how to modify WordPress’s CSS, and suggest all kinds of complicated solutions like creating special customizers etc (I’m looking at you WPMU DEV!).
Earlier solutions to changing CSS included the following steps:
- Create a child theme
- Modify style.css manually (and risk breaking your site)
Or even installing one of the many CSS plugins for this purpose. Jetpack was the “go to” plugin since it integrated nicely with existing WordPress screens and is a valuable plugin to have anyway. All that changed on the 6th of December 2016.
Enter WordPress 4.7 “Vaughan”
Just in time for 2017, WordPress released its new “Twenty Seventeen” theme with the introduction of WordPress 4.7. This finally fixed the long-standing problem of WordPress’s problems with customizing CSS and integrated the functionality of Jetpack into WordPress itself.
At one stroke, it got rid of all the previous solutions, making them outdated. Users could now experiment with changing their CSS without needing to create or modify child themes, and best of all, we could test out the changes first before committing to them.
So let’s take a look at how to edit CSS in WordPress easily, and in a few minutes.
Step 1: Open the Theme Customizer
In your WordPress dashboard, go to “Appearance -> Customize” as shown here:
In the resulting options screen, scroll all the way down until you see “Additional CSS” like this:
Different themes may have more or fewer options depending on what features the developers chose to include by default. But now all themes will allow users to change CSS.
Step 2: Preview and Add your CSS
The textbox in the next screen allows you to add your CSS. To make things easier, it has useful features like autocomplete as shown here:
In addition, there’s also a CSS syntax checker which will tell you when you mess stuff up like forgetting to close a comment or inserting a semi-colon at the end of a statement. It also automatically inserts things like closing curly brackets etc, to make the job easier.
As you finish writing complete CSS statements, the style preview on the right-hand side changes in real time to reflect your new CSS.
In the example above, I’ve changed the color of the “Heading 1” <h1> tag to brown. You can see that I haven’t saved my changes yet, but the customizer is showing me what it’ll look like when I finally publish my changes. This ability to preview CSS is a real improvement over the older method of copy-pasting stuff, saving your changes, and then navigating to your site to see the impact!
Finally, when you’re done, click the blue “Publish” button at the top to save your changes and make your CSS go live. That’s it! You’ve modified your CSS without needing to install child themes or plugins.
CSS Changes are Theme Specific
If there’s one drawback to this method, it’s that your changes are specific to the current theme. This means that if you change your theme to something else, your CSS won’t carry over. While I can see why they did this, it’s not always useful. Sometimes HTML elements like tables or links need to be styled the same way regardless of theme.
But it’s not really a problem. To overcome this, you can always switch back to your old theme and copy the CSS rules to paste into the CSS customization area of your new theme. Then remove the ones that are irrelevant to the new theme, and experiment till you’ve got the look exactly right.
With 4.7, WordPress finally brought easy CSS customization and gave millions of site owners a seamless way to modify the appearance of their theme without messing about with theme files!