Child Theme Path Being Ignored With wp_enqueue_scripts

Question

I've created a child theme under wp-content/themes/my-theme with 5 files thus far:

|-my-theme
|----assets
|--------css
|------------bootstrap.min.css
|--------js
|------------bootstrap.min.js
|----functions.php
|----index.php
|----style.css

Now the problem is within my functions.php file, I've tried adding my .css and .js file like this:

<?php 
    # functions.php

    /**
     * add css | js files to WP
     */
    function theme_asset_setup()
    {
        # styles
        wp_enqueue_style('bootstrap', get_template_directory_uri(). '/assets/css/bootstrap.min.css', []);

        # scripts
        wp_enqueue_script('bootstrap', get_template_directory_uri(). '/assets/js/bootstrap.min.js', []);
    }

    /** actions **/
    add_action('wp_enqueue_scripts', 'theme_asset_setup');

This half does the job. This adds my .js and .css file with this path:

http://site.local/wp-content/themes/twentynineteen/assets/css/bootstrap.min.css?ver=5.1

My parent theme is twentynineteen as specified in my style.css file:

/*
 Theme Name: My Theme
 Author: treybake
 Description: foobar
 Requires at Least: WordPress 4.9.6
 Version: 0.1
 License: GNU General Public License v2 or later
 Text Domain: my-theme
 Template: twentynineteen
 */

So I'm guessing this has some sort of factor on why my .css and .js - but I'm not sure how to debug further.

Why is my child theme path being ignored for my css/js files?

Thanks

Answer 1

get_template_directory_uri() is explicitly for getting the URL to the parent theme, which is why your scripts and styles are being enqueued at that path (in this context the "template" is the parent theme).

The equivalent function for getting the child theme path is get_stylesheet_directory_uri(). If you don't have a child theme then both these functions do the same thing, but when you are using a child theme the choice is important.

However, both these functions have been superseded by much more useful functions: get_theme_file_uri() and get_parent_theme_file_uri().

get_theme_file_uri() will get the URL to a specific file in your theme. If your theme is a child theme it will look for the file there, but if it can't find it, it will look in the parent theme. get_stylesheet_directory_uri() can't do this.

So for your use case, you should use get_theme_file_uri():

wp_enqueue_style('bootstrap', get_theme_file_uri( 'assets/css/bootstrap.min.css' ), [] );
wp_enqueue_script('bootstrap', get_theme_file_uri( 'assets/js/bootstrap.min.js' ), [] );

The main difference in usage is that rather than concatenating the rest of the file path to the end, you pass it as an argument. This is why it's able to check the parent theme for the file.

Answer 2

Because this is a child theme, you should use

 # styles
        wp_enqueue_style('bootstrap', get_stylesheet_directory_uri(). '/assets/css/bootstrap.min.css', []);

        # scripts
        wp_enqueue_script('bootstrap', get_stylesheet_directory_uri(). '/assets/js/bootstrap.min.js', []);

get_template_directory_uri() pulls from the parent theme directory

get_stylesheet_directory_uri() pulls from the child theme directory