WordPress theme wp_enqueue_style() doesn't work after uploading it

Question

I have made a new theme for a WordPress site. I used is_page(array('')) to load certain stylesheets for my child sites. When I tried to upload it my function.php only loaded the files that I added to all of my sites (like style.css, header.css, etc.) Here is my whole function.php, what do you think where is the problem?

<?php

function load_main_stylesheet() {

    wp_register_style('style', get_template_directory_uri() . '/style.css', array(), 12, false, 'all');
    wp_enqueue_style('style');

    wp_register_style('stylesheet', get_template_directory_uri() . '/assets/css/header.css', array(), 11, false, 'all');
    wp_enqueue_style('stylesheet');
}
add_action('wp_enqueue_scripts', 'load_main_stylesheet');


function load_certain_stylesheet() {
    wp_register_style('page', get_template_directory_uri() . '/assets/css/page.css', array(), 2, false, 'all');

    wp_register_style('product_css', get_template_directory_uri() . '/assets/css/product.css', array(), 8, false, 'all');

    wp_register_style('sub-category_css', get_template_directory_uri() . '/assets/css/sub-category.css', array(), 5, false, 'all');

    wp_register_style('main-category_css', get_template_directory_uri() . '/assets/css/main-category.css', array(), 9, false, 'all');

    wp_register_style('front-page_css', get_template_directory_uri() . '/assets/css/front-page.css', array(), 11, false, 'all');
}
add_action('init', 'load_certain_stylesheet');


function enque_certain_stylesheet() {

    if (is_page(array('who-we-are'))) {
        wp_enqueue_style('page');
    }

    if (is_page(array('product'))) {
        wp_enqueue_style('product_css');
    }

    if (is_page(array('sub-category'))) {
        wp_enqueue_style('sub-category_css');
    }

    if (is_page(array('main-category'))) {
        wp_enqueue_style('main-category_css');
    }

    if (is_page(array('home'))) {
        wp_enqueue_style('front-page_css');
    }
}
add_action('wp_enqueue_scripts', 'enque_certain_stylesheet');


function inclue_font() {

    wp_register_style('montserrat', '<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">', array(), false, 'all');
    wp_enqueue_style('montserrat');
}
add_action('wp_enqueue_scripts', 'inclue_font');


function inclue_jquery() {

    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', get_template_directory_uri() . '/assets/js/jquery-3.5.1.min.js', '', 1, true);
    add_action('wp_enqueue_scripts', 'jquery');
}
add_action('wp_enqueue_scripts', 'inclue_jquery');



function load_js() {

    wp_register_script('script', get_template_directory_uri() . '/assets/js/script.js', '', 8, true);
    wp_enqueue_script('script');

    wp_register_script('header', get_template_directory_uri() . '/assets/js/header.js', '', 1, true);
    wp_enqueue_script('header');
}
add_action('wp_enqueue_scripts', 'load_js');



function load_certain_js() {

    wp_register_script('product_js', get_template_directory_uri() . '/assets/js/product.js', '', 9, true);

    wp_register_script('sub-category_js', get_template_directory_uri() . '/assets/js/sub-category.js', '', 9, true);

    wp_register_script('main-category_js', get_template_directory_uri() . '/assets/js/main-category.js', '', 10, true);

    wp_register_script('autocomplete_js', get_template_directory_uri() . '/assets/js/autocomplete.js', '', 11, true);
}
add_action('init', 'load_certain_js');


function enque_certain_js() {

    if (is_page(array('product'))) {
        wp_enqueue_script('product_js');
    }

    if (is_page(array('sub-category'))) {
        wp_enqueue_script('sub-category_js');
    }

    if (is_page(array('main-category'))) {
        wp_enqueue_script('main-category_js');
    }

    if (is_page(array('home'))) {
        wp_enqueue_script('autocomplete_js');
    }
}
add_action('wp_enqueue_scripts', 'enque_certain_js');




add_theme_support('menus');

add_theme_support('post-thumbnails');

function load_menus() {

    $locations = array(
        'header'  => __( 'Header Menu', 'theme' ),
        'sidenav' => __( 'Sidenav Menu', 'theme' ),
        'mobile'   => __( 'Mobile Menu', 'theme' ),
        'footer'   => __( 'Footer Menu', 'theme' )
    );

    register_nav_menus( $locations );
}

add_action( 'init', 'load_menus' );


function custom_logo_setup() {
    $defaults = array(
    'height'      => 100,
    'width'       => 400,
    'flex-height' => true,
    'flex-width'  => true,
    'header-text' => array( 'site-title', 'site-description' ),
    );
    add_theme_support( 'custom-logo', $defaults );
   }
   add_action( 'after_setup_theme', 'custom_logo_setup' );


add_image_size('smallest', 300, 300, true);
add_image_size('largest', 800, 800, true);

