How to customize CSS with the new WordPress 4.7 feature

The appearance of your website is something you should take care of all the time. Not only you will enjoy it much better if you have a visually appealing website, but so will your visitors who might decide to stay longer on your site just because it looks good. Additionally, by installing new themes and plugins, parts of your website will need small modifications, and that’s why you need to customize CSS from time to time.

Even if you are not a designer, there are times when you can just make a small change in the CSS (the color of your menu items, the size of headings or a smaller margin, for example) and create a big difference for your blog. Before the new WordPress 4.7 update, people used to handle these changes differently. Some people have been editing the CSS through a theme customizer (if a theme had one), other were using always-popular Jetpack, while the others were installing 3rd party plugins for CSS customization or they were building child themes for modifications on a larger scale.

All of that is going to history now. With WordPress 4.7, you get a new way of editing CSS through the new add-on to the Customizer. It’s called Additional CSS, and it will change the lives of everyday WordPress users.

While some users might think that the new feature is rather trivial, those who tend to work with custom CSS will know to appreciate the new feature. It is very easy to get to Additional CSS, it works flawlessly and it even works with a live preview!

How does it work?

Additional CSS feature in WordPress

Instead of working with 3rd party plugins and worrying about the compatibility issues, or instead of manually fiddling with the style.css file which isn’t recommended, you now get to change CSS in just a several minutes. Whether you need to change one color or you need to make dozens of modifications, Additional CSS feature makes it easy for everyone.

The new WordPress feature stores the custom CSS in a Custom Post Type (you just don’t get to see the new type listed in the User Interface). Each theme you have will get a new post where all the files are stored. By using this technique, you get an easy way of customizing the CSS without worrying about losing the changes with new theme updates. Even after you update theme files, the custom post type created by Additional CSS feature will stay intact and it will be used to supplement and override the code for that particular theme. Awesome, isn’t it?

How to customize CSS

To make your first CSS change with the new feature, here’s what to do:

  1. Navigate to Appearance -> Customize
  2. Scroll all the way down and choose Additional CSS
  3. Write custom CSS code and enjoy the changes in the live preview
  4. Click the Save & Publish button on top of the Customizer

That’s all! You can now play around with the code, inspect elements of your site and make direct CSS changes even without saving them. Once you decide that you like the new style, you can save the changes and they will become a part of your website. You can learn more about the whole idea behind the new feature and see some technical details.

How do you like the new WordPress feature? Do you tend to customize CSS code a lot? We are sure this is just the starting point after which the new Additional CSS editor will just keep on getting better and better.

Start Blog Book


This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

5 thoughts on “How to customize CSS with the new WordPress 4.7 feature

  1. This is the method I always use but apparently a lot of people make child themes and then edit the style.css. I make a child theme, and then I use the >additional CSS option. I don’t even remember where I learned it, but I was taught that it was best practice. I never touch the style.css unless I am making media queries, or if I find a bug in the original style.css. Am I being overcautious or am I doing it the way it’s supposed to be done?
    Also, when I migrate or clone a site my edits stay with it, but are somehow incorporated into the style.css or somewhere else. They don’t get lost, so where do they end up?

    • The additional styles that you add through the new feature get stored into a custom post type, that’s why they aren’t affected by themes updates or migrations. It is a good way of adding small CSS changes, but if you’re about to make larger style changes, creating a child theme is still the best way to add custom CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *