Customizing WordPress with Child Themes

For most WordPress beginners, the first thing they want to do is make their new website look great! The first thing their users will see is the overall design of the website, so of course this has to be a priority. But how do you do that?

When you start to dive into topics like WordPress themes, theme customization, etc., you’ll find no shortage of resources available on the internet. In fact, if you’re a real newbie who isn’t the most code-savvy (like I was when I first started), you’ll probably find yourself overwhelmed very early on.

In this post, I will explain the basics of WordPress themes, and how to tweak them to really customize the look and feel of your website.

What is a WordPress theme?

According to the WordPress Codex (the primary source of WordPress documentation):

WordPress Themes are files that work together to create the design and functionality of a WordPress site. Each Theme may be different, offering many choices for site owners to instantly change their website look.

A few things to note here:

  1. I disagree that WordPress themes are for functionality. Well, at least for the most part. More on this below.
  2. There are tons of themes! TONS. A lot of them are fantastic, but I’d say that there are even more that suck. This can make the process of finding a quality theme for your website a bit of a challenge.

Where can I find themes?

You can find themes all over the internet, both free and paid. For free themes, you’re well suited browsing through the WordPress theme repository. There, you’ll find a very large selection of free themes that go through a thorough review before they are published. Since the WordPress Theme Review team enforces certain requirements, and makes certain recommendations, the themes found in the repository will have a more consistent user-experience from the admin.

For premium themes, there are various vendors, marketplaces, etc. The themes here at Array are some of the most well-designed, reputable themes on the market. You should take a look!

Parent Themes vs. Child Themes

Now let’s dig into this concept of theme lineage. What’s a parent theme? What’s a child theme? How are they different?

Parent Themes

First, let’s talk about parent themes, because that’s where it all starts. A parent theme is a full-blown theme. It contains all of the required files, creates the HTML markup, etc.

A parent theme can be found in the form of a framework, a builder theme, starter theme, or a theme that’s simply ready-to-use out of the box. A framework is often more developer-centric, and provides a “framework” (or API) on which child themes can be based. An example of this type of theme is the Genesis Framework. You will not modify the core framework (parent theme). Instead, all customizations are put into a child theme.

A builder theme is one that has all kinds of options built into it that allow you to do things like create layouts, and other advanced things that would normally require some amount of code.

A starter theme is similar to a framework, but it’s intended to be modified directly. This means that you can take the theme and make it yours. There’s no need to create a child theme.

Finally, there are the themes that are ready-to-go and look great out of the box, without the need for any modifications. The themes here at Array are created to look great right away. If you want to make customizations, though, they’re still considered “parent” themes, and can be customized via child themes.

Each of these types of themes has its advantages and disadvantages. Which one you choose depends on factors such as your level of expertise with code, how quickly you want to design your site, the amount of control you wish to have over the layout, and others.

Child Themes

A child theme requires a parent theme; it cannot be activated without a parent. What a child theme does is inherit its markup, styles, and functionality from the parent. It can then override much of the parent with its own code. Let’s look at a couple examples of what you can do with a child theme.

  1. Probably the most common override for which a child theme is used is the styling. Every WordPress theme requires a style.css file, which contains the CSS styles for the theme, and the required theme header that WordPress uses to determine information about the theme itself (e.g. the theme’s name, author, version, etc.). By activating a child theme and adding a custom stylesheet, you can override the parent theme’s default styles, or even remove them altogether.
  2. Another use may be to customize the header of your website in a way that is different from the parent theme. Perhaps you’d like to change the markup to create a three-column layout instead of your parent theme’s default layout of two columns. Copying the parent’s header.php file to your child theme will allow you to do just that. When that file is added to your child theme, WordPress knows to pull from the child theme instead of the parent.
  3. One more example would be to override a special template function (often referred to as a “template tag”) in your parent theme. For instance, your parent theme may output HTML via an overridable function (also known as a “pluggable” function). Since this function is specific to your theme, you’ll want to keep your override inside a child theme so that it goes away when you switch themes.

Customizing your website with a child theme

Okay, now that we’ve covered the basics of WordPress themes, let’s now get to the good stuff: creating child themes.

Let me first start off by saying that child themes should be used to customize ONLY the design and presentation of your website. To determine if your customization deals with design/presentation, you can ask yourself one simple question: “Do I want this customization to stay if I switch my theme?” If this answer to that question is no, then it should be put in a child theme (the customization is theme-dependent). If you do want it to stay, then it’s likely the customization is theme-independent, and should instead be added using a custom plugin. This will ensure that the customization is preserved, regardless of the theme.

Moving forward, the child theme we will create will contain code that we only want to run for the current theme. If we switch themes in the future, we will no longer need these customizations.

Now let’s look at some code!

Creating a child theme folder

Quick note: This section will assume at lease some basic knowledge of CSS (class names, properties, and values) and PHP (functions, and WordPress hooks).

If you’d like to follow along with the files for this post, you can download them on GitHub.

The first step is to create a directory (this means a folder) to organize your files. This directory should be named with all lowercase letters, and hyphens instead of space. In this post, I’m creating a child theme for the Atomic theme, a gorgeous theme here at Array.

We’ll call this child theme something highly original: Atomic Child. As such, our folder should be named atomic-child.

Next, we need to add at least two files to the folder: style.css, and functions.php.

In style.css, we have to add the following code at the very top, so WordPress can detect our child theme:


