wp_enqueue_style referencing parent theme

Question

I have properly set up a child theme and am adding stylesheets and scripts in my new functions.php file. The only problem is, my newly enqueued stylesheets are being referenced using the parent theme when the files are located in the child theme folder.

Setting up child theme:

<?php
    add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
    function enqueue_child_theme_styles() {
      wp_enqueue_style( 'parent-theme', get_template_directory_uri().'/style.css' );
      wp_enqueue_style( 'child-theme', get_stylesheet_uri(), array('parent-theme')  );
    }
?>

Adding new styles further into my child's functions.php file:

<?php
function new_scripts() {
    wp_enqueue_style( 'grid', get_template_directory_uri() . '/css/grid.css');
}
add_action( 'wp_enqueue_scripts', 'new_scripts' );

Which shows up this way in my when rendered:

<link media="all" type="text/css" href="/wp-content/themes/parent-theme/css/grid.css?ver=4.2.2" id="grid-css" rel="stylesheet">

I need it to reference href="/wp-content/themes/child-theme/css/grid.css?ver=4.2.2"

Any suggestions?

Answer 1

You can use get_stylesheet_directory_uri(); while enqueuing the scripts and styles. It returns the directory path in which your child stylesheet is stored.

Answer 2

Just a quick note, if you include the PHP_INT_MAX variable in your add_action call, the child theme will not work correctly!

Do NOT do this ...

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);

You should rather do this ...

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles');

Then it will import the child theme correctly.