Create A Wordpress Child Theme

Customizing your chosen WordPress theme is fun! What’s not fun is customizing the code files only to have them overwritten when your theme gets an update from the creator. Even if you’re not sure you’ll edit the theme files, it’s always a good practice to start with a child theme, just in case.

What’s a child theme?

A WordPress child theme inherits its functionality from another WordPress theme, the parent theme. This allows you to add/alter code to your theme, without touching the code of the original theme. Making it easier to fix problems and allowing you to update your parent theme without losing changes. YAY!

So how do I create a child theme?

Below we’ll breakdown the steps you’ll take to create a very basic child theme.

1. Load the parent theme into your WordPress install.

If you’re reading this, you probably already know how to install a WordPress theme. If not, you can find instructions here. Once it’s installed, you don’t need to activate it since this won’t be the main theme.

2. Create your child theme files.

The first thing we’ll do is create a folder to hold your files on your desktop, I usually use the client name or some version of it. For example, the folder name for my child theme is caffeinatedweb. Once the folder is created you’ll create two files to go inside it (I use Sublime Text to create and edit files, but you can use whatever works best for you). These are the only two files essential to your child theme, but you can always add more to overwrite existing pages and/or add template pages.

The first file we’ll create will be your style.css. You can copy the code below into that file, make sure to edit the code for each child theme you create (directions below).

/*
Theme Name: Twenty Twenty Child Theme
Theme URI: https://example.com
description: A theme created for [Client Name].
Author: Jane Doe
Author URI: https://example.com
Template: twentytwenty
*/

What the heck is that?

  • Theme name. This will show up as the name for your theme in the WordPress back end. I usually set it to the client company name.
  • Theme URI. Since this is for your client, and not something going into the WP Theme Store, I set this as the URL for the site the theme is for.
  • Description. This description will show up when you click on “Theme Details.” Something along the lines of “A theme created for [client name]” is fine.
  • Author. This is the author’s name — that’s YOU! Add your company name here.
  • Author URI. This should be the URL to your site.
  • Template. This is the MOST IMPORTANT part of this code. The name of the parent theme, meaning its folder name, goes here. It is case-sensitive, and if you don’t put in the right name, it’s not going to work.

The next file we’ll create will be functions.php. This file will pull in the style and functionality from the parent theme and it’s where you’ll add new functions as well.

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

// Do not delete anything above this line. Add custom functions below.

The last file we’ll add to our folder is optional. You can create an image that will show on the theme screen. It should be 1200 x 900 and be named screenshot.png.

Once all of your files are added and edited, zip your folder up.

3. Load the child theme.

You’ll load the child theme exactly like you did the parent theme, but this time you’ll activate it. If you did it correctly, you won’t receive any errors and the site should look identical to the original theme.

4. Make your edits.

Now you’re ready to make your edits without compromising the original theme!

Have questions about creating a child theme? Leave a comment below!

Caffeinated Happiness no.3

I spend a lot of time searching the web to find things that make my life easier, personally and professionally. Nothing makes me happier than finding that something and sharing it. Check out some of the awesome things I’ve come across!

Caffeinated Happiness no.3 | Caffeinated Web Studio

1. Honey*

Honey is an amazing tool that helps you save money! Who doesn’t like that? When you shop online Honey will find promo codes for that site and run them for you finding the best deal.

2. Loom*

Loom is a great FREE tool for professionals who need to show clients how to perform tasks. While in the browser, hit record and let Loom take care of the rest. Record tutorials with or without audio and you can even show yourself on screen during the tutorial.

3. Font Base

If you’re anything like me you have a slight font addiction. But, scrolling through hundreds of fonts in Illustrator can be time-consuming and frustrating. Font Base is here for you. It lets you sort fonts into collections, folders, favorites and preview the font as well. It’s available free for Mac, Windows and Linux operating systems.

4. Prism

I am THE WORST at keeping track of when bills are due. Or, I was. Not anymore! Prism lets you add your bills by adding accounts through logins or manually and adds them to a calendar as they come in. I get reminders of when things are due and can pay them through the app. YES!

5. 1Password

First off, everything has a password these days. Then, you’re supposed to have a unique password for each thing. And to make life even crazier, you’re supposed to memorize them all. HAHA, yeah right. 1Password has been a lifesaver. I keep all of my passwords in it can easily access them from my iPhone app or the browser extension. And now, I never worry about forgetting that unique 14 digit password that has to have a letter, number, special character and jazz hands, HA. SO EASY!

*Full Disclosure: this is an affiliate link.

Have a problem you’re searching for a solution to or know of something awesome that can help people out?

Looking for more caffeinated happiness? Find it here!