Child theme tutorial – WordPress

  • Wordpress child theme tutorial

Getting started with child themes

It can sound complicated when people talk about creating a WordPress child theme, but don’t worry it is really very simple. I will walk you through how to create your own WordPress child theme.

For this child theme tutorial I will be using the Twenty Fifteen WordPress theme.

The first thing we need to do is to create a new directory in your

wp-content/themes

directory and name it.

wp-content/themes/twentyfifteen-child

Now we need to create just two files in this new directory.  Create an empty file named

style.css

and inside place

/*
Theme Name:   Twenty Fifteen Child
Theme URI:    http://example.com/twenty-fifteen-child/
Description:  Twenty Fifteen Child Theme
Author:       John Doe
Author URI:   http://example.com
Template:     twentyfifteen
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:  twenty-fifteen-child
*/

You should edit this to match your details. The only 2 required fields are

Theme Name:

and

Template

Theme Name is the name of your new child theme and Template is the directory name of your parent theme.

Finally we need to add the last file

functions.php

This time in your functions.php we need to place the code to enqueue the loading of the parent themes styles.css.

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

}

If your child theme’s stylesheet is not loaded automatically too, then you will need to enqueue that as well. Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it.

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_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’)
);
}

Now you have created a child theme and you can test this is working by opening the styles.css in you child theme and adding

body {
background-color: #FF0000;
}

And the background of your website body should now be red if all has gone well.

There is a great tutorial for this on the WordPress website if you need any more help.

By |2016-12-18T00:17:15+00:00May 2nd, 2015|Website Design, Wordpress|0 Comments

About the Author:

I Have been working in the IT industry for over 10 years.