Making a Child Theme In WordPress Method 2 – File Manager

This is an except from my upcoming book WordPress and Css

The following shows using the file manager in GoDaddy, but it will be similar with most web hosting.

1. Click on File manager in your control panel.

filemanager3

2. If you have more than one site on your hosting a select box will pop up.
Select the site that want to add your child theme to.

multiselect

3. Double click the wp-content folder

wp_content_folder

Double click the themes folder

themefolder

4. You will see a listing of themes

themes

5. Click on the new folder button

newfolder

6. Give your folder a name.
This should be the name of the theme.

In this example we will use the name twentysixteenchild and will use that name in several other places. It is important that these names match.

newfoldername

7. Double click the new folder you just created

selectnewfolder

8. Click on the add file button.

newfile

9. Enter the name style.css into the new file name text box and press the create new file button.

newfile2

10. Click the style.css file to select it.

clickstyle
11. Click the code editor button.
clickcodeeditor
12. A pop up will come up warning about encoding. This is noting to worry about since our file is currently empty. Click on the Edit button.

codeeditpopup

13. The code window opens

codewindow

14.Place this code inside your code window:

/*
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.

The template name must be the same as the folder name of the parent theme! In this case twentysixteen

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.

14. Save the file and close the editor.

savechanges

15. Click on the add file button again.

newfile

16. Give the file a name of functions.php

functions

16. Select functions.php

selectpfunctions
17. Click on the code editor button.

clickcodeeditor

18. Place this code in your functions.php file:
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

You don’t need to know what the code does to have it work, but if you’d like a detailed explanation, please see the previous section.

19. Save your changes.

savechanges

20. Your child theme will now appear in the theme section. You can activate it.

activate
Optional

21. You can copy the theme thumbnail by copying the screenshot.png from the parent folder.

Select the screenshot.png file

screenshot

22. Press the copy button

copyfile

23. Enter the child theme as the last part of the file path.

copyscreenshot

Place the code for the rest of this book in the style.css file

You can use the file manager code editor or the built in code editor in WordPress

1.In the admin menu under Appearance click Editor

edit1
2.From the drop down menu select your child theme
themeselect

You can place your custom css code in the editor

edit2

 

Leave a Reply