0

If I enqueue my scripts selectively, for instance I have a slider I only want to load on homepage, which is activated in main-js, e.g:

wp_enqueue_script( 'main-js' );
if ( is_front_page() ) {    
  wp_enqueue_script( 'slider' );
}

What is then the best way to do this? because all my jquery is in main-js and is applied to every page, so the call to activate the slider (e.g. $('#slider').slider();) only applies to homepage?

Hopefully that makes sense and appreciate if anyone could explain best way to do this.

UPDATE:

So in functions.php I have:

// Hook in function with javascript files using the wp_enqueue_scripts hook 
add_action( 'wp_enqueue_scripts', 'load_javascript_files' );

// Register javascript files
function load_javascript_files() {

wp_register_script( 'slider', get_template_directory_uri() . '/js/slider.js', array('jquery'), '', true );
wp_register_script( 'main-js', get_template_directory_uri() . '/js/main.js', array('jquery'), '', true );

wp_enqueue_script( 'main-js' );
if ( is_front_page() ) {  
  wp_enqueue_script( 'slider' );
}

}

And main.js has generic code, e.g:

jQuery(document).ready(function($){

  //activate slider
  $('#slider').slider();  

    // scroll body to 0px on click
    $('a[href=#top]').click(function () {
        $('html, body').animate({
            scrollTop: 0
        }, 'slow');
        return false;
    });

    //add opacity to linked images
    $("a img").hover(function(){
       $(this).stop().animate({"opacity": 0.7}, 200);
       },function(){
       $(this).stop().animate({"opacity": 1}, 300);
    });
  });

So I need the slider activation only to apply to the homepage.

  • Where in your Theme is the enqueue code? Is it in functions.php? If not, then where? And is what you've included in your question the entire relevant code? – Chip Bennett Mar 27 '13 at 13:59
  • Yes that's correct, it's in functions.php - have updated question. – vonholmes Mar 27 '13 at 14:16
  • Please check both instances of your code. You switch which of the the main-js and slider enqueue calls is wrapped in the is_front_page() conditional. Which one is correct? – Chip Bennett Mar 27 '13 at 15:10
  • woops, mistyped, have updated – vonholmes Mar 27 '13 at 15:16
1

If you're only enqueueing scripts when they're needed, you can check in JS if the plugin's namespace exists before trying to use it:

if( $.fn.slider ) {
    $('#slider').slider();
}

or another option is to pass some script vars via wp_localize_script:

$wpa_script_data = array(
    'is_front_page' => is_front_page(),
    'slider_options' => array(
        'speed' => 6000
    )
);

wp_localize_script(
    'main-js',
    'wpa_vars',
    $wpa_script_data
);

then in js:

if( wpa_vars.is_front_page ) {
    $('#slider').slider({
        'speed' : wpa_vars.slider_options.speed
    });
}
| improve this answer | |
  • Great thanks! This is what I have been looking for. Checking the plugins namespace works great. – vonholmes Mar 27 '13 at 15:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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