/*
	Theme Name: Atomic Child
	Theme URI: https://arraythemes.com/themes/atomic-wordpress-theme/
	Author: Ren Ventura
	Author URI: https://arraythemes.com/
	Description: A child theme to customize the Atomic parent theme from Array Themes
	Version: 1.0.0
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Text Domain: atomic-child
	Domain Path: /languages/
	Template: atomic
*/

WordPress parses (reads) this comment block to obtain theme information, such as the name and author. The only required line is “Theme Name: …” The other lines are helpful, but not entirely necessary if you’re using the theme for your own purposes.

With this comment block in place, you can include your custom CSS right below it. In my child theme, I’m starting out by changing the color of the site-header from a dark, grayish color, to a shade of blue. Here’s my CSS:


.site-header {
	background: #225997;
}

Here, I’m simply setting the background of the element with a class name of site-header to a different color. Pretty simple! You can go as nuts here, writing all the CSS you’d like.

Next up, let’s tackle the functions.php file. In my opinion, this file becomes a crutch for new WordPress users to add custom PHP code because it’s easy to access, and many user will have likely seen it before while working with the style.css. For that matter, too many developers use it as a crutch when telling users where to add that PHP code, so it’s not the users’ fault. The important thing to remember is to not abuse this file. Remember my point above about presentation (themes) vs. functionality (plugins), and you’ll be fine.

In the functions.php file, we need to start out by telling WordPress to load our parent theme’s and child theme’s stylesheets. Knowing that both use the style.css file for their CSS, here’s the code for this:


/**
 * Load the parent and child theme styles
 */
function atomic_child_enqueue_styles() {

	// Parent theme styles
	wp_enqueue_style( 'atomic-style', get_template_directory_uri(). '/style.css' );

	// Child theme styles
	wp_enqueue_style( 'atomic-child-style', get_stylesheet_directory_uri(). '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'atomic_child_enqueue_styles' );

This code starts out by defining a function that is hooked into the wp_enqueue_scripts action hook. This hook allows developers to have WordPress load custom CSS and JavaScript files.

Within the atomic_child_enqueue_styles() function, we call the wp_enqueue_style() function twice. This function will load a CSS stylesheet. We pass it two arguments: a handle (kind of like an identifier), and URL to the source file. The get_template_directory_uri() function returns the URI of the parent theme directory. The get_stylesheet_directory_uri() function returns the URI of the child theme directory. Using both lets us add the stylesheets of both the parent and child themes. By loading the parent theme’s CSS, we can override just the styles we want to customize; the parent theme’s styles cover everything else.

Next up, let’s override a pluggable function via the functions.php file. Again, since this function is specific to our theme, we won’t need it if we switch themes in the future. Therefore, the functions.php of our child theme is the best place for it.

The function we’ll be overriding is the atomic_author_box(). In the Atomic theme, this function output the markup for the author box on single posts. It works great, but let’s say we want to add another link for the author – his or her Twitter URL. For example, the Yoast SEO plugin adds a user-profile field for entering a Twitter username (without the @). Let’s assume we’re using Yoast SEO, and we want to output a link to the author’s Twitter profile using this data.

The first thing to do is copy the function from the parent theme into the functions.php of your child theme. Since the parent theme defines this function only if it has not been defined already, it can be overridden (it’s pluggable). Then, when the parent theme calls the function, it will run the version of the function you’ve defined in your child theme.

The customization I made can be found on lines 37-39 (36-40 including the opening and closing php tags). Here, I’m simply assigning the value of the get_the_author_meta( 'twitter', $author->ID ) to a variable. If that function call evaluates to true (if it has a value), it then outputs a new link for the Twitter URL. If you’re not familiar with the printf() syntax, don’t let it scare you. It’s pretty straightforward, and you can read about it here.

To finish this up this customization, I want to make one more change. Take a look at the new Twitter link.

Author Box Before

Notice how it’s too close to the “Website” link? There’s more space between the “All Posts” and “Website” link. I want to fix this with some simple CSS. If we inspect those first two links, we find this CSS:


.author-profile-links a:first-child {
	margin-right: 12px;
}

This works to add margin to the right, but only for the first link. That is fine if we have only two links, but it won’t work for additional links that need a right margin. Therefore, let’s add this to our child theme’s style.css:


.author-profile-links a:not(:last-child) {
	margin-right: 12px;
}

Author Box After

Perfect! Now, all of the profile links will have a right margin of 12px, except for the last one, which is exactly what we want.

The last thing I want to mention is that you can also override entire template files in your child theme. Template files include things like header.php, footer.php, single.php, etc. Since functions.php is not a template file, you cannot override the parent’s functions.php.

To override a template file, you just copy the entire file to your child theme. For example, to override your parent theme’s footer.php file, copy that exact file to your child theme, and make any changes you wish.

Go Make Some Children

Now that you have an understanding of the parent-child relationship in WordPress themes, and how to create and work with child themes, you can get busy creating your own child themes.

If you have any questions, I’d be happy to clarify. Don’t hesitate to post your questions and thoughts in the comments!

Published by Ren Ventura

Hey, I'm Ren. I'm a web and software developer from Cleveland, Ohio. I build cool things using WordPress, and I enjoy teaching others how to do the same. When I'm not writing code, I love to cook and eat, especially BBQ!

2 Comments

  1. ( ( GO MAKE SOME CHILDREN ) )
    Hahaha, good one!

    Always love what you’ve guys done on ArrayThemes 😉

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match