Add custom CSS in WordPress

Adding a custom CSS

Be able to add a custom CSS in WordPress allows to tweak the appearance of a site via additional styles.

Since WordPress is flexible, there are several ways to set custom CSS.

Wrong way to add custom CSS

Never modify style.css file of your theme, unless it’s a child theme.

All changes, made to the file, will be temporary. They will work just fine but until the next update of the theme.

What does happen when you click Update in a dashboard?

WordPress automatically overrides all the files in the parent theme, including the style.css file. It means that all your custom changes, made to the file, will be lost.

Of course, you can ignore updates. However, it is a very bad idea since some updates can be security-related, while other updates can provide a better user experience for site visitors.

Professionals always try to keep the site secure and up-to-date.

They know that updates are important because each update has its own purpose: improve performance, add new functionality, fix critical bugs, make improvements, etc.

Let’s now review some safe ways to add a custom CSS in WordPress.

Safe ways to add a custom CSS

In WordPress, you can use either a core functionality or 3rd party plugins to add a custom CSS to your site.

These methods allow to keep customizations after the theme update. Yet, experts always recommend to create a backup before updating a site, just in case something goes wrong.

Use Customizer

Since WordPress 4.7, you can to insert custom styles from the Customizer. This is the most simple way to add a custom CSS.

To add a custom CSS using the Customizer:

  1. Navigate to Appearance → Customize to open the Customizer.
  2. In the Customizer, go to Additional CSS to open the CSS editor.
  3. Locate the text editor field and add your custom CSS after the placeholder comment. You can also remove the placeholder comment.
  4. Click Publish once you are done with your custom CSS.

This method does not require to install additional plugins. Thus, you can keep your site lightweight, yet with an ability to use custom styles.

Here is a short video tutorial on how to add a custom CSS via the Customizer in WordPress.

Use child theme

This method is a little bit complex compared to the previous one.

First, create a WordPress child theme. After that, you can start to modify style.css file, located in the child theme.

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 update original theme without loosing custom styles.

Note, you don’t need to copy all of the CSS from the original theme to modify an element.

For example, let’s say you have the following styles (original CSS) for buttons in your parent theme:

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

If you want to modify only a background color of the buttons then your child theme CSS might look like this:

.button {
  background-color: #3dc4ed;
}

In this case, you override only a background color, while keeping the rest the same.

Use plugin

WordPress plugin directory provides several plugins with the CSS editor.

For instance, check out the Simple Custom CSS plugin. The plugin is free and it allows to add custom CSS styles in WordPress, so you can override default styles on your site.

Conclusion

There are a variety of ways to add custom CSS in WordPress. Choose the one that fits your needs the best.

Which method do you prefer and why? Let me know if the comments below. I would like to hear your thoughts on this topic.

Leave a Reply

Your email address will not be published.

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