How To Create A Child Theme For Any WordPress Theme

Child themes are a staple of every WordPress developer.

There are times when the functionality provided by the theme developer doesn't meet your needs and you want to add something else.

I'll often say in my tutorials to "edit the functions.php file". Whenever I say that, I'm assuming you're editing a child theme.

You should never edit the theme files. When you update a theme to a new version, all your added code will be deleted.

To add custom programming to your theme, always use a child theme.

What is a WordPress child theme?

A WordPress child theme builds upon or overwrites the functionality of the parent theme.

It brings in everything from the parent theme, other than any changes you made to the Customizer.

At its most simple, it's just a stylesheet and a few lines of code in a PHP file.

You need to have the parent theme installed, but only the child theme will be active.

Any subsequent updates to the parent theme will apply to the child theme, unless you've already overwritten them.

On the front end, the parent theme CSS is loaded first, followed by the child theme CSS. That way you can overwrite styles without usually needing to add !important.

How to create a child theme for any WordPress theme:

  1. Create a folder for your child theme
  2. Create a style.css file referencing the parent theme
  3. Create a functions.php file that brings in the parent and child stylesheets
  4. Zip the folder
  5. Install the zipped file as a new theme
  6. Activate your new child theme

Let's build a bare bones child theme for GeneratePress, because it's awesome, I use it all the time and there's a free version available here.

Create the folder and files

On your computer, we'll create a folder called intelliwolf-generatepress-child.

In there, create two text files called style.css and functions.php.

I recommend using Atom for this, whether you're on Mac or PC. It's free, open source and just does a marvellous job.

Add this code to style.css and save:

/*
Theme Name: Intelliwolf GeneratePress Child
Template: generatepress
*/

Add this code to functions.php and save:

<?php

add_action('wp_enqueue_scripts', 'child_enqueue_styles', 15);
function child_enqueue_styles() {
  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'), '1.0.0', 'all' );
}

// Add custom code here.

?>

Zip the folder up so you have a file called intelliwolf-generatepress-child.zip.

If you have GeneratePress installed, you can go ahead with activating the child theme. If not, just go get the free version of GeneratePress here so you can see the child theme in action.

In your WordPress test installation, go to Appearance -> Themes. Click "Add New", then upload intelliwolf-generatepress-child.zip.

Activate it and there's your new child theme.

Read on for an explanation of how you can customize these files to fit your parent theme.

Style.css Explanation

Let's look at the style.css file first.

Notice that the text in style.css is wrapped in /* and */?

Those are starting and ending of multi-line comments.

Anything you put between these will not be executed by the browser.

Put any CSS you want to add to the child theme after */.

I like to keep this area for the CSS that I want to use on multiple sites with the child theme. This is great for templating your work.

I keep customisations for the individual site in Additional CSS in the WordPress Customizer. But use whichever you prefer.

The two lines in the example I gave are the only two required for child themes. I'll go through some of the optional ones below.

Customize style.css for your child theme

Change rest of the line after "Theme Name" to the name you want for your child theme. Don't wrap it in quotes.

The only other thing we need to do is connect "Template" to your parent theme.

If you're using a theme other than GeneratePress, change this line in style.css:

Template: generatepress

Change "generatepress" to the folder name of your parent theme.

Another way to find the parent theme connector is, in your WordPress admin area, navigate to Appearance -> Editor. Switch the theme to your parent theme and look in style.css for the line "Text Domain:". The text that comes after that is what you need to enter after "Template" in your child theme style.css.

Optional child theme functionality

There are a number of options you can add to style.css.

The lines I usually add to a child theme are:

Author: Intelliwolf
Author URI: https://www.intelliwolf.com
Description: Child Theme for GeneratePress
Version: 1.0.0

They should be fairly self-explanatory. Change the values accordingly.

Functions.php explanation

You need to have <?php at the start of the file so the server knows to treat the text as PHP.

The line ?> tells the server to stop treating the remainder as PHP. Any PHP you want in functions.php should be before that line. Just replace this line with your code:

// Add custom code here.

The child_enqueue_styles() function tells WordPress where the parent and child stylesheets are located. The add_action tells WordPress to bring them in when it loads the stylesheets.

Unless you know what you're doing, you don't need to edit these lines.

What else goes into my standard Child Theme?

I have two other snippets in my standard child theme.

The first is a customization of the standard WordPress Theme Customizer colors. I've done a whole tutorial on that here.

The other snippet cleans up some of the bloated WordPress code from the <head> section.

/*** Clean Up Header ***/

remove_filter('comment_text', 'convert_smilies', 20);
remove_filter('the_excerpt', 'convert_smilies');
remove_filter('the_content', 'convert_smilies');
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('admin_print_styles', 'print_emoji_styles');
remove_action('init', 'smilies_init', 5);
remove_filter('pingback_ping_source_uri', 'pingback_ping_source_uri');
remove_action('template_redirect', 'wp_shortlink_header', 11, 0);
update_option('default_ping_status','closed');
update_option('default_pingback_flag','');
update_option('use_smilies', 0);

The last three you can remove after you've loaded a page. They're just there to turn pings and smilies off.

The main target of this extra code is the "smilies" and emojis that WordPress tries to handle. If you really want to keep it, then do so. I just think it's unnecessary code for minimal gain.

Leave a Comment