Themes determine the layout and appearance of WordPress websites. Regardless of which theme you go with, you might need to customize it a bit to suit your specific needs.

One way to customize your theme is to use  Cascading Style Sheets (CSS). This popular style sheet language will allow you to change nearly any element of your theme. You can add custom CSS to your theme to specify background colors, change font sizes, create spacing between content, reposition menus, and more. Custom CSS, though, may be deleted the next time you update your theme.

Why Theme Updates Break Custom CSS

All themes have a style.css file. Available in the theme folder, it contains the CSS. When you update your theme, you’ll download a new, different version of it with which to replace the existing version.

Updating your theme will delete the existing style.css file and replace it with a fresh, new style.css file. The new style.css file won’t contain any custom CSS that you might have added previously. You can always add back the deleted custom CSS, but doing so after each theme update can be tedious.

Add to the Customizer

You can retain custom CSS when updating your theme by adding it to the customizer. The customizer is a theme customization tool in the WordPress dashboard. It features an “Additional CSS” field. Rather than adding custom CSS directly to your theme’s style.css, you can add it to this field.

The “Additional CSS” field was introduced in version 4.7 of WordPress to prevent custom CSS from being deleted during theme updates. It doesn’t affect the style.css file, nor does it affect any other files in the theme folder. When you add custom CSS to the customizer via this field, it will be stored in your website’s database. You can then update your theme while keeping the custom CSS.

To access the customizer, click “Appearance” in the WordPress dashboard and choose “Customize.” The “Additional CSS” tab is near the bottom. Clicking this tab will display a field where you can enter custom CSS. Updating your theme will only replace the files in the theme folder. It won’t replace or otherwise affect your website’s database, so the custom CSS will be preserved.

Adding custom CSS to the customizer allows you to preview it. The customizer has a built-in preview feature for all changes. Whether you’re setting new widgets or adding custom CSS, the customizer will reveal what your website will look like. You can then choose to proceed with the customization by clicking “Publish.” If your website doesn’t look right, you can change the customization options before making it live. Regardless, the customizer will show a preview of your website with the custom CSS.

Create a Child Theme

Another solution is to create a child theme. Child themes are essentially copies of other themes that you can customize without fear of losing your changes. They aren’t complete copies. Rather, most child themes consist of just a few basic files, including a style.css file and a functions.php file.

Child themes are designed to inherit the properties of a parent theme. You can use your theme as a parent theme. The child theme will have its own folder, which will contain its own style.css file and functions.php file. The child theme, however, won’t contain an index.php file, a page.php file, a single.php file, or other standard theme files. It will leverage the parent theme for these properties.

Because child themes have their own style.css file, they support custom CSS. More importantly, child themes retain all of their custom CSS when their parent themes are updated. Updating the parent theme won’t affect the child theme’s style.css file. For instructions on how to create a child theme, visit developer.wordpress.org/themes/advanced-topics/child-theme. Alternatively, some premium themes come with a child theme.

For just a few lines of custom CSS, you may want to add it to the customizer. For larger amounts of custom CSS, creating a child theme is probably worth the effort. A child theme will provide you with a separate style.css file that you can customize.

You can even work on the child theme’s style.css file offline, and because it’s a separate file, you’ll have plenty of space for custom CSS. Adding custom CSS to the customizer will restrict you to a small field that’s only accessible online. The customizer offers the benefit of a preview mode, whereas a child theme offers the benefit of a separate style.css file.

Use a Custom CSS Plugin

You can use a custom CSS plugin. The Simple Custom CSS plugin, for instance, does exactly what it sounds like: It allows you to easily add custom CSS to your theme. Custom CSS added to the plugin will override your theme’s own CSS.

Once you’ve activated the Simple Custom CSS plugin, you should see a new “Custom CSS” tab under “Appearance” in the WordPress dashboard. This is where you can add custom CSS. When you update your theme, the custom CSS will be preserved. Updating your theme will replace the theme’s style.css file, but the plugin will override the new style.css file with your custom CSS.

There’s also the Simple Custom CSS and JS plugin, which supports both custom CSS and custom JavaScript. You can use it to create custom CSS that overrides your theme’s own CSS. If you don’t want to mess with creating a child theme, you may want to use a custom CSS plugin. Downloading a custom CSS plugin is an easy way to preserve custom CSS during theme updates.

Conclusion

It’s frustrating when you lose custom CSS after updating a theme. Even if you saved the custom CSS locally to your computer, you’ll have to go back and add it. You can retain your theme’s custom CSS by using the customizer in the WordPress dashboard, creating a child theme or using a custom CSS plugin.