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'm just trying to add a simple bit of Show/Hide jQuery to a child theme.

$(document).ready(function(){
 $("#openbtn").click(function(){
  $("#openingtimes").toggle(300);
 });
});

I've saved the above code in a file called buttons.js.

I have then registered and enquequed the script using the following in my functions.php file:

<?php
 if ( !is_admin() ) {
 wp_register_script('buttons',
   get_bloginfo('stylesheet_directory') . '/buttons.js',
   array('jquery'),
   '1.0' );

 wp_enqueue_script('buttons');
 }
 ?> 

In the outputted Source Code, the script seems to have properly loaded.

<script type='text/javascript' src='http://localhost:8888/italina/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://localhost:8888/italina/wp-content/themes/italina-responsive-child/buttons.js?ver=1.0'></script>

But the button has no effect.

For good measure, here's the HTML it should be affecting:

<button id="openbtn">Opening Times</button>
        <div id="openingtimes" class="headboxes">
                <p>
                   Mondays: Closed<br />
                   Tues-Fri: Noon-3pm; 5.30pm-10pm<br />
                   Sat-Sun: Noon-10.30pm<br />
                </p>
        </div>

Any help much appreciated.

share|improve this question
    
Please search for related questions before posting new questions. This one has been asked, and answered, several times. –  Chip Bennett Feb 20 '13 at 16:35
    
Most similar questions seem to be pointing towards jQuery not loading properly but I know that's not the case on mine as other jQuery powered elements such as slideshows are working fine. –  sanjaypoyzer Feb 20 '13 at 16:57
add comment

2 Answers 2

up vote 3 down vote accepted

jQuery scripts in WordPress require no-conflict wrappers.

Instead of this:

$(document).ready(function(){
     $(#somefunction) ...
});

Use this:

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

So, in your case:

jQuery(document).ready(function($) {
    $("#openbtn").click(function(){
        $("#openingtimes").toggle(300);
    });
});
share|improve this answer
    
This doesn't seem to have changed anything. :( –  sanjaypoyzer Feb 20 '13 at 16:43
    
If the script is properly enqueued (i.e. is seen with a valid script link in the document source), and the script itself has proper no-conflict wrappers, then the problem is with the jQuery itself, and isn't a WordPress-specific issue. –  Chip Bennett Feb 20 '13 at 16:49
    
The code seems to work fine in a jsfiddle away from Wordpress though, which is why I thought it must be wp specific. –  sanjaypoyzer Feb 20 '13 at 16:51
    
Ah, copied your code over wrong. All understood now, many thanks! –  sanjaypoyzer Feb 20 '13 at 17:53
add comment

I would also alter your function to:

function wpa_87661(){
 wp_enqueue_script('buttons',
   get_bloginfo('stylesheet_directory') . '/buttons.js',
   array('jquery'),
   '1.0' );
}
add_action('wp_enqueue_scripts','wpa_87661');

so that you enqueue your script on the wp_enqueue_scripts hook as recommended in the Codex.

And if you have Chrome or Firebug, use the console to check for Javascript errors.

share|improve this answer
    
This doesn't seem to have changed anything either. I wasn't getting anything in the console before but since adding the $ as per Chip Bennett's suggestion, I am now getting this error: Uncaught TypeError: Property '$' of object [object Window] is not a function buttons.js:1 –  sanjaypoyzer Feb 20 '13 at 17:23
    
That error is pretty much related to Chip's answer regarding no-conflict wrappers. –  helgatheviking Feb 20 '13 at 17:44
    
Ah, double checked the code I'd coped over from Chip, had missed a bit. Many thanks. –  sanjaypoyzer Feb 20 '13 at 17:53
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.