Creating a Child Theme

Originally published at: Creating a Child Theme | ClassicPress

When performing changes to your theme, like changing up the template; adding functionality; or adding CSS, it is often advised to use a child theme. But how do you make a child theme? What even is a child theme? Why do you need this?

9 Likes

Just to mention that there are several great plugins that automate a lot of this.
https://wordpress.org/plugins/search/child+theme/

2 Likes

While that is true, I am always for using fewer plugins. Also, if you understand the process, you have better control over it.

5 Likes

And for the console-lovers like me :sweat_smile:

wp scaffold child-theme my-child-name --parent_theme=parent-theme-slug
4 Likes

Sorry for raising an old thread, I would normally have this in my child theme functions file, how does this compare to the code in the tutorial? should I change?

function child_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’, get_stylesheet_uri(), array(‘parent-style’) );
}
add_action( ‘wp_enqueue_scripts’, ‘child_styles’ );

2 Likes

For me it is correct.
You are just loading both parent and child style.css files in the same function.

3 Likes

What you’re doing is correct as well.

The extra line you’re adding makes sure that the child styles are always loaded AFTER the parent styles. This normally goes automatically, but there are some edge cases where something interferes. What you’re doing is basically eliminating that possibility.

3 Likes

Ok, so no need to change :slight_smile:
Thank you for the responses

3 Likes

you should add the version arg when using wp_enqueue_style otherwise the css will have the WP/CP version appended and your users will never see updated versions when you edit the css.

1 Like

Just to note that when using the functions.php supplied in the tutorial I got a series of errors to do with arrays and Booleans. I used the example from WordPress and it worked fine.

<?php
function my_theme_enqueue_styles() {
    $parent_style = 'twentyseventeen-style'; // This is 'parent-style' for the Twenty Seventeen 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')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );