Using Child Themes in WordPress

So I’ve been reading instructions on here and on WordPress’s official website and I’m still having an issue getting my child theme to work. I’m using the Agility theme and set up agility-child as the directory for my child theme. In there I have my style.css:

/*
Theme Name:     Agility Child Theme
Theme URI:      themeforest.net/item/agility-responsive-html5-wordpress-theme/2336028
Description:    Agility Child Theme
Author:         *****
Author URI:     *****
Template:       agility
Version:        1.0.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
*/

/* =Theme customization starts here --------------- */

Then, inside another folder (stylesheets) I have layout.css:

Read More
/*
Theme Name:     Agility Child Theme
Theme URI:      themeforest.net/item/agility-responsive-html5-wordpress-theme/2336028
Description:    Agility Child Theme
Author:         *****
Author URI:     *****
Template:       agility
Version:        1.0.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
*/

/* =Theme customization starts here --------------- */

#colophon {
    background: #fff;
    border-top: 2px solid #ddd;
}

Then, back in the main directory, functions.php:

<?php 
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . 'stylesheets/layout.css' );

    } 
?> 

The child theme is active in WP but none of my CSS changes to layout.css (or the other CSS that the theme uses; style.css is basically used for nothing). Am I using functions.php incorrectly?

Related posts

Leave a Reply

1 comment

  1. get_template_directory_uri() returns the directory of the template you are using (or in other words — the parent theme). You can use get_bloginfo( 'stylesheet_directory' ) instead. This will get the stylesheet directory of the current theme.

    Each of the enqueued files should also have different ids (you are using “parent-style” for both. Also, you are missing a slash on the second line. Your enqueues should probably looks something like this:

    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    
    function theme_enqueue_styles() {
    
        // This will include the parent theme's stylesheet
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    
        // This will include layouts.css from the child theme's "stylesheets" directory
        wp_enqueue_style( 'layouts', get_bloginfo( 'stylesheet_directory' ) . '/stylesheets/layout.css' );
    }
    

    Reference:

    http://codex.wordpress.org/Child_Themes
    http://codex.wordpress.org/Function_Reference/get_bloginfo
    http://codex.wordpress.org/Function_Reference/get_template_directory_uri