What’s in a WordPress Theme?

WordPress themes help you control the design and functionality of your site. Today’s theme ecosystem is evolving to fit new patterns with full site editing, but every WordPress theme has only two required files: index.php and style.css. The WordPress team describes index.php as “the main template file” and style.css as “the main style file”. Basically, design and functionality.

What about Child Themes?

As a developer, you can certainly create WordPress themes for your clients to build incredible online experiences. One major downside to this is that you are on the hook for updating those themes for security patches, code conflicts, and weird bugs that crop up as browsers change over time.

Living Life Dangerously

Now, you could technically modify the parent theme with your changes, but you’d lose your modifications when the theme upgrades to its latest version. And, certainly, you could remove the updating component in the parent theme altogether, but then you’ll run into a myriad of issues with security and code conflicts as plugins and the WordPress core files continue to update.

I’d much prefer to let a dedicated team handle theme maintenance and avoid the issues just outlined. So how can we still develop custom designs and functionality without being responsible for theme upgrades in the future? Child themes! Child themes allow you to choose which pieces of a parent theme to modify and leave the rest up to the original theme developer.

How to Create a Standard Child Theme

Like parent themes, most child themes only need index.php and style.css to get up and running. Every parent theme is different, so you should definitely check the theme developer’s documentation for best practices in creating a child theme that pairs well with their parent theme.

Either way, I highly recommend you review the official WordPress child theme documentation to understand what’s happening behind the scenes.

My Process for Creating Child Themes

My favorite parent theme so far is Divi. It’s well documented, extremely flexible, provides unlimited site licenses, and currently has a one-time payment lifetime access tier. It’s my go-to for client work involving WordPress development.

Jason Champagne wrote a great post back in 2018 called Ultimate Guide to Creating a Divi Child Theme. I definitely recommend you check it out for an additional perspective on child theme development.

How to Create a Divi Child Theme

Creating a Divi child theme is incredibly simple. Use the steps below!

Initialize the Parent Theme

Make sure that you’ve spun up your local development environment and created your WordPress site itself. (Don’t worry, I have a post that shows you how to do this in 10 minutes.)
Purchase your Divi license and download the parent theme from your account.
In your WordPress dashboard, go to Appearance > Themes, press the Add New button at the top, and then select Upload Theme. Drag the .zip file you downloaded into the upload area in WordPress.

Structure the Child Theme

In Local, underneath the title of your site, find the path of your site and open that folder on your computer. Then navigate into app > public > wp-content > themes. This is the directory that all your WordPress themes live in!
In the themes folder create a new directory called divi-child.
Using your favorite text editor (mine is VS Code), create a functions.php file and a style.css file inside of divi-child.

Configure Your Theme Files

Add the following starter code to your functions.php file:

++>functions.php<++

<?php
function groovy_enqueue_scripts() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

add_action( 'wp_enqueue_scripts', 'groovy_enqueue_scripts' );

A few notes about the code block above:

The name of the function groovy_enqueue_scripts() can be anything you’d like. I normally append the client name (in this case, groovy) with enqueue_scripts to avoid name conflicts.
wp_enqueue_style is a WordPress function that loads a CSS stylesheet. In our case, we are loading the parent theme stylesheet since Divi “automagically” loads the child theme stylesheet for us. You can reference the WordPress documentation for this function for a full explanation of the parameters it takes and what it can do.
wp_enqueue_scripts is a WordPress hook that loads (enqueues) the stylesheet called within the groovy_enqueue_scripts() function. You can reference the WordPress documentation for this hook to see how it works.
As much as possible, I try to stick to WordPress’s PHP syntax conventions to make my code easy to read.

Alright, one step down, one more to go! Now add the following starter code to your style.css file:

++>style.css<++

/*
 Theme Name:     Groovy
 Theme URI:      https://example.com/
 Description:    Customizations for the Groovy website.
 Author:         Sunjay Armstead
 Author URI:     https://example.com/
 Template:       Divi
 Version:        0.1.0
*/

A few notes about the code above:

You’ll notice that this starter code is one large CSS comment. That’s because, in WordPress land, the style.css file provides the metadata for themes and plugins. You can add even more details using the WordPress docs, but the lines above will work for most projects.
Theme Name can be anything you want! I normally name this after the client’s organization name.
Theme URI can be anything you want! I normally put a link to the agency I am working for.
Description can be anything you want!
Author can be anything you want! I normally put either myself or the agency I am working for.
Author URI can be anything you want! I normally put a link to the agency I am working for.
Template is mandatory. This should be set to the name of the parent directory, which in our case is Divi. That allows WordPress to know the relationship between the parent and child themes.
Version is important. WordPress can use this number for caching and it allows you to stay organized during development. I use semantic versioning to stay organized and typically start with 0.1.0. Read John Hughes’s article on semantic versioning for more details.

Activate the Theme

Your child theme is now your’s to nurse to adulthood. You can enqueue custom Javascript code, add a thumbnail, edit template files, and a whole lot more. For now, activate the child theme in your WordPress dashboard by going to Appearance > Themes.

Where to Next

High-five! You just reached a major milestone in your journey with WordPress development. You made a child theme! Now the power of WordPress is in your finger tips and you, my friend, are a superhero. Celebrate this! You did it!

In our next tutorials, we will expand on your newfound child theme powers. I’ll show you how to use version control like a ninja. I’ll also show you how to add features to your WordPress sites that boost your professionalism and make your clients swoon.

Until then, stay persistent, eat your vegetables, and I’ll see you in the next article.