Adding a custom CSS to WordPress site

Adding a custom CSS

Each theme comes with its own predefined styles but there might be situations when you need to make custom changes to these styles in order to tweak the appearance of your site. Thanks to WordPress flexibility, there are several ways handling custom CSS in your WordPress themes.

Never modify your parent theme’s stylesheet

First of all, never modify the style.css file of your theme, unless it’s a child theme (I am going to talk more about a child theme later in this post). The reason why you should not modify this file is because all your changes will be temporary. They will work just fine on your site but it is a total waste of your valuable time. Let me explain.

From time to time, developers push new updates to the themes to provide you with a solid product. Each update has its own purpose: improve performance, add new functionality, fix critical bugs, etc. You, as a site owner, want to have those new updates, so you click the Update button in your dashboard.

Do you know what happens next? WordPress automatically overrides your theme’s files, including the style.css file. As a result, all your custom changes will be lost. Of course, you can ignore those theme updates but it is actually a very bad idea since some updates can be security-related.

Method #1: Use the theme Customizer

Since WordPress 4.7, we have the option to insert custom styles directly from the Customizer. This is the most simple and easy way to add a custom CSS to your site. In order to add your custom CSS using this method, open the Customizer:

  1. In the Customizer, go to Additional CSS to open the CSS editor.
  2. Locate the text editor field and start adding your custom CSS after the placeholder comment (you can also remove the placeholder comment).
  3. Do not forget to click Save & Publish once you are done with your custom CSS.

Method #2: Use a child theme

First, you need to create a child theme, Once it is created, you can start to modify its style.css file. Customizing the child theme’s stylesheet allows to make custom changes without affecting the parent theme’s style.css file. As a result, you can easily update your original theme without loosing any custom styling.

Note, you do not need to copy all of the CSS from the original theme to modify an element. Here is an example. Let’s say you want to change a background of a button in your child theme:

Original CSS:

.button {
  background: #ed463d;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  border-radius: 4px;
}

Child Theme CSS:

.button {
  background: #3dc4ed;
}

Method #3: Use WordPress plugins

There are a few WordPress plugins available in the Plugin Directory that come with the CSS editor. Here is a short list of plugins that offer Custom CSS functionality:

As you can see, there are a variety of ways to add custom CSS in WordPress. Choose the one that fits your needs the best.

Posted in Tips, WordPress

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.