How To Easily Add Custom CSS

Since WordPress Version 4.7, you can use the WordPress Customizer to easily add custom CSS to your WordPress theme. Premium WordPress themes come packaged with tons of built-in features so you can make several changes to your blog without ever having to enter a single line of code. However, even if with all of these features, you still may want to make adjustments so your website matches your unique brand and style.

This blog post will detail how to add custom CSS to your WordPress website, and why this method is better than the other methods available for customizing CSS.

Add Custom CSS to WordPress

To access the WordPress Customizer, go to Appearance > Customize. Find the section titled “Additional CSS” and click on the section. The screenshot below shows the Additional CSS section opened to edit our Juliet theme.

As soon as you add custom CSS to the panel, the screen will display a preview of what the CSS would look like if applied to your website. Here is an example of adding custom CSS to the Juliet theme. Compared to the screenshot above, the top bar has turned pink because of the CSS entered here.

Please note that these changes are not live on your website until you click “Publish” or  “Save & Publish” at the top of the screen. Additionally, any changes made to the “Additional CSS” section are only available with the current, active theme on your website. If you decide to use a different theme (including a child theme), you will need to copy and add custom CSS to the same section of the WordPress Customizer after activating the new theme.

Benefits of Using the WordPress Customizer

Although there are many ways to add custom CSS to your WordPress website, this is the easiest and most effective way to do so. Here are a few reasons why this method is better than others:

  • You do not need to modify the parent theme, and you can easily update the parent theme without losing your changes in the future.
  • You no longer need to install a child theme just to customize CSS.
  • If you’re not sure about CSS, this allows you to preview the CSS changes! You can easily see if the code you added is valid and makes your preferred changes without ever impacting your live website.
  • You can add responsive changes here as well. Therefore, all of your custom CSS changes will be in one location instead of multiple theme files.