Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've been working on building a theme for the past couple days now, and I've run into a wall. While I originally included foundation.js as an enqueued script, I couldn't remember why I had added it. Today, when I tried removing it (to improve page-load speed) from my functions.php file, it messed up all of my jQuery plugins.

After some researching, I discovered that Foundation already includes jQuery, so I was loading two instances of it at a time (I also loaded from the theme's js folder). So, now that I've removed foundation, my custom.js file commands don't work unless I prepend 'jQuery' instead of the simpler '$'.

I think there's some part of my Wordpress install that I made bug out, even if I keep the 'Foundation' name reference with the jQuery file earlier called, the theme works. It's like it has to have that 'Foundation' name.

Below I've included both my script calls, as well as my custom js file, in hopes that someone will be able to aid me in diagnosing this problem.

Links:

-Chrome Console Error Message

-jQuery & Plugins shown loading in Chrome Console

SCRIPT CALLS:

function register_js() {
if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_deregister_script('foundation');
    wp_register_script('jquery', get_template_directory_uri() . '/js/libraries/jquery-1.7.1.min.js');
    wp_register_script('jquery-ui', get_template_directory_uri() . '/js/libraries/jquery-ui-1.8.16.min.js', 'jquery');
    wp_register_script('superfish', get_template_directory_uri() . '/js/plugins/jquery.superfish.js', 'jquery');
    wp_register_script('supersubs', get_template_directory_uri() . '/js/plugins/jquery.supersubs.js', 'jquery');
    //wp_register_script('foundation', get_template_directory_uri() . '/js/plugins/jquery.foundation.js', 'jquery');
    wp_register_script('custom', get_template_directory_uri() . '/js/custom.js', array('jquery','jquery-ui') );
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui');
    wp_enqueue_script('superfish');
    wp_enqueue_script('supersubs');
    //wp_enqueue_script('foundation');
    wp_enqueue_script('custom');
}
}
add_action('init', 'register_js');

CUSTOM JS FILE:

$(document).ready(function() {

/* Menu - Superfish */
$('ul.menu').supersubs({ 
    minWidth:    11,
    maxWidth:    30,
    extraWidth:  1    
}).superfish({ 
    hoverClass: "sfHover", 
    speed: 'fast', 
    dropShadows: false, 
    delay: 0,
    autoArrows: false,
    animation: {height:'show',opacity:'show'}
});

/* Blog Tabs */
$('#tab_controls').tabs({ fx: [ {opacity:'toggle', duration:'normal'},{opacity:'toggle', duration:'slow'}] }); 

});
share|improve this question
    
No need to update the title with [SOLVED] or to edit your question to add your solution. Simply accepting an answer below, by checking the checkmark - which you have done - is sufficient. –  Chip Bennett Feb 9 '12 at 19:33
    
Whoopsies, noted. –  Matt Feb 9 '12 at 19:43
add comment

2 Answers

up vote 8 down vote accepted

Try changing the first line of your custom JS file.

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

jQuery operated within WordPress should be run in compatibility mode. That line allows this to happen, as per point #5 here.

share|improve this answer
    
TIL, thank you very much! You're my hero of the day! –  Matt Feb 9 '12 at 18:57
add comment

First, if your Theme is intended to be publicly distributed, do not deregister core-bundled scripts and replace them with your own. This includes jQuery, jQuery UI, and several other scripts.

Second, yes: WordPress runs with jQuery no-conflict, which means that you must account for no-conflict in your scripts. The Codex-recommended method is here:

jQuery(document).ready(function($) {
    // $() will work as an alias for jQuery() inside of this function
});

These two probably have nothing to do with your issues, but are best practice:

  1. If calling both wp_register_script() and wp_enqueue_script() in the same context/function, simply omit wp_register_script(), and use wp_enqueue_script().
  2. Hook into wp_enqueue_scripts, rather than init.
share|improve this answer
    
Chip, I was unaware about the dangers of deregistering scripts. I had looked through some other themes and seen it done; I figured it was to make sure the client had the latest version of jQuery for the theme; now that I think about it, it could lead to problems down the road where Wordpress' built-in jQuery is newer than the theme's. As for registering/enqueueing scripts, I plan on registering multiple ones for various sliders, and, based on the user's selection, enqueue them then, so as to not make their visitors download unnecessary files. Thanks for your help! Your solution did the trick! –  Matt Feb 9 '12 at 19:05
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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