WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Theme: Twenty Eleven] wp_enqueue_script problems (12 posts)

  1. Maracas1970
    Member
    Posted 2 years ago #

    Hi all

    I am having kittens trying to figure this out. And i have literally been at it two full days, and am genuinely surprised i have the laptop in my hands, and not in pieces ;[_

    Anyway, a few details before i move onward.
    my site: http://www.gotodesigns.co.uk is using a child theme of the TwentyEleven theme.

    I have a few custom template pages, nothing special really. The problem is i`m having a hard time stretching my head around where to call my jQuery from and where in my child theme to put the code, i have a couple of scripts im trying to run here on my <a href="http://www.gotodesigns.co.uk/contact/">contact page</a>

    First one is a jQuery navigation strip that is supposed to drop down on hover, here is a link to the <a href="http://www.the-puzzle.co.il/slipslap/">original demo website</a>

    And another one is a simple hover sliding box/caption hover plugin from <a href="http://buildinternet.com/project/mosaic/1.0/">this website</a>

    I will start by linking to my header file just to show you whats going on in there: http://pastebin.com/6YTjk9Zz

    Then my functions.php: http://pastebin.com/d28B0878

    As you can see, not much going on here, as the child's function.php overrides the parent. Only needed to tweak the excerpt thus far..

    Now for the CSS that relates to each plugin.

    Firstly the navigation plugin: http://pastebin.com/a7H1j64U

    Now the hover plugin: http://pastebin.com/4qgCmT3H

    These styles are pasted directly in my main css file, so you can obviously view the entire stylesheet from my website should the need arise.

    Now i have used the contact me page on my site to test out these scripts, so all the html resides within that page, so you can firebug that.

    Now, am i right in saying it is better to call the main jquery from http://ajax.googleapis.com. Ant THEN underneath call the plugins individually from the child themes js folder? As opposed to including the paths in the header, as it`s a child theme.

    I have tried these:

    <?php wp_enqueue_script('slipSlap.js', 'wp-content/themes/twentyeleven-child/js/slipSlap.js', array('jquery')); ?>

    <script type="text/javascript"src="<?php bloginfo("template_url"); ?>/js/slipSlap.js"></script>

    In the header, with wp_enqueue_script('jquery'); before the head section in the header, as many blog posts and articles seem to relate to. But again to no avail.

    So how exactly is one "supposed" to do this from within a child theme? I come from a background where i made a few static websites and always the jQuery worked when called. I know WordPress does things differently, and i`m sure for a very good reason, it just seems convoluted to the newbie ;-)

    On my last attempt at including the jQuery in functions.php (as can be seen in the second pastebin example)i noticed that the navigation menu for the jQuery plugin i mentioned earlier seems to be trying to call some script, as when you hover over each link the bottom of the link areas stay orange, and doesn't reset until you refresh the page.

    I notice also that the calls to the plugin are located in the footer area when i view the source, is this correct and why please?

    Another point is do i need to add the jQuery to function calls that exist already with '$' for the jQuery noConflict mode, or once i have it running am i good to go without changing it all the time?

    So finally, do i need to call anything in my header.php related to jQuery, remembering still that this is a child theme. Or do i do all of it from functions.php and only include the script i want on my header.php, for example:

    <?php wp_head(); ?>
    </head>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery('#slipSlap').slipSlap();
    });
    </script>

    Sorry to ask so many questions in one sitting, but i really would like to make sure i have all the angles covered.

    Many kind regards

    Marcus

  2. RedEarRyan
    Member
    Posted 2 years ago #

    Anytime you use wp_enqueue_script(), make sure you use it within an action.

    BEFORE:
    if( !is_admin()){
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '1.7.1');
    wp_enqueue_script('jquery');
    }

    AFTER:
    add_action('wp_head', 'my_register_jquery_function');
    function my_register_jquery_function() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '1.7.1');
    wp_enqueue_script('jquery');
    }

    This issue caused me all sorts of headache a couple months ago. Hope that helps...

    Cheers!
    Ryan

  3. Maracas1970
    Member
    Posted 2 years ago #

    Thanks Ryan.

    So as I understand it from your post. I add the 'after' script you posted in functions.php in my child theme. Seems straight forward enough.
    Now after this what do I need to include in functions.php to call my individual plug ins, or do these need to be called in the header. And as the plugins I've downloaded reside in my child themed js folder, do I need to call them with bloginfo or stylesheet or a combination, an example would be really handy.

    Also I watched a Chris coyier video lastnight where he placed the calls to plugins in the footer, is this something I need to do?

    Most of my confusion is arising from where to actually place the scripts and as its a child theme where to call them from.

    I will try your example in the meantime and see if it clears anything up.

    Thanks for helping.

    Marcus

  4. Maracas1970
    Member
    Posted 2 years ago #

    For some reason i don't see the edit button on the post.

    As an aside, does it or should it matter that some scripts dont have the "jQuery prefix" some of my scripts are just scriptname.js
    as opposed to jquery.scriptname.js, can this cause conflicts?

    Thanks

  5. RedEarRyan
    Member
    Posted 2 years ago #

    Hi Marcus,

    Sorry I wasn't very clear in my original reply. Replace the 'before' piece of code with the 'after' piece of code.

    I'm not sure what you mean regarding plugins. All of your plugins will still be handled through the wp-admin backend - as long as your theme still has the wp_head() and wp_footer() functions and they're in the right place.

    If you're talking about using your functions.php to call/include scripts, do the exact same thing as the "after" piece of code (except you probably don't need to wp_deregister_script() for most). You can add the code into your header.php file to include it, but it's much easier to run into conflicts and as a wp nerd I am obliged to at least say it's considered "bad coding practice" to do that.

    wp_enqueue_script(
      'Script' // Unique handle for the script
      , get_stylesheet_directory_uri() . '/js_folder/script.js'
      , array('jquery') /* This is an array of handles for scripts that need to be included before we can enqueue this script i.e. slipslap needs jquery to run, hence slipslap will have array('jquery') as a dependency */
      , $ver // version of the script
      , $in_footer /* if set to true, it will call this script in wp_footer(). This is probably the exact same thing Chris Coyier was doing - not necessary but it can help optimize page load times or at least the appearance of page load times. */
    );

    Regarding the "jQuery prefix", it does not matter. As long as you enqueue the script with its dependencies and refer to those dependencies by their handle - for example array('jquery') - wordpress will know that it needs to include the jquery script first. /* run on sentence - will fix later */

    Hope that helps... cheers!

  6. Maracas1970
    Member
    Posted 2 years ago #

    Thanks for your help and time RedEarRyan, very appreciated.

    One thing though, i actually removed all trace of calls to jQuery i could find, and viewed my source code only to see that it is being pulled from the parent theme of my child, specifically from here: http://www.gotodesigns.co.uk/wp-includes/js/jquery/jquery.js?ver=1.7.1

    And when i go into the console and type in "jQuery' it shows up with function() So im assuming its actually running. When i enqueued the SlipSlap.js with aforementioned method, it was not found. ReferenceError: slipSlap is not defined

    Now, am i right in saying i only need to rename the stylesheet link in the child theme so it refers to the childs folder location and not the parent? Theres going to be no double loading issues or anything?

    I just cannot for the life of me get one bit of jquery to run. I have tried the method you described as well..

    Shall i post some pastebin code up of my header & functions pages. maybe you can see something i cant.

    Thanks again

    Marcus

  7. Maracas1970
    Member
    Posted 2 years ago #

    Seem to have it working now, finally!!

    Neglected to add the add_action('wp_enqueue_scripts', 'my_register_jquery_function');

    I will try and repeat the process with a couple more plugins to be sure, and report back and hopefully mark the topic as resolved!

    Many thanks for your help RedEarRyan

    Marcus

  8. Maracas1970
    Member
    Posted 2 years ago #

    I'm going to post the code here actually, just incase anyone else stumbles on this post in the near future and it can be of help.

    Adding this to my child themes functions.php worked:

    add_action('wp_head', 'my_register_jquery_function');
    function my_register_jquery_function() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '1.7.1');
    wp_enqueue_script('jquery');
    }
    add_action('wp_enqueue_scripts', 'my_register_jquery_function');
    
    wp_enqueue_script(
      'slipSlap'
      , get_stylesheet_directory_uri() . '/js/slipSlap.js'
      , array('jquery')
    );
  9. RedEarRyan
    Member
    Posted 2 years ago #

    Hi Marcus,

    Glad you have it working. I have to apologize, I did it wrong the first example I gave you! Yikes!

    The action I gave you to hook into was wrong:
    add_action('wp_head', 'my_register_jquery_function');

    That's why when you put this in:
    add_action('wp_enqueue_scripts', 'my_register_jquery_function');
    it started working. Aha! Right hook!

    Well done. See? You didn't need anyone's help. Here's how it should look in total then:

    function my_register_jquery_function() {
      wp_deregister_script('jquery');
      wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '1.7.1');
      wp_enqueue_script('jquery');
    
      wp_enqueue_script(
        'slipSlap'
        , get_stylesheet_directory_uri() . '/js/slipSlap.js'
        , array('jquery')
      );
    }
    add_action('wp_enqueue_scripts', 'my_register_jquery_function');

    You can put all of the scripts you want to enqueue inside of this one function like I did for you with slipslap.

    Lesson to me - do not do from memory. Sorry for the confusion I might have given anyone!

    Cheers,
    Ryan

  10. Maracas1970
    Member
    Posted 2 years ago #

    No problem Ryan

    Main thing is its working and im a happy chappy. And anyone else finding the thread will have a clear example to work from. Thanks Ryan!

    Marcus

  11. renato6
    Member
    Posted 2 years ago #

    Hello,
    i find this post looking for a link with a problem like this one.
    I followed your conversation and i ended up adding the following function to my child-theme file: functions.php

    function my_register_jquery_function() {
      wp_deregister_script('jquery');
      wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '1.7.1');
      wp_enqueue_script('jquery');
    
      wp_enqueue_script(
        'slidingform'
        , get_stylesheet_directory_uri() . '/js/slidingform.js'
        , array('jquery')
      );
    }
    add_action('wp_enqueue_scripts', 'my_register_jquery_function');

    the truth is that i can't make it work. i have the file 'slidingform.js' in both parent and child path in a folder called 'js' but it won't activate.

    Could it because in the functions.php, on the top i have the following function:

    function sout_my_init() {
    	if (!is_admin()) {
    		wp_deregister_script('jquery');
    		wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', false, '1.7.1');
    		wp_enqueue_script('jquery');
    	}
    }
    add_action('init', 'sout_my_init');

    Help please!

  12. javhy
    Member
    Posted 1 year ago #

    You have solve my BIG issue with the same case. THANKS!!!!

Topic Closed

This topic has been closed to new replies.

About this Topic