WordPress.org

Ready to get started?Download WordPress

Forums

Javascript.. the proper way? (4 posts)

  1. op1001
    Member
    Posted 1 year ago #

    Okay, Yes I am new, and I need some assitance and defining the proper way to add javascript .js files..

    It seems both ways do the same thing.. but what is the proper method?

    I Have read many tutorials online.. and got a bit confused..

    wp_enqueue_script( 'easing', get_template_directory_uri() . '/js/jquery.easing.1.3.js', array('jquery') );
    wp_enqueue_script( 'common', get_template_directory_uri() . '/js/jquery.common-min.js',array('jquery') );
    wp_enqueue_script( 'sequence', get_template_directory_uri().'/js/sequence.jquery-min.js', array('jquery') );
    
    wp_enqueue_script( 'quicksand', get_template_directory_uri().'/js/jquery.quicksand.js', array('jquery'));
    
    wp_enqueue_script( 'flex', get_template_directory_uri().'/js/jquery.flexslider-min.js', array('jquery') );
    wp_enqueue_script( 'pretty', get_template_directory_uri().'/js/jquery.prettyPhoto.js', array('jquery'));
    wp_enqueue_script( 'carousel', get_template_directory_uri().'/js/jquery.jcarousel.min.js', array('jquery') );
    
    wp_enqueue_script( 'tipsy', get_template_directory_uri().'/js/jquery.tipsy.js', array('jquery'), '1.0');
    
    }
    add_action( 'wp_enqueue_scripts', 'scripts_basic' );  
    
    or
    
    wp_register_script( 'easing', get_template_directory_uri() . '/js/jquery.easing.1.3.js', array('jquery') );
    wp_register_script( 'common', get_template_directory_uri() . '/js/jquery.common-min.js',array('jquery') );
    wp_register_script( 'sequence', get_template_directory_uri().'/js/sequence.jquery-min.js', array('jquery') );
    
    wp_register_script( 'quicksand', get_template_directory_uri().'/js/jquery.quicksand.js', array('jquery'));
    
    wp_register_script( 'flex', get_template_directory_uri().'/js/jquery.flexslider-min.js', array('jquery') );
    wp_register_script( 'pretty', get_template_directory_uri().'/js/jquery.prettyPhoto.js', array('jquery'));
    wp_register_script( 'carousel', get_template_directory_uri().'/js/jquery.jcarousel.min.js', array('jquery') );
    
    wp_register_script( 'tipsy', get_template_directory_uri().'/js/jquery.tipsy.js', array('jquery'), '1.0');
    
    wp_enqueue_script( 'easing' );  
    
    wp_enqueue_script( 'common' );
    wp_enqueue_script( 'sequence' );
    wp_enqueue_script( 'quicksand' );  
    
    wp_enqueue_script( 'flex' );
    wp_enqueue_script( 'pretty' );
    wp_enqueue_script( 'carousel' );
    wp_enqueue_script( 'tipsy' );  
    
    }
    add_action( 'wp_enqueue_scripts', 'scripts_basic' );
  2. catacaustic
    Member
    Posted 1 year ago #

    The way that you're doing it there, both ways are fine, but if it was me I'd do it the first way because there's only one function call for each file compared to two function calls for the lower example. This is because it looks like none of the files are related or interact (apart from the requiring jQuery but that doesn't have any effect on the individual JS files).

    The big reason to use wp_register_script() before you use wp_enqueue_script() is when you have JS files that reply on other JS files. I normally have my own custom JS file that I load with all of my definitions and actions in it, but set up the wp_register_script() to require all of the other related scripts. What this does is let me wp_enqueue_script() on my single custom JS file only, and WordPress automatically loads all of the required JS files that I've specified.

  3. op1001
    Member
    Posted 1 year ago #

    Okay , I am confused, ther are so many methods and I can't seem to find a right explanation ..

    In functions.php I have the following..

    wp_register_script( 'info-caroufredsel', get_template_directory_uri() . '/js/jquery.carouFredSel-5.5.0-packed.js', array('jquery'), '5.5.0', true );
      wp_register_script( 'info-carousel-instance', get_template_directory_uri() . '/js/info-carousel-instance.js', array('info-caroufredsel'), '1.0', true );
    
      wp_register_script( 'jquery.flexslider', get_template_directory_uri().'/js/jquery.flexslider-min.js', array('jquery'), '1.7', true );
      wp_register_script( 'home-page-main-flex-slider', get_template_directory_uri().'/js/home-page-main-flex-slider.js', array('jquery.flexslider'), '1.0', true );
    
      wp_enqueue_script( 'info-carousel-instance' );
        wp_enqueue_script('home-page-main-flex-slider');

    So two scripts are getting enqueued and two are not.

    the question is

    How do I call the two scripts that are not getting engueued in my theme?

    I don't want the scripts always loading on every page if they arent' being used? you know what i mean?

    I've seen so many techniques for javascript It is confusing ... there doesn't seem to be a standard way to do it

    I've seen people add it in their headers etc etc.

  4. catacaustic
    Member
    Posted 1 year ago #

    wp_register_script() - Registeres a script file with the system, but doesn't actually include it in any page calls anywhere.

    wp_enqueue_script() - Adds the script file to the current HTML. This can be used to enqueue a registered script file or to add a new script file without needing to register it first.

    Looking at your code there, all of the JS files are being enqueued. The third parameter for wp_register_script is an array of dependancies, and this is used to that when you enqueue that scirpt it also enqueues all of the dependancies before it, saving you from havig to enqueue every single JS file. You should read up on the differences between wp_register_script() and wp_enqueue_script();

    As for adding it on aper-page basis, you can use a lot of the conditional functions that WordPress has available to check where you want it added.

    This is the standard way to do it in WordPress. I'm not sure how many other ways you've seen it done, but these two functions are the default WordPress ones and are the ones that are recommended ot use.

Topic Closed

This topic has been closed to new replies.

About this Topic