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!

Get 25% off during our End of Summer Sale!

The end of summer is near in the US (Friday, September 22, to be exact)! To celebrate the changing of seasons and our upcoming new theme releases, we’re running a short, but sweet, End of Summer sale.

From today until September 25th you can get 25% off everything in our theme collection. That includes Theme Club memberships and single theme purchases. You can also use this discount to upgrade from your single theme to the Theme Club!

This is a perfect time to join our Theme Club, which gives you unlimited access to our entire theme collection, theme updates and speedy support. We don’t run sales very often, so take advantage of this End of Summer sale!

Use the discount code ENDOFSUMMER to knock 25% off your order today! This sale is over, homie!

Save time and money with a quick checkout!
1-Year Club Membership: $89 $66.50 — Join now →
Lifetime Club Membership: $249 $186.75 — Join now →

Hosted versus self-hosted WordPress in 2017

For anyone new to using WordPress, the difference between WordPress.com and WordPress.org and all of the details in-between can be quite confusing. With some recent changes at WordPress.com, we thought it would be a good time to revisit this topic and clear up any confusion you might have about where to host your WordPress site.

First, let’s talk about a few of the terms you’ll run into when choosing hosting. When you visit WordPress hosting sites these days, you often see talk of “hosted” and “self-hosted” options. Both options mean that your site will be hosted on a live server, but there is a big difference between the two.

Read More

Summer Giveaway – Win a $100 Ugmonk Gift Card!

We’ve been creating high-quality, finely-crafted WordPress themes for 8 years now, which is no small feat. Along the way, we’ve run into a few people who share our desire to put quality, functionality, and aesthetics first and foremost. Jeff Sheldon of Ugmonk is one of those uncompromising individuals. Ugmonk is a lifestyle product business that sells all kinds of beautifully-designed products from clothing to workspace accessories and more.

Win a $100 Ugmonk Gift Card

To celebrate our 8th year running a quality-first WordPress theme shop, we thought we’d partner up with Ugmonk to give away a $100 gift card to a lucky individual! You can use this gift card to purchase anything on the Ugmonk site. Get a new hat, some new summer clothes or some accessories for your desk!

Read More

A few of our favorite Google fonts you may have missed

These days there are a ton of font options to choose from when designing your website. Google Fonts is one of the first place web designers and developers start when looking for the perfect font. The trouble is, there are a ton of fonts to sift through! We’ve put together eight serif, sans-serif and monospace fonts that are a great starting point and also pair well with other fonts.

Read More

Handy CSS tips and tricks for WordPress themes

One of the first things everyone loves to do when they install a WordPress theme is tweak the styles of the theme. Hopefully everyone is using a child theme when they customize their theme, but that’s a post for another day. Today’s post is going to focus on some handy CSS pseudo class tips you can use.

A pseudo-class is a keyword added to CSS selectors that indicates a particular state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector. But you can also do some other sweet tricks with pseudo selectors.

Read More

Customize Featured Image sizes with a child theme

Sometimes the Featured Image size in an area of your theme doesn’t quite fit the style of your image. Maybe your image is being cropped funny, maybe you want to have shorter images, or maybe you want to remove the crop all together and let your images go commando. Luckily, you can override the Featured Image crops defined in your theme and come up with something that works better for your needs. To do this properly, you’ll need a child theme and a small code snippet. Let’s get started!

Read More

Create a beautiful resume with WordPress and Atomic

Our latest WordPress theme, Atomic, is perfect for a business or portfolio site, but the homepage layout is really versatile and can be used to create all kinds of sites. In this quick tutorial, we’ll show you how to whip together a beautiful resume site to showcase your skill set to potential clients and employers. Check out our resume demo to see what we’ll be building in this tutorial.

atomic-resume-7

Getting Started

When you first activate Atomic, it will be presented as a blog with your latest posts. This is the default function of a WordPress theme, but we’ll want to use the Homepage template to show various pages on the homepage instead of blog posts.

Read More

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

[i]
[i]