• Until now, I’ve enqueued the scripts or CSS I want to use in my functions.php. But to make the pages ‘lighter’ I’m wondering if there is a fairly elegant way to selectively load JS scripts based on -page-id or template?

    For example, if I have a shopping cart, I want a way to control the loading of that script only on specific pages… but -still- use the enqueue function.

    Yeah, I can go into the header and make ‘if/else’ statements, but that doesn’t seem ‘right’ somehow.

    In short: is there a plug-in or API which allows me to specify which scripts will be loaded based on page-id or template?

    TIA,

    —JC

Viewing 12 replies - 1 through 12 (of 12 total)
  • Why not enqueue your scripts based on a conditional like is_page() or is_category()?
    http://codex.wordpress.org/Conditional_Tags

    Thread Starter suntower

    (@suntower)

    Can you enqueue a script in a PHP template -before- or -after- get_header()? I thought they needed to be included in functions.php or in a plug-in file. Am I wrong?

    —JC

    I thought they needed to be included in functions.php

    That’s correct but you can still enqueue conditionally.

    Thread Starter suntower

    (@suntower)

    That’s correct but you can still enqueue conditionally.

    Can you give me a (brief) example?

    —JC

    Thread Starter suntower

    (@suntower)

    That’s correct but you can still enqueue conditionally.

    Pretty please? An example?

    TIA,

    —JC

    esmi

    (@esmi)

    Just use a conditional tag that suits your purposes. For example in functions.php:

    function my_scripts_method() {
    	wp_enqueue_script(
    		'custom-script',
    		get_template_directory_uri() . '/js/custom_script.js',
    		array('jquery')
    	);
    }
    if(is_page( 'Foobar' ) ) add_action('wp_enqueue_scripts', 'my_scripts_method');

    will only load custom_script.js on a page with the title “Foobar”.

    Thread Starter suntower

    (@suntower)

    Wow. Thanks for the snappy response!

    Please forgive my ignorance, but a quick follow-up: What is the advantage of the code you wrote above over:

    if(is_page( 'Foobar' ) )
      wp_enqueue_script('custom-script',get_template_directory_uri() . '/js/custom_script.js',	array('jquery')	);

    IOW: Why does one need the call to add_action() ?

    THANKS!

    —JC

    esmi

    (@esmi)

    You should always enqueue your scripts in a theme’s functions.php file – not a template file. Template files are just Not The Right Place 99.9% of the time. The add_action is needed because the my_scripts_method() function won’t run unless something calls it. wp_enqueue_scripts is a core hook specifically designed for scripts that runs very early in the page load and fires off any functions that have been added to it.

    Thread Starter suntower

    (@suntower)

    So in your example:

    if(is_page( 'Foobar' ) ) add_action('wp_enqueue_scripts', 'my_scripts_method');

    …is meant to be included in the -template- PHP file, right? And the function above (with the enqueue) is left in the functions.php file?

    For some reason, I was imagining that one could have a switch statement in the functions.php which would selectively enqueue scripts as each page loaded. Am I missing the sequence of when functions.php is loaded?

    Thanks!

    —JC

    esmi

    (@esmi)

    is meant to be included in the -template- PHP file, right?

    No. All of the code I posted just above should go in your theme’s functions.php file.

    Am I missing the sequence of when functions.php is loaded?

    functions.php is one of the very first things that WP loads on every single Post, Page or archive. Certainly the very first file from your theme. So you can use it to load all kinds of cool stuff and make that same cool stuff conditional.

    Thread Starter suntower

    (@suntower)

    That’s what I thought. But I’m still confused… So I’ll tax yer patience once more to ask again why we need the add_action() callback to my_function() just to enqueue the script.

    Why is that better than just writing:

    if(is_page( 'Foobar' ) )
      wp_enqueue_script('custom-script',get_template_directory_uri() . '/js/custom_script.js',	array('jquery')	);

    Aren’t they both functionally much the same? IOW: why is my example -bad- and yours -good-?

    Thanks again,

    —JC

    esmi

    (@esmi)

    To work properly, scripts need to be enqueued at the right time during the page load. If they’re loaded too late they may not work at all. So you need to hook them to the wp_enqueue_scripts action.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Selectively Loading Javascript files by page?’ is closed to new replies.