2 Simple Ways to Add Custom CSS To Your WordPress Website

Steve Allen

Most WordPress themes these days come with many options for you to change the design and layout of your website. They do this by adding an options panel in the WordPress admin, usually under Theme Options.

This makes is super easy to customise your theme to match the look and feel of your brand.

Unfortunetly, not every theme gives you the ability to adjust every aspect of the design which is where adding custom CSS to your WordPress website gives you the flexabilty to do so.

In this post, we’ll show you two ways to add custom CSS to any WordPress theme without having to edit the theme itself.

The Theme Customizer: WordPress Custom CSS option 1

When WordPress update 4.7 was released, a new option was added to the theme customizer so users could insert their own custom CSS. This made tweaking the themes design really simple and show you the changes made live on the front-end.

To get to this option, navigate to “Appearance” and then “Customize” in the WordPress admin.

wordpress custom css step 1

 

A new window/tab will open where you will be presented with the customizer interface and theme options, including where you can add your custom CSS.

Go ahead and click on “Additional CSS

wordpress custom css step 2

 

 

This is where you add your CSS to further customize your theme.

wordpress custom css step 3

 

Once you’re done adding your custom CSS, click “Publish“.

NOTE: If this is the option you decide to take and then you want to change themes in the future, make sure you copy the CSS you use so you can it on your new theme as this option only saves the CSS for the currently active theme.

Simple Custom CSS Plugin: WordPress Custom CSS option 2

If you’re using an older version of WordPress (before 4.7) and don’t want to update (we’re not sure why you wouldn’t want to) or you’re forever changing themes then your other option is to use a plugin to add your custom CSS.

Goto “Plugins” and “Add New” in the WordPress admin and type “simple custom css” or you can download Simple Custom CSS from the WordPress plugin directory.

custom css wp plugin step 1

 

Install and activate the plugin and then navigate to “Appearance” >> “Custom CSS“.

custom css wp plugin step 2

 

You will then be presented with the plugin screen where you can enter your custom CSS code to customize your theme design.

custom css wp plugin step 3

 

Save your CSS code by clicking the Update Custom CSS button.

Using the plugin option is handy if you want to change your theme as the settings are saved in the plugin, so you won’t lose your changes. Note that even though the CSS code is saved in the plugin, you may find that your themes CSS selectors slightly differ and will need to be adjusted accordly to your new theme.

Leave a Comment