0

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.

Improve this question
1

2 Answers 2

Reset to default
3

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
});
Improve this answer
1
  • was going to answer, but this is pretty much exactly what i was going to say. perfect answer, imo.
    – helgatheviking
    Commented Feb 17, 2012 at 4:01
1

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.

Improve this answer
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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