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 added this

<?php wp_enqueue_script("jquery"); ?>

before

<?php wp_head(); ?>

so that I can just use the wordpress included jquery script, and deleted the extra jquery script I've been loading, but when I go to Inspect Element in Chrome I get

submitForm.js:1Uncaught ReferenceError: $ is not defined

jquery.colorbox-min.js:4Uncaught ReferenceError: jquery is not defined

I'm guessing that I need to modify submitform.js and jquery.colorbox-min.js, I'm just not sure which way to go, if it helps here is the site, transaction-realty.com

Thanks

share|improve this question
    
How do you enqueue sumbitform.js and jquery.colorbox-min.js? –  Mamaduka Sep 3 '11 at 18:39
    
@Mamaduka I am adding them like this, <script src="<?php bloginfo('template_url'); ?>/js/jquery.colorbox-min.js"></script> –  Chuck Sep 8 '11 at 0:33
    
@Mamaduka it turned out they were loading before jquery. –  Chuck Sep 8 '11 at 2:16
add comment

1 Answer 1

up vote 1 down vote accepted

When you load jquery from WordPress includes, you will need to use jQuery instead of the dollar sign $, as the latter is reserved for other libraries.

jQuery( document ).ready(function( $ ) {
    // Submitform and colorbox init, both will work here.
});

But also make sure to avoid the script tags as much as possible, but with wp_enqueue_script in the functions.php (all within <?php ?> )

function add_our_theme_scripts() {
   $theme_url = get_bloginfo('template_url') . '/js/';
   // Add the wordpress version of jQuery. 
   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'jquery-submit-form', $theme_url . 'submit-form.js';
   // similarly for colorbox if it is added through the theme.
} // END function add_our_theme_scripts()

// It should be hooked to init or wp_print_scripts and not wp_head.
add_action( 'init', 'add_our_theme_scripts' );

Now if you wish to make it more simple and manageable put the previous code in a separate file and add that to the above function too.

jQuery conflict

You can also try jQuery no conflict mode like below.

  // example var myJQ. 
  myJQ = jQuery.noConflict();

  myJQ( document ).ready(function( $ ) {
      // scripts here.
  });

But be careful though, $ sign will not be available after you enter noConflict mode, so make sure you use myJQ ( example here ) consistently.

share|improve this answer
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.