Add custom CSS in WordPress

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

WordPress offers flexibility and therefore provides multiple options for customizing a website’s CSS.

Wrong way to add custom CSS

Don’t change the style.css file unless it’s in a child theme. The changes will only work until the theme is updated again.

In WordPress, all files in the parent theme, including style.css, are susceptible to being overwritten during automatic updates, resulting in the loss of any custom modifications made to the file.

While it may be tempting to skip updates, it’s not recommended as some updates provide important security upgrades and others enhance the user experience for visitors to your website.

Professionals always keep the website secure and up-to-date.

They understand the significance of updates, as each one serves a purpose such as improving performance, introducing new features, fixing critical issues, and making overall enhancements.

Let’s review safe custom CSS methods in WordPress.

Safe ways to add a custom CSS

WordPress offers the option of using core functionality or third-party plugins to add custom CSS to your site.

These methods ensure your customizations persist after a theme update. However, experts suggest creating a backup before updating a site to avoid any potential issues.

Use Customizer

As of WordPress 4.7, custom styles can be easily added through the Customizer, making it the simplest method for adding custom CSS to a website.

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 eliminates the need for additional plugins, allowing you to keep a website lightweight while still having the 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.

To start, create a WordPress child theme. Then, you can modify the style.css file located in the child theme.

Customizing the stylesheet in the child theme enables you to make personalized changes without impacting the parent theme’s style.css file.

This way, you can update the original theme without losing your custom styles, even after update.

It’s important to note that you do not have to copy all of the CSS from the original theme to modify a single 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 has various plugins with CSS editors.

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 several options for adding custom CSS in WordPress, choose the one that best suits your needs.

Which method do you prefer and why? Share your thoughts in the comments below, I’m eager to hear your perspective on this topic.