Enhance your Blog Design with JQuery

Posted on October 05, 2008 in How-to

Enhance your Blog Design with JQuery
JQuery

JQuery is a JavaScript library that simplies event handling, animation, Ajax interactions and much more. The WordPress admin uses JQuery to enhance a variety of sections - the show/hide tabs in the Write page, the lightbox for the media uploader. So it’s already built into Wordpress, all we need to do is call it from the front end and use it ourselves.

JQuery is stored at /wp-includes/js/jquery/jquery.js. To use this we need to load it into the header of our page. So we need to add the following line in our header.php theme file, somewhere between the head tags.
view plaincopy to clipboardprint?

<script type="text/javascript" src="/wp-includes/js/jquery/jquery.js" charset="utf-8"></script>

<script type="text/javascript" src="/wp-includes/js/jquery/jquery.js" charset="utf-8"></script>

This will then load the JQuery library whenever someone loads your site. Note, the path will need to reflect your own installation of WordPress on the server. So if you have WordPress installed in the root directory, the above will work, however if you have it in a subdirectory then you’ll need to add this to the start of the source path.