Any good WordPress developer will tell you : always use a child theme. Sure you’ll get instances where you need to create a custom design from a starter theme such as Underscores, but even then – why not just create a child theme?
What exactly is a child theme?
In WordPress, a child theme is an independent implementation of the parent theme. Wait a minute – what does that even mean?
- A child theme uses the core css and functions from the parent theme
- The new child theme loads it’s functions before the core functions from the parent.
- “Most” parent themes offer pluggable functions. ( This means you can create your function based on theirs and override them)
- By nature of being a “child” the theme core files, loop functions and additional files you implement will override the core files – if any
All of this is done, without touching one bit of the parent file, making it upgrade proof (see caution notes).
Child themes are extensions of your parent theme
Imagine if you will, your playlist on Spotify. Not only does the playlist contain your songs, but Spotify itself contains settings that you love and generally leave as they are. However, your child Ben comes along and adds his playlist, and changes the Spotify master settings. But when you log back into your account – you notice your settings are right as you left them. Much in the same way – WordPress as a whole understands that your master theme contains your master settings and your child theme fine tunes those settings.
To better understand what a child theme is – you need to understand the parent / child relationship when it comes to theme inheritance.
The CSS in your child theme plays a vital role. While your master theme is busy loading up all your CSS resets and core values, here is where you can fine them. Adding your CSS directly via the child theme CSS is not only the preferred approach to adding custom CSS – it’s probably the cleanest and fastest. (relative to site speed)
Loading your child theme CSS properly
I see many problems with child theme CSS where developers are forced to implement !important overrides. Personally, I use them sparingly and concede : when I am in a hurry. But the point of a child theme is to make your life easier and part of the perk should be to not add any *huge* additional overhead in load time.
Most of the time, the !important declaration can be avoided if your child theme CSS is loaded properly and in order. The reason the declaration is often needed is because the parent theme’s CSS (or plugin CSS) get’s loaded after your child theme CSS.
How do you avoid this?
I’ve displayed the code below inline (instead of PHP format) to showcase how the second wp_enqueue_style is requiring that “your-parent-style” be loaded as a prerequisite (via array) :
add_action( 'wp_enqueue_scripts', 'my_theme_styles' );
function my_theme_styles() {
wp_enqueue_style( 'your-parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'your-child-style', get_stylesheet_directory_uri() . '/style.css', array('your-parent-style'));
}
This code of course goes into your child theme functions.
Careful with sites without a child theme
This brings me to the point of the article : be extremely careful when working with sites that don’t use child themes.
In my line of work, I typically explain to clients that may need site repair or simple site modifications – that creating a child theme for your site is a prerequisite, and I’ll include that for extra cost. This helps build trust – because it shows your clients that you really know what you are doing and that you’re taking great precaution to ensure their site stays healthy.
What are your thoughts?