?>

The pages names are accurate I rechecked them.

Answer 1

Stylesheets and scripts must be registered and/or enqueued using the wp_enqueue_scripts hook, but you are trying to load them using the init hook which is too early in the order of the WP actions.

Therefore to change your code to ensure the conditional enqueueing is done using add_action('wp_enqueue_scripts'...)

There are a few ways to change this:

1. Register and conditionally enqueue the styles/scripts in the same function - As you seem to be calling both load_certain_stylesheet and enque_certain_stylesheet anyway, you could simply add the conditional enqueueing into the load_certain_stylesheet function (and similarly for the JS functions), e.g.

function load_certain_stylesheet() {

    /* register all your stylesheets, e.g.*/
    wp_register_style('page', get_template_directory_uri() . '/assets/css/page.css', array(), 2, false, 'all'); 

    /* Now conditionally load your stylesheets after they are registered, e.g.: */
    if (is_page(array('who-we-are'))) {
        wp_enqueue_style('page');
    }
}
add_action('wp_enqueue_scripts', 'load_certain_stylesheet');

---

2. Call the separate functions in the wp_enqueue_scripts hook, and set the order to execture them - If there is a reason that you want to register and enqueue them in separate functions, then you can change add_action for load_certain_stylesheet and load_certain_js from this:

add_action('init', 'load_certain_stylesheet');
add_action('init', 'load_certain_js');

to this:

add_action('wp_enqueue_scripts', 'load_certain_stylesheet');
add_action('wp_enqueue_scripts', 'load_certain_js');

This could now cause a problem with the order in which the functions get called in the wp_enqueue_scripts hook, e.g. we need to ensure that the load_certain_stylesheetis executed beforeenque_certain_stylesheet`.

We can do this by using the priority argument to the add_action function. This determines the order in which the different calls to add_action get executed, with the higher the number the lower the priority, so the later it gets called.

This means you can keep your functions exactly as they are, you just need to change the calls to add_action as follows:

add_action('wp_enqueue_scripts', 'load_main_stylesheet'); // default priority is 10

// Use a lower priority (i.e. a higher number) than the default which is 10, e.g.
add_action('wp_enqueue_scripts', 'load_certain_stylesheet', 15);  

// Use a lower priority (a higher number) than load_certain_stylesheet to call this after, e.g.
add_action('wp_enqueue_scripts', 'enque_certain_stylesheet', 20);

And similarly for the JS scripts

// Use a lower priority (i.e. a higher number) than the default which is 10, e.g.
add_action('wp_enqueue_scripts', 'load_certain_js');

// Use a lower priority (a higher number) than load_certain_js to call this after it, e.g.
add_action('wp_enqueue_scripts', 'enque_certain_js');

---

3. Call the separate functions in the wp_enqueue_scripts hook and use the dependencies parameter when registering/enqueueing scripts and styles - this makes sure that the style/script doesn't get loaded until after the dependencies.

For example if we take the following 2 stylesheets as an example (it doesn't matter that they are in separate functions, I've just put them together here to make it easier to explain)

//We register & enqueue your main stylesheet using the handle "style"
wp_register_style('style', get_template_directory_uri() . '/style.css', array(), 12, false, 'all');

// Now we can use that handle as a dependency when registering pages.css, 
//which tells WP to only load this css AFTER loading style.css
wp_register_style('page', get_template_directory_uri() . '/assets/css/page.css', array('style'), 2, false, 'all');

You have to add the dependency (or list of dependencies) to each individual call to wp_register_style, wp_enqueue_style, wp_register_script and wp_enqueue_script if that style/script cannot be loaded before another.

I'm not sure this is necessary in your situation - either of the above options should work - but you can find out more about using dependencies in this answer here: Should you specify dependencies in both wp_register_script/style and wp_enqueue_script/style?

Answer 2

When registering and enqueueing files, both action need to be executed from the same function.

/**
* Theme scripts
*/
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if ( ! is_admin() ) {

    /**
    * Register then enqueue jquery js
    *
    * Check if CDN's url is valid, if not return fallback
    */
    $test_jquery_js = @fopen( 'https://code.jquery.com/jquery-3.5.1.min.js', 'r' );
    if ( $test_jquery_js !== false ) {
      wp_register_script( 'jquery_js', '//code.jquery.com/jquery-3.5.1.min.js' );
    } else {
      wp_register_script( 'jquery_js', get_template_directory_uri() . '/assets/js/jquery-3.5.1.min.js', array( 'bootstrap_bundle_js' ) );
    };
    if ( is_page( array( 'who-we-are' ) ) ) {
      wp_enqueue_script( 'jquery_js' );
    };
  };
};

More about wp_enqueue_scripts(); @ https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/
More about wp_register_script(); @ https://developer.wordpress.org/reference/hooks/wp_register_script/