1451 posts
  • Has referred 200+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Member of the Envato Team
+12 more
kailoon Envato team says

I am not sure you guys have the same problem. I tried this, every time it gave me different results.

Using <?php wp_enqueue_script("jquery"); ?> before wp_head to call the jquery library to avoid duplication. But, sometimes it doesn’t work.

Also, I tried this var $j = jQuery.noConflict(); and using $j as shortcut for jQuery. However, sometimes it shows me “undefined variable”.

I am not a JavaScript guru, so I need some advices from you :)

54 posts
  • Has referred 500+ members
  • Has sold $750,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
GhostPool says

I’m no javascript guru either. So I’m sure someone else has a better explanation and/or solution.

I include the <?php wp_enqueue_script("jquery"); ?> as well, as this loads the jquery libraries so you don’t have to include them yourself.

When using $j = jQuery.noConflict(); you need to apply the $j variable to the code within the javascript files as well, not just the part that may be within your header or footer. Also $j = jQuery.noConflict(); should be changed for each javascript file e.g. $slider = jQuery.noConflict(); and $menus = jQuery.noConflict();.

125 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 50+ members
  • Has sold $1+ on Envato Market
  • Has collected 100+ items on Envato Market
+2 more
Eight7Teen says

I’m not a guru either, but I had this problem once and had to resort to using the following in my theme’s functions.php file to fix it:

function load_theme_scripts() {
    wp_enqueue_script('jquery', '/wp-includes/js/jquery/jquery.js', '', '', true);            
}    

add_action('init', 'load_theme_scripts');

The second set of single quotes is simply a hack to make sure that it’s loaded in the footer like I wanted it to be, because anything defined as a dependency in WordPress’ wp_default_scripts() function, will be overridden even if you use the TRUE at the end to make it load in the footer.

At any rate, by adding it into my theme’s functions.php file I was able to get it to load finally… I have no idea why it wouldn’t work before the wp_head() call, but this worked for me.

1451 posts
  • Has referred 200+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Member of the Envato Team
+12 more
kailoon Envato team says

@GhostPool: I have $j = jQuery.noConflict(); and I use the $j to replace the original $.

@Eight7Teen: I understand that for performance wise, loading js in the footer is a good option, but if we have several js plugins. What will happen? Also, my problem is actually the $j sign sometimes not working properly. It return “undefined variable” even I have no.Conflict and replace the $ sign.

125 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 50+ members
  • Has sold $1+ on Envato Market
  • Has collected 100+ items on Envato Market
+2 more
Eight7Teen says

You’d just have to make sure that they’re loaded after the wp_footer() call to make sure that jQuery was loaded first.

I guess I misunderstood your first post, I had thought you were saying that wp_enqueue_script() wasn’t loading jQuery as it should.

I’ve never bothered with using $j = jQuery.noConflict(); because the version of jQuery that’s loaded in by WP is automatically in noconflict mode. So instead, I just write all my jQuery functions like so:

(function($) {
    // Yummy jQuery stuff goes here
})(jQuery);
56 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
Mladjo says

You include JQuery above the wp_head like this:

<?php wp_enqueue_script(‘jquery’); ?>

Most important is when you call some JQuery functions you do it like this:

jQuery(document).ready(function(){ jQuery(“div.topnav ul”).superfish({ animation: {opacity:’show’,height:’show’}, // fade-in and slide-down animation autoArrows: true, // disable generation of arrow mark-up dropShadows: false // disable drop shadows }); });

So every dolar sign $ must be replaced with jQuery in order to work with wp.

125 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 50+ members
  • Has sold $1+ on Envato Market
  • Has collected 100+ items on Envato Market
+2 more
Eight7Teen says
Most important is when you call some JQuery functions you do it like this:

jQuery(document).ready(function(){ jQuery(“div.topnav ul”).superfish({ animation: {opacity:’show’,height:’show’}, // fade-in and slide-down animation autoArrows: true, // disable generation of arrow mark-up dropShadows: false // disable drop shadows }); });

So every dolar sign $ must be replaced with jQuery in order to work with wp.

You can do it that way, but by using the method I showed above:

(function($) {
    // Yummy jQuery stuff goes here
})(jQuery);

jQuery is contained within it’s own namespace, and as such, you can use the $ in your functions without it impeding on any other javascript libraries.

1451 posts
  • Has referred 200+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Member of the Envato Team
+12 more
kailoon Envato team says

@Mladjo: Yes, I did tried what you mentioned, but sometimes it is not working properly.

@Eight7Teen: So you don’t need the no.Conflict thingy?

2468 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $100+ on Envato Market
  • Has referred 100+ members
  • Has been a beta tester for an Envato feature
+2 more
digitalimpact says

Since we’re on this topic, I have a question too.

How do you load jQuery in Wordpress from Google API ?

I’ve tried with wp_enqueue_script(‘jquery’) before wp_head(), but still, if there’s a plugin that needs jQuery, it will load it in the wp_head() section as well, so I have 2 calls to jQuery: one from the WP core, and one from Google.

I just need to disallow jQuery to be called in the wp_head() section, and load it from Google instead (since most visitors will have it cached just by visiting a Google site…)

If anyone can help, please :)

125 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 50+ members
  • Has sold $1+ on Envato Market
  • Has collected 100+ items on Envato Market
+2 more
Eight7Teen says

@Kailoon: No, you don’t need the no.conflict declaration because since v2.7 or 2.8, WordPress automatically loads jQuery in noconflict mode… So there’s no need to declare it again.

@digitalimpact: Why not just modify where wp_enqueue_script() loads jQuery from?

You can do that easily by adding this to your theme’s functions.php file:

function redefine_jquery() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http:// ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'redefine_jquery');

I had to edit the above because the forums were turning the location of google’s jquery into a link… So be sure to remove the blank space between http:// and ajax.googleapis

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by