Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress Build a Website with WordPress Customizing WordPress Themes How to Make Child Themes

Emily Kinloch-Davis
Emily Kinloch-Davis
2,687 Points

Working locally following the Wordpress Track and not clear on creating a Child Theme. Please help...

I'm working my way through the Wordpress Track and have learned how to install and work with Wordpress locally, but now moving through the next section of How to Make a Child Theme, it just launches into FTP and folders and I'm not sure where to start with this?

How do I create a Child Theme working locally?

I have looked at the similar questions already asked and can't find something that helps me move forward.

1 Answer

I'm working through the attached page. I think this is page is new best practice for creating child themes.

https://developer.wordpress.org/themes/advanced-topics/child-themes/#how-to-create-a-child-theme

Just a basic summary of the steps.

1) Create a child theme folder in the same directory as the other themes. For me using XAMPP my file path looks like: xampp > htdocs > localwp.com (my wordpress site) > wp-content> themes

Here I create a new folder with the name of my theme with "-child" appended so I can recognize it later e.g. twenty-fifteen-child

2) I create a style sheet using my favorite code editor (brackets :) but sublime text or atom or whatever works as well Copy and paste the following code:

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

Change the data to fit your child theme, make sure you get the theme name and template right.

Save this file inside of the new folder you just created in step one.

Save as style.css

3) If your parent theme only has once style.css file then create a new file in your code editor with the following php code in it

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    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')
    );
}
?>

and save it in your child theme folder as functions.php

4) You should be able to go to your locally hosted website now, go to your dashboard > appearance > themes and select your child theme and activate it.