wp_enqueue_style conflict when using in different action hooks

Question

This is the bottom half of my child theme's functions.php.

function register_my_scripts(){
  if (is_shop() || is_product_category()){
    wp_enqueue_style( 'shop-style', get_stylesheet_directory_uri() . 
'/shop.css');
  }
  if (is_product()){
    wp_enqueue_style( 'shop-style', get_stylesheet_directory_uri() . 
'/product.css');
  }
}
add_action( 'wp_enqueue_scripts', 'register_my_scripts' );

Why is it, when I have the following code in the same file (above it), then the style enqueues in the above code block (but below on my file) stop working, even though the 'if' block still runs (I tested with "echo 'something';" and the echo ran)?

function register_my_menu() {
    register_nav_menu('left-menu', __('Left Menu'));
    register_nav_menu('right-menu', __('Right Menu'));
    wp_enqueue_style( 'shop-style', get_stylesheet_directory_uri() . 
'/shop.css');
}

But when i comment out the wp_enqueue_style in the same line, so the whole file looks like:

function register_my_menu() {
    register_nav_menu('left-menu', __('Left Menu'));
    register_nav_menu('right-menu', __('Right Menu'));
    // wp_enqueue_style( 'shop-style', get_stylesheet_directory_uri() . 
'/shop.css');
}

add_action( 'init', 'register_my_menu');

function register_my_scripts(){
  // wp_enqueue_style( 'shop-style', get_stylesheet_directory_uri() . 
'/shop.css');
  if (is_shop() || is_product_category()){
    wp_enqueue_style( 'shop-style', get_stylesheet_directory_uri() . 
'/shop.css');
  }
   if (is_product()){
    wp_enqueue_style( 'shop-style', get_stylesheet_directory_uri() . 
 '/product.css');
  }
 }
add_action( 'wp_enqueue_scripts', 'register_my_scripts' );

The enqueues in register_my_scripts() runs properly again.

This is a conflict that I have never seen anywhere, and why the hell doesn't WordPress throw some kind of error. It's hellish to debug these things.

Is there a strict version of WordPress I can get somewhere, like JavaScript's "use strict"?

The fact that they never throw any errors is sickening.

Answer 1

You can only register a single file with the handle shop-style. Once you enqueue something with that handle, subsequent calls to wp_enqueue_style with the same handle will be ignored.

Answer 2

The wp_enqueue_style() method should be used in the wp_enqueue_scripts hook, and you should not be trying to enqueue that on the init hook.

If the purpose of calling wp_enqueue_style() on the init hook is to initialize your styles, then you wish to conditionally enqueue them somewhere else later, then you should use wp_register_style() to do so.

As some suggestions for the code above:

1. It should prefix method names with the theme name since it's not namespaced.

2. Include the theme name in any translatable strings.

3. Rename the register_my_scripts to something with enqueue since it's not technically registering your scripts, but enqueuing them.

4. Rename the shop.css to match the handle you use. This makes it easier to reference when needed in the future, and in other places.

I would give something like this a try:

function sample_theme_register() {
    register_nav_menu( 'left-menu', __( 'Left Menu', 'sample-theme' ) );
    register_nav_menu( 'right-menu', __( 'Right Menu', 'sample-theme' ) );
    wp_register_style( 'sample-theme-shop', get_theme_file_uri( 'sample-theme-shop.css' );
}

add_action( 'init', 'sample_theme_register' );

function sample_theme_enqueue_scripts() {
    if ( is_shop() || is_product() || is_product_category() ) {
        wp_enqueue_style( 'sample-theme-shop' );
    }
}

add_action( 'wp_enqueue_scripts', 'sample_theme_enqueue_scripts' );