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.

Ok I have this jQuery that I have tested in a static html page and it works fine.

How would I include jQuery to work on wordpress in a plugin?

So this is the html page.

<head>
<title> Welcome to my page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.17.custom.css">
</head>
<body>


<a id="word" href="#">Google</a>
<span id="hoovertext"> a powerful search engine</span>


</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/hide.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>

</body>

SO this is the jQuery file that works for this html page

$('a').mousemove(function(){

    $('#hoovertext').show();

});

$('#hoovertext').mouseleave(function(){
    $(this).fadeOut();

});

Basically I want this jQuery to work on specific words on my wordpress site.. in the sense that when somebody hovers mouse over text it gives a description. exactly what my code above does.

Can somebody please show me how, since I including jQuery into wordpress is the one thing that I still don't quite understand.

Thanks.

share|improve this question
    
possible duplicate of Including jQuery in Wordpress –  Chris_O Feb 17 '12 at 3:37
add comment

2 Answers

up vote 3 down vote accepted

You should be using wp_register_script() and wp_enqueue_script(), so, for example:

add_action( 'wp_enquque_scripts', 'my_script_enqueue' );

function my_script_enqueue() {
    wp_enqueue_script( 'my-jquery', 'URL TO THE FILE', array( 'jquery' ) );
}

Also, as mentioned by Zack, you should be registering your jQuery as such, as wordpress does not use $ for jQuery by default.

jQuery( document ).ready( function( $ ) {
    //your jquery
});
share|improve this answer
    
was going to answer, but this is pretty much exactly what i was going to say. perfect answer, imo. –  helgatheviking Feb 17 '12 at 4:01
add comment

You may want to look at wp_enqueue_script. Although, I just noticed you are using the $ prefix.

Try to do something like this:

<script type="text/javascript">
   (function($) {
      // my javascript/jquery here
   })(jQuery);
</script>

Basically, I forget the technical reason why you have to do this, but something with $ being using already by another javascript library. What this code does is create an anonymous function that takes a parameter of "$". This function also passes the jQuery object to it so, in essence, $ is jQuery again, for this function.

EDIT: Thanks to Chip in the comments, the technical reason is because jQuery with WordPress is running in no conflict mode.

share|improve this answer
    
thanks Zack will give this a shot. –  Ronny Feb 17 '12 at 3:03
2  
The "technical reason" is that WordPress uses no-conflict mode for jQuery; so $ is not available by default as a shorthand for jQuery. Try using jQuery(document).ready(function($) {. –  Chip Bennett Feb 17 '12 at 3:47
    
Thanks @ChipBennett :) –  Zack Feb 17 '12 at 4:06
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.