Create A WordPress Child Theme In 5 Minutes

child theme

Its Really That Simple

First what is a child theme and why its important to setup one?

Simply a child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. They are the recommended way of modifying an existing theme.

There are a few reasons why you would want to use one:

  • If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications to the core theme files are preserved.
  • Speed up development time.

 

How to Create a Child Theme?

It consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:

  • The child theme directory
  • style.css
  • functions.php

Step 1- Create A directory (Folder) in the directory wp-content/themes and name this folder: yourParentThemeName-child, this will be your child theme directory

 

Step 2- Create a file in this new directory named: style.css , here you will override the CSS in the parent theme style sheet, this file should include these 2 important lines:

/*
Theme Name:   Your Child Theme Name
Template:     Your Parent Theme Template Name example: twentyfifteen
*/

The Parent Theme Template Name corresponds to the directory name of the parent theme.

These 2 lines are enough but you can add more details to your child theme, such details like:

/*
Theme Name:   Twenty Fifteen Child
Theme URI:    http://example.com/twenty-fifteen-child/
Description:  Twenty Fifteen Child Theme
Author:       Salam El-Banna
Author URI:   http://example.com
Template:     twentyfifteen
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.git.org/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twenty-fifteen-child
*/


Step 3- Create a file in this child theme directory named: functions.php, all the functions you write in this file will override the functions of the parent theme.

In this file functions.php we need to add some code to include the parent theme style sheet as follow:

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

Your child theme’s style sheet will usually be loaded automatically. If it is not, you will need to enqueue it as well.

replace the above code with this:

<?php
function my_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', 'my_theme_enqueue_styles' );
?>

And that’s it 😀

Your child theme is now setup, just go to Appearance->Themes and activate your new child theme.

If you want to override the footer of your parent theme, just create a file in your child theme named: footer.php and write in it your own code, the theme will load this footer instead of the parent theme footer, the same goes for header.php, index.php and all file templates.

 

You can check the full documentation from WordPress.org