Custom CSS: Should you use a WordPress Child Theme or the Customizer?

WordPress is a dynamically flexible tool that can be used by both expert web developers as well as novice site owners. If you cannot find a way to style something to your liking, you can add customized styles, also called CSS (Cascading Stylesheets) to modify your site’s look and feel, from layouts and positioning to colors, fonts, and more.

Historically, WordPress users have used child themes to customize the look and feel of a WordPress website. A child theme inherits all of the qualities of a parent theme, however, it does a bit more. As the WordPress Customizer was added, it became easier to add a bit of CSS to effect some of the same things we’ve traditionally done with child themes. 

When do you use a child theme versus just adding CSS to the customizer? Are there cases when a code snippet plugin makes more sense? 

In this blog post, we look at customizing your themes with your own CSS through a variety of ways and discuss when it makes sense to use one method over another. First, though, let’s get clear on some terms. What is the customizer, what is a child theme, and what plugins do these jobs as well? 

What is a child theme?

A child theme is a WordPress theme that inherits all of the qualities of another WordPress theme. The primary theme, the parent theme, can be a commercial theme, one you’ve developed yourself, or any one of the free themes in the WordPress.org theme directory. And yes, you can create a child theme of Kadence. We’ll talk later in this post about whether or not you might not need to,  or cases where you might want to. 

To create a child theme, you’ll create a separate directory under wp-content/themes/ at the same level of the parent theme. Typically it will start with two files, style.css and functions.php, but you can also add many other customizations to a child theme that you would like. We have a guide that talks about creating child themes should you require one. There are a number of plugins that will create a child theme for you, and you can remove these child theme configuration plugins once the child theme is created.

Why do people use child themes?

WordPress users create child themes when they need to make a modification to the parent theme, but they want an easy upgrade process for the parent theme. 

For example, you want to add your Google Analytics tags to your site header, or you want to ensure that all forms, images, or buttons are styled in a certain way, or maybe you’re making customizations to WooCommerce emails that need to be saved in your theme area. 

When you create a child theme, all of your customizations are saved and protected from overwrite when your parent theme requires an update. For security and functional reasons, it’s always important to keep themes and plugins up to date. But you don’t want to have to re-customize your theme every time your theme requires an update, so adding styles to a child theme makes sense. In this way, the parent theme is updated while your child theme remains the same. 

Do you need a child theme? 

In the history of WordPress, adding a child theme has been one of the most important customizations of a new WordPress site. No matter what you’re doing with WordPress, one theme has never been the end-all, be-all. There have historically been two reasons to create a child theme. 

1. To add additional CSS. 
2. To add additional functions. 

Historically,  for the most customizability, a child theme has been the easiest way to do so while preserving the integrity of the parent theme. But a lot of that has changed with the addition of the WordPress Customizer. 

What is the customizer? 

When you’re viewing a WordPress page or post as a logged in user with editing or administrative rights, there is an option on the admin bar for customizing WordPress. When clicking this, it opens up a two-window frame where there is a customizer on the left and the site itself on the right. 

In the customizer, you have access to everything that can be customized for a particular site. There are some general controls that WordPress core adds, but many themes, including Kadence, add some setting options here as well. 

The addition of the customizer provides site owners new ways to set anything, including an option for adding additional CSS. In the past, the only way to apply additional CSS to a WordPress site would be to do so via a child theme. 

Settings from colors, fonts, and even header/footer layouts can all be done with the customizer. 

Kadence’s take on child themes, customizers, and plugins 

Kadence has taken the stance that you should be able to customize your WordPress site through the Customizer as much as possible. There are a variety of settings available to you in the Kadence Customization options, and you can even add your Google Analytics code via the Customizer to your Kadence-themed site using the Kadence Pro version.

And if adding additional functions to your WordPress site, doing so with the Code Snippets plugin has been the easiest way to do so for most users. 

In this way, for most WordPress users, Kadence has simplified the way additional styles and functionality are added to WordPress making managing a WordPress site going forward much easier. 

That being said, not all WordPress sites are the same, not all WordPress users are the same, and the needs of one site and implementation might be different than another. Also, there are myriad methods of getting something done with WordPress. 

Here are some things to consider when adding custom code to your WordPress site. 

When should you use the customizer 

If you’re just adding a few lines of CSS code, the customizer is going to be your best bet. You can easily add a few lines, publish, and see how the CSS takes effect on your WordPress site right within the customizer view. 

For most site owners, the customizer is all that they need. 

For Kadence Pro users, there are event places in the customizer to add header, footer, and body tag scripts, so even if you’re using Google Tag Manager, Google Analytics, or any other service requiring the addition of custom scripts, the Customizer can easily accommodate your customizations. 

When should you use the Code Snippets Plugin

If you’re just adding a few lines of PHP code, the Code Snippets plugin is a great way to add code. You can easily activate and deactivate code using the plugin to test and make sure that the code is functioning properly. 

In the example above, some code was added to a site using Code Snippets to only run in the admin area to make LearnDash and Elementor work better together for course editing. This could have been done with a child theme as well, but for this site owner, Code Snippets was an easier alternative.

Of course, for plugin minimalists who want to run their sites with as few plugins as possible, the Code Snippets plugin might be a big leap. Balancing less plugins with necessary functionality is something that must be done on a case-by-case basis. 

When should you use a child theme

If you’re adding more than a few lines of CSS code or extending site functionality with additional PHP code, a child theme might be the best way to go. The Customizer CSS area is rather small, so adding a lot of CSS there could be overwhelming or confusing to manage. In a case like this, a child theme will be easier. As well, if you’re adding custom functions that are more than what the Code Snippets plugin can easily manage, a child theme can easily do so. 

A child theme allows you to add multiple lines of CSS and manage it with the file system rather than having CSS stored in the database and added to every single page. Via a child theme, CSS is loaded via a style.css file, which can be cached by browsers providing a bit of a performance benefit. If you’re adding quite a bit of custom code or custom functions, a child theme is the best way to go. 

Performance Issues 

When using the customizer’s additional CSS function, the styles added will add your code inline in a  <style> tag at the head of every page. This means that if you have lots of CSS, you’ll increase the size of all your pages individually. Your site visitor’s browser will be downloading your custom styles multiple times.

On the other hand, while adding CSS to a stylesheet file means that the browser needs to download an additional stylesheet, it also means that the browser can cache the file so the additional styles don’t need to be downloaded again for each individual page.

Maintenance issues

Adding CSS to Additional CSS means that you need to use the editor in the Customizer, which is quite narrow, and not well suited to large quantities of CSS. If you add them in a stylesheet though, you can use whichever text editor you like, at a more comfortable size. You can even use the theme editor in wp-admin to edit the CSS File right within the browser. You can find the theme editor under Appearance > Theme File Editor. Make sure you toggle to the correct theme when editing, and we highly recommend you make a backup of your site before making edits to your child theme files.

Editing your theme files

We highly recommend that you use one of these methods listed instead of editing your main parent theme files, whether you’re using Kadence or any other theme. Editing your theme files can not only break your site, but you’ll lose those customizations the next time your theme updates. 

Or worse, when adding code or modifying code within your theme files, you’ll be put in the position of trying to figure out how to keep your customizations while still updating your theme for new features or to fix a security issue. 

Conclusion

We hope this look at child themes has been helpful in understanding when to use a child theme, when not to, and new ways to customize your site for optimal performance when adding customizations. If all of these things seem like too much to consider, you’re probably just fine with the tools in the Customizer at the present moment.