How to Create a Professional WordPress Child Theme

(Last Updated On: December 19, 2017)

How to create a child theme from an existing theme

child theme

A big problem in WordPress is this: When you upgrade to a new version of your theme, all of your changes could be lost. You solve this problem by creating a child theme.

For security reasons and so on, every theme has minor improvements once in a while. So, best practice is to create a theme folder (in this case) called Twentysixteen. Then we add a child folder with a similar name and some of the same files as the parent.

We’ll create a child theme directory that includes functions.php, header.phpstyle.css files.

In this example we want to have a moving image in the header. So, it is necessary to make changes to the theme.

 

child themeThe simplest way to “create” a child folder is to go to the wpsites.net website & press the red button. You will download a Twenty Sixteen Child theme into your Downloads folder.

LiquidNet Ltd Hosting

child themeFor this blog post, we are assuming that you are using LiquidNet for a hosting service.

Double-click on the zip file in your Downloads folder and you will get a folder called twentysixteen-child. Drag & drop that folder into your LiquidNet themes folder.

(To find your themes folder, go to Files > File Manager > The domain name with which you are working > wp-content > themes.)

YouTube

The 60 second video below may help you understand how to use LiquidNet Ltd Hosting to create a child theme. Watch in full screen view. Click the Pause button once in a while to help you absorb all of the new information.

 

Files in Child Folder

style.css

child themeRight-click on twentysixteen-child and click on New File. Name the new file style.css.

Right-click on style.css and use edit to add the code below into style.css.

/*
Theme Name: Twentysixteen-child
Theme URI: https://kelownavirtualassistant.com/twentysixteen-child/
Description: Twenty Sixteen Child Theme
Author: Peter Enns
Author URI: https://kelownavirtualassistant.com/
Template: twentysixteen
Version: 1.3
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-sixteen-child
*/

Save it.

Note that you may have to update the code above to reflect exactly what theme & URL you are using.

header.php

child themeIf header.php is not in your child file, select it in the parent file and use the copy icon to copy it into your child file.

Then add the code below to your new header.php. It will be inserted around line 44, just below site-branding –>.

<?php if (function_exists( ‘soliloquy’ )) { soliloquy( ‘33′ ); } ?>

child themeNote that the number 33 comes from the number that was assigned to my slider by Soliloquy.

functions.php

Right-click on functions.php in your child folder. Use edit to add the code below. There should be no other code in the file.

<?php
add_action( ‘wp_enqueue_scripts’, ‘wpsites_load_parent_styles’);
function wpsites_load_parent_styles() {
wp_enqueue_style( ‘parent-styles’, get_template_directory_uri().’/style.css’ );
}

child theme

Now if you go to Appearance > Themes, your child theme will show up along with the other themes that you have. Hover over your child theme and click on the Activate button.

 

loading…
RSS
Follow by Email
Facebook
Facebook
Google+
Google+
https://kelownavirtualassistant.com/child-theme/">
YouTube
LinkedIn
Instagram

Leave a Comment

Your email address will not be published. Required fields are marked *

0

Your Cart