michelangelo abstract boy child

You want more. The new WordPress theme that you’ve enabled looks great and works fine with the WooCommerce plugin and the StockUnlocks plugin. However, you want to make your website look better. You heard that you should make a WordPress child theme.

You don’t have a clue about how to go about creating a child theme.

What Is a WordPress Child Theme?

The WordPress Codex defines a Child Theme like this:

“A child theme is a theme that inherits the functionality and styling from the main theme, called the ‘parent theme’. Creating and editing a child theme is the recommended way of modifying the parent theme.” 

When you make a WordPress child theme, it allows you to replace certain parts of the parent theme without making direct edits to it. The changes in your child theme points to the parts in its parent theme that you want to replace.

True, editing the parent theme files work just fine. However, custom changes are replaced when the parent theme is updated. You’ll have to start all over again.

The Safety of the Child Theme

You should make a WordPress child theme to avoid losing your custom changes. Making a child theme is also the safest approach to customizing the display of your WordPress website. Imagine if you made a mistake while editing the parent theme and you break your site?

When you’d like to make changes to your chosen them, it’s much safer to use a child theme and leave the parent theme files untouched. Sure, you can break your site with a child theme as well, but it’s easier to just switch back to the parent theme until you figure out and fix what went wrong.

How to Locate the Child Theme

Believe it or not, some WordPress themes already come with a child theme installed and ready for you to modify. These WordPress themes don’t necessarily have to be purchased or premium to have a pre-installed child theme.

Before you move on to creating your very own custom child theme, let’s see how to check for an already existing child theme. Try this:

wordpress dashboard menu appearance editorStep 1: Access your WordPress Dashboard and Click on Appearance > Editor

dashboard menu to select theme to editStep 2: Look at the “Select theme to edit” drop-down list and see if you can locate the child theme

The child theme has the same name as the parent theme, followed by the words “Child theme”. For example, if the parent theme’s name is “Twenty Sixteen” you should see “Twenty Sixteen Child theme” for the file representing the child theme.

If you see the child theme here, then move on to the next section: “Editing the Child Theme”. If you don’t see the child theme here, let’s create one.

How to Make a WordPress Child Theme

You will find the parent theme in the /wp-content/themes/ folder. Access this folder via cPanel.

Let’s make a WordPress child theme for one of the default themes called “Twenty Sixteen”. You can choose any theme that you want, just make sure that you follow the pattern below.

The first thing that we need to do is create a new folder next to the “Twenty Sixteen” theme’s folder and name it twentysixteen-child.

Here’s what that should look like:

/wp-content/themes/twentysixteen-child

Next, create a file in the themes folder and name it style.css:

/wp-content/themes/twentysixteen-child/style.css

Add the following content to the style.css file:


/*
Theme Name:     Twenty Sixteen Child theme
Theme URI:      https://www.stockunlocks.com
Description:    Child theme made for Twenty Sixteen
Author:         stockunlocks
Author URI:     https://www.stockunlocks.com/author/admin_name/
Template:       twentysixteen
Version:        2.0
*/


/*  ----------------------------------------------------------------------------
    This file will load automatically when the child theme is active. You can use it
    for custom CSS.
*/

Here are a some notes regarding the above text:

You will need to replace the example text with the details relevant to your theme.

The Template: line corresponds to the folder name of the parent theme. The parent theme in our example is the Twenty Sixteen theme, so the Template will be twentysixteen. You may be working with a different theme, so adjust accordingly.

You now have a valid child theme for the Twenty Sixteen parent theme. If you log into the WordPress dashboard, you can see your new ‘Twenty Sixteen Child theme’ and activate it.

If you want to add a background theme image to the child theme, you can create your own or simply copy the screenshot.png from the parent theme’s folder and paste it into the child theme’s folder.

Editing the Child Theme

You may edit the style.css file directly to make changes to the child theme. However, here’s another way to edit the style.css file using the WordPress Dashboard interface:

dashboard appearance editor to make a wordpress child themeStep 1: Access your WordPress Dashboard and Click on Appearance > Editor

wordpress dashboard select theme to edit menuStep 2: Find the “Select theme to edit” drop-down list and click Select to display the Twenty Sixteen Child theme that you just created.

You can make the customization changes here in the child theme.

If you want to replace all of the CSS from the parent theme, just add your CSS to the child theme style.css file. However, you may not interested be in replacing all of the CSS.

In this case, you need a way to for the child theme to reference all of the CSS from the parent theme.

The way to include the CSS from the parent theme is by creating a functions.php file in the child theme’s folder. The following is taken from WordPress.org regarding the creation of the functions.php:

The first line of your child theme’s functions.php will be an opening PHP tag <?php , after which you can enqueue your parent and child theme stylesheets.

The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css.

However, if your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.

Add this to the child theme’s function.php:


<?php

function my_theme_enqueue_styles() {

// This is 'twentysixteen-style' for the Twenty Sixteen theme.

 $parent_style = 'parent-style';
 wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
 wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css',
   array( $parent_style ),
   wp_get_theme()->get('Version')
 );
}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

?>

Note: Now that you have a functions.php for your child theme, you can do some useful things like: 

  • Change the Email sender’s name (the default is wordpress@yourdomain.com)
  • Change your post excerpt length (the default is 55 words).
  • Define functions you wish to reuse in multiple theme template files

The WordPress Theme Handbook thoroughly explains the possibilities.

Activate the Child Theme

You know how to make a WordPress child theme. Let’s activate it.

wordpress dashboard menu appearance themesStep 1: Log in to your site’s Dashboard, and go to Dashboard > Appearance > Themes

make a wordpress theme active by selecting it in dashboardStep 2: Select your child theme that’s listed and ready for activation

You can always switch back to the WordPress Dashboard to activate the parent or another theme.

Note: You may need to re-save your menu (Appearance > Menus, or Appearance > Customize > Menus) and theme options (including background and header images) after activating the child theme.

You’re now set up to customize to your chosen WordPress theme by making changes in your child theme.

In Summary

In order to customize your website, you need to know how to make a WordPress child theme. Avoid editing the original theme directly by making a child theme. A child theme prevents theme updates from wiping out your changes.

Check out the official resource regarding child themes at WordPress.org codex.

Using a child theme is useful whether or not you’re unlocking cell phones with the StockUnlocks plugin .

If you’re interested, you can start unlocking cell phones with your WordPress website. StockUnlocks provides all the resources you need to transform your website into an automated, remote unlocking machine.

Do you think that we should make a WordPress child theme that works specifically with the StockUnlocks plugin? Leave a comment below or contact us to let us know!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.