Wordpress Child Themes

Developing a Wordpress Child Theme

Introduction

Wordpress is the most widely used CMS software to develop websites by the time of this writing.

With Wordpress you can power complex sites as well as simple blogs, you can customize almost every aspect of it with the use of plugins or rich feature themes with lots of functions build in.

Lots of its customization can be done with themes or changes to them, but when you change something in a theme and then that theme gets an upgrade your changes are overwritten, there is a way to overcome that, and that is creating a child theme.

Definition

A child theme is a theme that inherits its functions and styling from the parent theme, and where you can change or add any functionality or styling without the risk of losing them when the parent is upgraded.

Creating the child theme

Let's go to hands job training and see step by step how to accomplish our task.

We are going to "fork" the newest Wordpress official theme to just change the font it uses.

Twenty Fifteen uses Google's Noto Sans and Serif fonts, we are going to change it to use

Choosing the parent theme

The first thing you need to do is to find a parent theme you want to modify or add features to.

Considering that your newly created theme will inherit everything from the parent one, you will want to choose wisely, go with a solid theme with good SEO, good layout options so you can have solid bases for your work.

Once you have learned and mastered the child theme creation, you can start building your themes over popular frameworks like:

• Genesis
• Canvas
• Thesis

Or go with some Open Source frameworks:

• Thematic
• Bootstrap Framework
• Roots.io

For this tutorial, we will simply start with Wordpress' Twenty Fifteen theme.

Install the parent theme

If you have not done this already, you need to download and install the theme that is going to be the base of your work.

First go to the admin section of your Wordpress installation, which is http://your-site-url/wp-admin/. Then choose Appearance -> Themes from the left side of your screen.

Once there select Add New and look for Twenty Fifteen if it is not already installed (if you have the latest version of Wordpress, it should be already installed).

Create the child folder and add minimum files

First thing you need to do, is to create the child theme folder, where its files are going to be.

You can do this in very different ways, being FTP and ssh the most common ones, how to do it via either of them is outside the scope of this tutorial, but it has be be located in: wp-content/themes/, if you are on a fresh Wordpress installation you will find these folders inside wp-content/themes/

• twentyfifteen
• twentyfourteen
• twentythirteen
• twentytwelve

So let's create a new one, which can be named, twentyfifteen-child pretty obvious right?

Inside that folder there are two files that are a must:

• style.css
• functions.php

Once you have those files in place, add this to style.css.

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://the-url-where-theme/can-be-downloaded
 Description:  Twenty Fifteen Child Theme
 Author:       Your name
 Author URI:   http://your-website
 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:         responsive, blog
 Text Domain:  twenty-fifteen-child
*/

You can change any of those lines according to your needs, the only one you can't write at your discretion, is the Template line, it must reflect the folder of the parent theme.

You also have to create a functions.php which we will keep empty for a while.

You now have a new theme that you can activate from the *Appearance -> Themes * menu in the Admin page of your Wordpress Admin Panel.

Once activated, you will see that you have a blog with no theme at all, so it is time to start customizing your new theme.

Customize your newly created theme

The first thing we need to know is how files are treated, any file you have in your child theme's folder is going to replace the original one in parent folder, this with the exception of functions.php which contents are going to be added to the parent's functions.php file, but at top of it, so child's functions are loaded before parent's ones.

Import parents styling

Maybe the very first thing we need to do is to import the parent's styling so we can modify them instead of creating everything again.

In order to do it, copy this snippet in your child's functions file.

<?php 
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_uri(), array( 'parent-style' ) );
}

Once that is done you have a child theme that is equal to the parent one, but now you are really ready to start customizing it.

Change the font of the theme

In this example we have decided to change the default font family of TwentyFifteen theme in order to show how to customize a child theme.

To do that, we are going to edit the /wp-content/themes/twentyfifteen-child/style.css file, and add this lines to it:

@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
    font-family: 'Raleway', sans-serif;
}

So the complete new style.css file will look like this:

/*
    Theme Name:   Twenty Fifteen Child
    Theme URI:    http://the-url-where-theme/can-be-downloaded
    Description:  Twenty Fifteen Child Theme
    Author:       Guillermo Garron
    Author URI:   http://www.garron.me
    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:         responsive, blog
    Text Domain:  twenty-fifteen-child
*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
    font-family: 'Raleway', sans-serif;
}

The added lines will import a new font from Google fonts, Raleway in this case, and the rest of lines tells The browser to use Raleway instead of Noto which is the default for TwentyFifteen theme.

Summary

We have learned how to customize a Wordpress theme in a way we will not lose any change when upgrading the theme. To accomplish that we have taken this steps.

• Create a child theme
  • In a new theme folder add style.css and functions.php
  • In style.css declare the parent theme
  • In functions.php import the parent theme's style to the child
• Add your style changes to the child's style.css file

Of course you can do more elaborated changes, and not only change the font of the theme.