1

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' );
}
  • 2
    That is what get_template_directory_uri() does, it retrieve the template directory of a theme, or in other words, the parent theme For child themes, you should be using get_stylesheet_directory_uri() which retrieves the stylesheet directory path, which is used by child themes – Dharmishtha Patel Aug 7 '18 at 6:42
  • Are notmytheme and notmytheme-style the actual values in your code? Or examples? What's your parent theme's actual name? How does the parent theme enqueue its stylesheet? – Jacob Peattie Aug 7 '18 at 6:48
5

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' );
}
  • Unfortunately, I was unable to solve with solutions, no matter what I do, the parent style will always point to the child theme folder (even if I do not enqueue anything). But I found this line in the parent theme: wp_enqueue_style( 'notmytheme-style', get_stylesheet_uri(), array(), '1.0.9' ); Am I right to assume the usage of get_stylesheet_uri in the parent theme is what causes this behaviour? – Mr J Wolf Aug 8 '18 at 1:31
  • Did you read any of my answer? That's what I was explaining... – Jacob Peattie Aug 8 '18 at 1:32
  • Haha, sorry, I skimmed through the first few lines and went straight to the body of your reply. – Mr J Wolf Aug 8 '18 at 1:47
0

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
*/
-1

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

  • dude, read question properly. Other developers/people will downvote your answer, if you answer like this. – maverick Aug 7 '18 at 6:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.