I'm working on converting a code template (html, css, js) into a Wordpress Theme. This wordpress theme is not a child theme. For the home page (front-page.php file) the enqueues of stylesheets and javascript worked, but in another specific page (room.php file) it needs it own stylesheets and javascript for it, it doesn't work. Here's my main function in my functions.php file that enqueues scripts and stylesheets :

// Styles

    // room.php_Styles
wp_enqueue_style( 'animate', get_template_directory_uri() . '/css/animate.css', array(), '1.0');
wp_enqueue_style( 'composent', get_template_directory_uri() . '/css/component.css', array(), '1.0' );
wp_enqueue_style( 'defaut', get_template_directory_uri() . '/css/default.css', array(), '1.0');
    // front-page.php_Styles
wp_enqueue_style( 'all', get_template_directory_uri() . '/css/all.css', array(), '1.0' );       
wp_enqueue_style( 'normal', get_template_directory_uri() . '/css/normalize.css', array(), '1.0' );
wp_enqueue_style( 'shortcuticon', get_template_directory_uri() . '/favicon.ico', array(), '1.0');   
wp_enqueue_style( 'demonstration', get_template_directory_uri() . '/css/demo.css', array(), '1.0');


// Scripts
    // front-page.php_Scripts
wp_enqueue_script( 'anime', get_template_directory_uri() . '/js/anime.min.js', array(), '1.0', true );
wp_enqueue_script( 'imagesload', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array(),'1.0', true );
wp_enqueue_script( 'main', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );
wp_enqueue_script( 'popper', '/[email protected]/dist/js/shepherd.js', array(), '1.0', true );
    // room-page.php_Scripts
wp_enqueue_script( 'wall', get_template_directory_uri() . '/js/wallgallery.js', array(), '1.0', true );
wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/modernizr.custom.js', array(),'1.0', true );
wp_enqueue_script( 'ajax', '.8.3/jquery.min.js', array(), '1.0', true );

add_action( 'wp_enqueue_scripts', 'enqueue_theme_assets' );

My specific page here is room.php and by comparing the runing of the html template locally with that of the wordpress theme I deduced that there are only certain stylesheets that runs in the room.php and the anothers not. Maybe it's a problem in ORDER or DEPENDENCIES of the wp_enqueue_script()/wp_enqueue_style() functions.

I'm working on converting a code template (html, css, js) into a Wordpress Theme. This wordpress theme is not a child theme. For the home page (front-page.php file) the enqueues of stylesheets and javascript worked, but in another specific page (room.php file) it needs it own stylesheets and javascript for it, it doesn't work. Here's my main function in my functions.php file that enqueues scripts and stylesheets :

// Styles

    // room.php_Styles
wp_enqueue_style( 'animate', get_template_directory_uri() . '/css/animate.css', array(), '1.0');
wp_enqueue_style( 'composent', get_template_directory_uri() . '/css/component.css', array(), '1.0' );
wp_enqueue_style( 'defaut', get_template_directory_uri() . '/css/default.css', array(), '1.0');
    // front-page.php_Styles
wp_enqueue_style( 'all', get_template_directory_uri() . '/css/all.css', array(), '1.0' );       
wp_enqueue_style( 'normal', get_template_directory_uri() . '/css/normalize.css', array(), '1.0' );
wp_enqueue_style( 'shortcuticon', get_template_directory_uri() . '/favicon.ico', array(), '1.0');   
wp_enqueue_style( 'demonstration', get_template_directory_uri() . '/css/demo.css', array(), '1.0');


// Scripts
    // front-page.php_Scripts
wp_enqueue_script( 'anime', get_template_directory_uri() . '/js/anime.min.js', array(), '1.0', true );
wp_enqueue_script( 'imagesload', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array(),'1.0', true );
wp_enqueue_script( 'main', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );
wp_enqueue_script( 'popper', 'https://cdn.jsdelivr/npm/[email protected]/dist/js/shepherd.js', array(), '1.0', true );
    // room-page.php_Scripts
wp_enqueue_script( 'wall', get_template_directory_uri() . '/js/wallgallery.js', array(), '1.0', true );
wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/modernizr.custom.js', array(),'1.0', true );
wp_enqueue_script( 'ajax', 'http://ajax.googleapis/ajax/libs/jquery/1.8.3/jquery.min.js', array(), '1.0', true );

add_action( 'wp_enqueue_scripts', 'enqueue_theme_assets' );

My specific page here is room.php and by comparing the runing of the html template locally with that of the wordpress theme I deduced that there are only certain stylesheets that runs in the room.php and the anothers not. Maybe it's a problem in ORDER or DEPENDENCIES of the wp_enqueue_script()/wp_enqueue_style() functions.

• php
• theme-development
• javascript
• templates
• wp-enqueue-style

• When you check the source code, is it loading them all? From what you've posted above there's no conditional loading of scripts. You've commented what templates they pertain to, but they should all be loading. – Tony Djukic Commented May 9, 2020 at 4:16
• In response to your comment, regarding the conditional loading of scripts, I do not know if it should be taken into consideration or not. – Driss Elk Commented May 9, 2020 at 20:51

1 Answer 1

Driss,

I tend to break up css and javascript that's specific to a template into files specifically for that template - that way if it's not needed on every page, I'm not loading it and thus that allows me to keep my main.js and style.css smaller. Here's how I normally do it:

if( is_page_template( 'room.php' ) ) {
    //Styles
    wp_enqueue_style( 'room-animate', get_stylesheet_directory_uri() . '/css/animate.css', array(), '1.0');
    wp_enqueue_style( 'room-composent', get_stylesheet_directory_uri() . '/css/component.css', array(), '1.0' );
    wp_enqueue_style( 'room-defaut', get_stylesheet_directory_uri() . '/css/default.css', array(), '1.0');
    //Scripts
    wp_enqueue_script( 'room-wall', get_stylesheet_directory_uri() . '/js/wallgallery.js', array( 'jquery' ), '1.0', true );
    wp_enqueue_script( 'room-custom', get_stylesheet_directory_uri()() . '/js/modernizr.custom.js', array( 'jquery' ),'1.0', true );
    //You don't need to call jQuery again, WP does that for you.
    //wp_enqueue_script( 'ajax', 'http://ajax.googleapis/ajax/libs/jquery/1.8.3/jquery.min.js', array(), '1.0', true );
}

Important note: if your template isn't in the theme's main directory, make sure your condition includes the directory it's in. For example, if you have your room.php template in a subdirectory you'd use this instead:

if( is_page_template( 'templates/room.php' ) ) { 

Try this method and once done, check the head and footer using developer tools to ensure the styles and scripts are loading. I commented out jQuery because WP is already loading jQuery and loading it twice will cause issues. You could de-enqueue WP's jQuery and enqueue your older version, but that could potentially cause a series of other WP features to stop working.

If the styles and scripts are loading and you're still having issues, those issues may be with the javascript itself.

Also, for this specific use case you're asking about get_template_directory_uri() and get_stylesheet_directory_uri should be interchangeable.