Grow your CSS skills. Land your dream job.

Register and call jQuery scripts in WordPress

  • # October 1, 2012 at 3:56 am

    Hi there

    I’ve kinda asked this question before, but have never really solved it the way I would have liked to…

    I want to register all of my jQuery scripts – in their stacking order – in my functions.php file, rather than placing then in the header.php file.

    I have the following sitting in the head of my HTML / header.php file.


    < ! -- dynamic wp head stuff loads here -- >
    < ?php wp_enqueue_script('jquery'); ?>
    < ?php wp_head(); ?>
    < ! -- dynamic wp head stuff ends here -- >
    < ! -- ie-html5-fix -- >
    < ! -- [if lt IE 9]>< ! [endif] -->
    < ! -- /ie-html5-fix -- >
    < ! -- scripts -- >


    < ! -- scripts -- >

    I’m already familiar with Chris’ method of including jQuery the right way, but that’s only including one .js file (from Google’s hosted service). But I want to include – in the following order:

    • jQuery 1.8.2
    • HTML5 Shiv
    • jQuery Lightbox (which is in a “js” folder in my theme’s root)
    • jQuery Calls (which is also in the “js” folder in my theme’s root)

    I’ve tried to use the following before (in addition to Chris’ jQuery the right way function):


    function my_jquery() {
    wp_register_style( 'jquery_calls', bloginfo('template_url') . '/js/jquery-calls.js' );
    wp_enqueue_script( 'jquery_calls' );
    }add_action('init', 'my_jquery');

    …but I’ve never gotten this to work.

    Any help would be appreciated. Ideally, I’m looking for a snippet of code…

    Thanks in advance.

    # October 1, 2012 at 4:14 am

    function load_js() {
    wp_enqueue_script( ‘myprefix_js’, bloginfo(‘template_directory’) . ‘/js/my-js.js’);
    }
    add_action(‘wp_footer’, ‘load_js’);

    This should do the trick. Worked always for me. You could change the action to ‘wp_enqueue_scripts’ (instead of wp_footer) if you want.

    For the ins and outs about this subject: http://wp.tutsplus.com/tutorials/the-ins-and-outs-of-the-enqueue-script-for-wordpress-themes-and-plugins/

    # October 1, 2012 at 4:32 am

    Hi Vermaas (and others)

    Thank you for the reply… So would this work?


    if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
    function my_jquery_enqueue() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', "http" . ($_SERVER == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js", false, null);
    wp_enqueue_script('jquery');
    }

    function load_my_scripts(){
    if (!is_admin()){
    if (is_singular() AND comments_open() AND (get_option('thread_comments') == 1)) wp_enqueue_script('comment-reply');
    wp_enqueue_script( 'jquery_lightbox', bloginfo('template_directory') . '/js/jquery.lightbox.min.js');
    wp_enqueue_script( 'jquery_calls', bloginfo('template_directory') . '/js/jquery-calls.js');
    }
    }
    add_action('get_header', 'load_my_scripts');

    Thanks in advance.

    # October 1, 2012 at 4:35 am

    Nope, won’t work, because you try to put it into get_header. That’s a wrong hook. Try wp_head (or like I prefer) wp_footer.

    That should work.

    # October 1, 2012 at 4:39 am

    Hi

    Right. So other than my incorrect hook, that should work?

    I do prefer scripts in the head rather than in the footer of sites.

    Thanks

    # October 3, 2012 at 6:23 am

    Hi

    I’ve tried tried my code listed above (and using the wp_head hook), but all I end up with is random lines of text showing the theme directory path at the very top of my page…

    Any suggestions?

    Thanks

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".