Making a Child Theme In WordPress Method 1 – Ftp

This is an except from my upcoming book WordPress and Css

Creating a child theme

There are a few ways a to create a child theme

1. Copy the theme files to a new folder using ftp
2. Copy the files using cpanel or online file manager
3. Use a plugin to make a copy of the files

This post covers using FTP. I’ll post last about the other medthods.

To make a child theme using ftp

Create a new folder in your theme folder with the name of your new theme.

In this case I have given it the name twentysixteenchild.

ftpchild

Create 2 files in your new theme’s folder

style.css
functions.php

ftpchild2

In your style.css file place the following

/*
Theme Name: Twenty Sixteen Child
Template: twentysixteen
*/

The theme name is whatever name you want to give your child theme, and the template is the name of the parent theme.

While these are the only 2 line absolutely needed to make a child theme, you may if you wish give more information.

/*
Theme Name: Twenty Sixteen Child
Theme URI: http://yoursite.com/twenty-sixteen-child/
Description: Twenty Sixteen Child Theme
Author: John Smith
Author URI: http://yoursite.com
Template: twentysixteen
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-sixteen-child
*/
Technically all you need for a theme is the style.css, but it will not use the parent’s css without a little help from php.

Place this code in your functions.php file


&lt?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 ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?&gt

The function my_theme_enqueue_styles sets up loading the css files. The wp_enqueue_style is the command responsible for loading stylesheets into wordpress.

This line loads the parent style, in this case twentysixteen.

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );

This line loads your new child theme’s style.css file and by passing the $parent_style, we ensure that it loads after the parent’s style.css file.

wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style ),
wp_get_theme()->get(‘Version’)
);

And the last line:

add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );

tells WordPress to call the my_theme_enqueue_styles function when a page is loaded.

Upload your new child theme’s folder to your website.

Browse in your WordPress admin system to appearance>themes.

thememenu

Find your child theme and click activate.

activate

Your child theme will not have a thumbnail. You can change this by copying the screenshot.png file from the parent theme folder into your child theme folder.

copyfile

If everything has been configured properly you can refresh your site and see no difference.

Now let’s change things up!

You can place css code into your child theme’s css file and use it in your page.

More coming soon…

Leave a Reply