Cdtjkyj

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

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.

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