Setting up a Child Theme the right way

Child Theme Setup

photo found on Stocksnap

Really? Is WP TIPS joining the child theme circus too?

Yes, most certainly, and the reasons are this:

  1. there are two ways of setting up a child theme, but there is only one right way
  2. in their quest for information, hopefully this post can come up in certain search results and help beginners on their way

Starting with the latter, it is just incredible to see how many people just don’t bother making a child theme. I’m pretty active on LinkedIn WordPress groups and on a daily basis there are threads of people having trouble with their theme and haven’t bothered to make a child theme.

Also through my work I see different sites each week and hardly ever has it been done right. On the one hand I understand why, but at the same time it also surprises me.
How come that people who are new to WordPress are perfectly capable to read the 5-minute-install and to select a horrendous theme from Themeforest, but are seemingly incapable of installing that theme properly?
Actually nowadays there are many themes (on Themeforest) that come with a child theme pre setup, but instead of 3 minutes extra reading the WordPress beginner just installs the lot (often including PSD files) and starts adding content (and running into trouble).

And it is not even exclusively the WordPress beginners who are en masse doing_it_wrong();! The saddest part is that I can show you plenty of developers who simply cannot be bothered to do it either, sheer ignorance is most likely the reason or pure laziness. They happily set up their clients for disaster, it’s incredibly sad!

Could WordPress.org do something about this? I think yes, and I also think it’s quite late in the game. Maybe we should start thinking about an auto-child-theme-installer or something like that. I don’t have the solution, that is obvious, hence my little post/rant here on WP TIPS, even if it is only a drop in the vast sea…

How to do it right?

Which (fortunately) brings me to the right way of setting up your WordPress Child Theme.

In the not too distant past everybody (myself included) who bothered making child themes imported the parent stylesheet right at the top of the stylesheet of the child theme:

@import url("../parent-theme/style.css");

Even the Codex still shows this as the way to do it!

So what’s wrong with this then? Well, nothing really, but as with almost everything WordPress it can be done in a different way too and that way simply is much better!

Actually the right way of setting up a Child Theme is beneficial to the loading time of your site, but for most of us the difference will be too tiny to notice. If you want to know the fine details, Konstantin Kovshenin explains it.

What I think is particularly useful with doing it right, is that the functions.php file immediately is used and the user learns to properly enqueue a stylesheet right from the beginning. Can’t say that I had that pleasure when I started…

So without further ado, I present to you the only correct way to set up your WordPress Child Theme:

/**
 * The right way to make a child theme is to
 * enqueue the stylesheet of the parent in the
 * functions file of the child.
 *
 * used in wpti.ps/?p=512
 */
function so_enqueue_parent_theme_css() {
	wp_enqueue_style( 'parent-theme', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'so_enqueue_parent_theme_css' );
/*
 Theme Name:   Name Child Theme
 Theme URI:    http://example.com/name-child-theme/
 Description:  Description about this Child Theme
 Author:       your name
 Author URI:   http://yoursite.com
 Template:     parent-theme-slug
 Version:      optional
 Tags:         optional
 Text Domain:  name-child-theme
*/

/* =Theme customization starts here
-------------------------------------------------------------- */

Taking questions / comments now

2 Comments

  1. Hi Author

    Thank you for taking the time to contribute and advise.

    Ok, I am one of those “beginners you refer to … and I am keen to learn/apply your “correct” way of setting up a child theme.
    However, I am a “beginner” and those two boxes of code above means practically nothing to me and what/how to do. Maybe you would consider a follow-up post doing a step-by-step for “beginners” (and possibly an explanation of exactly why a child theme is SO important in your view.)

    Thanks & Regards
    Henk

    1. Hi Henk,

      Thanks for your comment.

      If you have no clue what “those two boxes of code” mean, then you should probably not have to worry about anything, because the chances that you are actually going to change the theme are zero to begin with ;)

      On the other hand, if you want to learn, then you should dive in and do it right. I suggest the following:

      1) read the Codex article I referred to above
      2) make the child theme folder per the instructions
      3) copy the style.css above and adjust it to reflect your child theme
      4) copy the functions.php above and replace parent-theme with the name (slug) of your parent theme
      5) upload the child theme folder with the 2 new files to your wp-content/themes folder
      6) activate your child theme

      Here on WP TIPS we don’t cater to “green-as-grass” beginners; a good website which does, could be WP Beginner.

Comments are closed.