fbpx

Easy Child Theme Creation – A WordPress Guide

Share this post
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

 

METHOD TWO: Manual Creation
A child theme consists of at least one directory, the child theme directory, and two files, style.css and functions.php, which you will need to create

Step One: Create the Child Theme Directory
The child theme directory will be placed in wp-content/themes. It is recommended, but not required, that you append “-child” to the name of your child theme directory (Example: mytheme-child). Ensure there are no spaces in your child theme directory name and capitalization of the parent theme is consistent , which might result in errors.

Step Two: Create the Child Theme’s Stylesheet
Your child theme’s stylesheet, style.css, must begin with the stylesheet header below. Please update appropriately to reflect the names of your theme and ensure the Template line corresponds to the directory name of the parent theme.

/*
Theme Name: My Theme Child
Theme URI: http://example.com/my-theme-child/
Description: My Theme Child Theme
Author: Jane Doe
Author URI: http://example.com
Template: mytheme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: my-theme-child
*/

Step Three: Enqueue the Parent and Child Theme Stylesheets
Please note that the previous method was to import the parent theme stylesheet using @import. This is no longer best practice, and the correct method is to enqueue the parent theme stylesheet by adding a wp_enqueue_scripts action and using wp_enqueue_style() in your child theme’s functions.php.

You will need to create a functions.php file in your child theme’s directory The first line of your child theme’s functions.php will be an opening PHP tag (<?php), after which you will enqueue your parent and child theme stylesheets. The example function below will only work if your parent theme uses only one main style.css to hold all of the CSS. If your theme has more than one CSS file (eg. ie.css, style.css, main.css), you will have to make sure to maintain all parent theme dependencies.

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

Your child theme’s stylesheet is usually loaded automatically. If it is not, you will need to enqueue it also. Setting ‘parent-style’ as a dependency will ensure the child theme stylesheet loads after it. See example below:

<?php
function theme_enqueue_styles() {
$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 )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

Related Posts

15 comments

This is great information for anyone who has a WordPress site. I have found that many people who design their own websites, myself included, fail to create a child theme when they initially build their site.

We all learn our lesson the first time we hit that update button and loose hours of hard work and special coding. Thank you XterraWeb for taking the time to research this issue and provide us with so many different choices. I’m definitely going to take advantage of your insight.

Amor Libris (Kelly Hartigan)

Thank you, Melanie. I learned that lesson too. I was new to WordPress and didn’t learn about child themes until after I had made multiple changes. I wish I had known about this before. Unfortunately, once you have made multiple modifications to your WordPress parent theme, things become a bit more challenging. I was about to give up until I conducted some research and discovered I could make the process a bit easier with the exception of dealing with the functions.php file. I hope the information in this article helps make the process less challenging for you.

A wonderful insight into the possibilities but I dont’ think I’ll be going there anytime soon.
Simply using my WordPress site as it comes is enough for me. I find it time-consuming to get posts, menus and sidebars as I want them without digging into the minefield you’ve explored in depth.
Kudos to you guys who are capable of such technical wizardry. 🙂

Amor Libris (Kelly Hartigan)

Thank you, Tom. Yes, this is a bit more advanced. However, if someone just created a self-hosted WordPress site, the plugins to create the child theme would be helpful, easy to use, and save them from encountering problems in the future.

This is SO helpful! Most people have WordPress sites and would have no idea about these tips that could save them heartache in the future.

Well this blog article was not what I was expecting but everything I needed to read about! I may switch to WordPress one day and will try this.

Thanks for all the info – at the moment I’m just using a free WordPress theme for my blog, but I know at some point I’ll want to upgrade to something I have more control over. You’ve explained all the options in a really easy way – pinned for when I take the next step in blogging!

This is really useful thanks for sharing. I sometimes struggle to figure out child seems so I will be bookmarking is page.

A helpful post – not come across child theme before.I don’t have a wordpress blog anymore though! Look forward to more helpful reads 🙂

This is great information for someone starting their own blog! I wish I had a post like this to read when I switched over!

Child Themes are great. I’m currently working on mine so this was a great help.

Very informative! I am not on wordpress and have not made the switch but will be bookmarking this if ever I do.

been looking for a friendly guide for wordpress users lately! this will be a big help for me! thanks for posting it!

At the moment I’m using a free WordPress theme but I hope to switch this up soon. Your explanation is one of the clearest I’ve seen – child themes have had me confused for a long time. Thanks for explaining it in such an easy way to understand.

Very good information. When I was looking for a new theme, I saw child themes and didn’t understand what it was.

LEAVE A REPLY