1

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.net/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.com/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.

Improve this question
2
  • 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
    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
    May 9, 2020 at 20:51

1 Answer 1

Reset to default
0

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.com/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.

Improve this answer
3
  • I still have the problem, i think it's a problem in the order of enqueues of stylesheets. I'm going to inspect the code and and I will come back to you.
    – Driss Elk
    May 9, 2020 at 21:21
  • The scripts SHOULD be loading. Once you verify they are there, check if there’s any errors.
    – Tony Djukic
    May 10, 2020 at 0:51
  • Just a thought, but I believe the modernizr scripting is supposed to go in the <head> tag, in that instance change your final argument, after the version number to false.
    – Tony Djukic
    May 10, 2020 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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