Why is “get_template_directory_uri” pointing to child theme?

Question

I have a notmytheme, the original css load order is like so:

<link rel='stylesheet' id='something'  href='http://localhost/mywp/wp-content/themes/notmytheme/something.css' type='text/css' media='all' />
<link rel='stylesheet' id='notmytheme-style-css'  href='http://localhost/mywp/wp-content/themes/notmytheme/style.css?ver=1.0.9' type='text/css' media='all' />

When I created a child theme called the notmytheme-child, and enqueue the child style, it became like this:

<link rel='stylesheet' id='notmytheme-style-css'  href='http://localhost/mywp/wp-content/themes/notmytheme/style.css?ver=1.0.9' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='http://localhost/mywp/wp-content/themes/notmytheme-child/style.css?ver=18.08.07' type='text/css' media='all' />
<link rel='stylesheet' id='something'  href='http://localhost/mywp/wp-content/themes/notmytheme/something.css' type='text/css' media='all' />

I want the parent and child style to be loaded after other styles like how the parent theme did it, so I moved it down with priority ( add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 999 ); ), now it became like this:

<link rel='stylesheet' id='something'  href='http://localhost/mywp/wp-content/themes/notmytheme/something.css' type='text/css' media='all' />
<link rel='stylesheet' id='notmytheme-style-css'  href='http://localhost/mywp/wp-content/themes/notmytheme-child/style.css?ver=1.0.9' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='http://localhost/mywp/wp-content/themes/notmytheme-child/style.css?ver=18.08.07' type='text/css' media='all' />

I do not know why but now the get_template_directory_uri() now points to notmytheme-child instead of notmytheme.

My current enqueue script is like so:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 999 );
function my_theme_enqueue_styles() {
    $parent_style = 'notmytheme-style';

    wp_enqueue_style( $parent_style,
                        get_template_directory_uri() . '/style.css',
                        array(),
                        '1.0.9' );

    wp_enqueue_style( 'child-style',
                        get_stylesheet_directory_uri() . '/style.css',
                        array( $parent_style ),
                        '18.08.07',
                        'all' );
}

Adjusting the priority changes the position of where the css are loaded, and also which directory get_template_directory_uri() points to.

EDIT/SOLUTION

My codes are now:

add_action( 'wp_enqueue_scripts', 'my_enqueue_child', 999 );
function my_enqueue_child() {   
    wp_dequeue_style( 'notmytheme-style' );
    wp_enqueue_style( 'parent-style',
                        get_template_directory_uri() . '/style.css',
                        array(),
                        '1.0.9' );

    wp_enqueue_style( 'child-style',
                        get_stylesheet_directory_uri() . '/style.css',
                        array( 'parent-style' ),
                        '18.08.07',
                        'all' );
}

Answer 1

It's very common for themes to enqueue their stylesheet like this:

wp_enqueue_style( 'notmytheme-style', get_stylesheet_uri() );

When you activate a child theme for a theme that does this, get_stylesheet_uri() becomes the child theme's stylesheet URL. This means that the parent theme will enqueue the child theme's stylesheet (with notmytheme-style as the ID), but not it's own stylesheet.

That's where this would be coming from:

<link rel='stylesheet' id='notmytheme-style-css'  href='http://localhost/mywp/wp-content/themes/notmytheme-child/style.css?ver=1.0.9' type='text/css' media='all' />

It's the parent theme's ID with the child theme's URL.

The issue with your code is that you're using the same handle (notmytheme-style) to enqueue the parent theme stylesheet as the parent theme is using the load the child theme's stylesheet. When you do this it will be ignored and enqueue the first version defined. This is why changing the priority affected the result. Whichever notmytheme-style is defined first is loaded.

So the proper way to enqueue the CSS in this circumstance would be to not enqueue the child theme stylesheet, and enqueue the parent theme's stylesheet with a different handle and higher priority (lower number):

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 9 );
function my_theme_enqueue_styles() {
    $parent_style = 'notmytheme-parent-style'; // New handle.

    wp_enqueue_style( $parent_style,
                        get_template_directory_uri() . '/style.css',
                        array(),
                        '1.0.9' );
}

This does mean that your child theme stylesheet will be using the version number of the parent theme. This could be avoided by instead dequeuing the parent theme's original style and re-enqueuing it:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 999 );
function my_theme_enqueue_styles() {
    $parent_style = 'notmytheme-style';

    wp_dequeue_style( $parent_style );
    wp_enqueue_style( $parent_style,
                        get_template_directory_uri() . '/style.css',
                        array(),
                        '1.0.9' );

    wp_enqueue_style( 'child-style',
                        get_stylesheet_directory_uri() . '/style.css',
                        array( $parent_style ),
                        '18.08.07',
                        'all' );
}

Answer 2

try enqueuing styles ( take care of dependencies as well ) in the order of the parent theme

Make sure your child theme have necessary files ( index.php, functions.php ) and the above code goes inside functions.php file. Usually your code should work.

Just some modifications, see if this works

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parent_style = 'notmytheme-style';

    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 ) );
}

make sure your index.php file have necessary headers

/*
 Theme Name:   Child Theme Name
 Theme URI:    
 Description:  
 Author:       
 Author URI:   
 Template:     notmytheme
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

Answer 3

Please use get_stylesheet_directory_uri() instead of get_template_directory_uri() when you have to enqueue stylesheet form the child theme. Thanks!