jQuery in WordPress

  • I’m trying to put some simple jQuery code into the WordPress header (usually just use CSS) but no matter what I try I cannot seem to get it to work. The code is:

    <script type="text/javascript">
var fadein = 300;
var fadeout = 200;

$(document).ready(function(){
$("#btnforum img, #btnfacebook img, #btntwitter img, #btnyoutube img, #btnlivestream img, #btncontact img").hover(function() {
	$(this).stop().animate({"opacity": "0"}, fadein);
	$(this).css('cursor', 'pointer');
		}, function() {
	$(this).stop().animate({"opacity": "1"}, fadeout);
});
});
</script>

    Not much at all. It works fine in a HTML page. I have done a little reading from the WordPress codex and a few other sources and have tried a few things. Replacing ‘$’ with ‘jquery’, using ‘<?php wp_enqueue_script(“jquery”); ?>’ and so on – but it still won’t trigger.

    Does anyone have any real knowledge of this? I just need to know where to put what specifically in relation to the code I have as what some tutorials are saying do not really make sense to me.

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • DigitalSquid

    (@twelvefootsnowman)

    It doesn’t really mater where you put the code, it should work anywhere. Most people either put all their scripts in the <head> tag or at the end of the <body> tag (depending if they want their scripts to load before page content does).

    Are you sure the link to the jQuery source code is correct?

    You could even post a link to your page as it’s easier for people to help when they can see the code in action.

    jQuery would have to be loaded for .animate to work. *May* not make a difference but the line I use in the theme functions.php is:
    <?php wp_enqueue_script('jquery'); ?>
    single quotes around jquery.

    As a debugging step, you might try specifically loading jquery in header.php. Use the Web Developer toolbar in Firefox to look at the JS libraries that are/aren’t loaded.

    Also, I just had a go-round myself getting something to work and found that the theme footer.php was missing:
    <?php wp_footer(); ?>

    </body>
    </html>
    were missing, too, so the page wasn’t closed properly. Once those were in place, everything worked.

    Thread Starter Philljc

    (@philljc)

    Yay! That fixed it, awesome!

    Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘jQuery in WordPress’ is closed to new replies.