Using Jquery to Enhance WordPress

in WordPress Tutorials

In this WordPress tutorial I will show you a few ways to enhance any WordPress website or blog using the JavaScript jQuery library. In the tutorial I assume readers know the basics of WordPress theme and/or plugin development. If you are not familiar with either theme or plugin development, you should learn the basics before attempting to execute the code examples in this tutorial.

WordPress Built-In Libraries

WordPress comes with many JavaScript libraries already bundled into it. They can be brought to your current page for use by using the wp_enqueue_script function. Jquery is a JavaScript library after all. Here are some of the libraries that are already bundled with WordPress that you can use:

  • Jcrop – used for cropping images. Use “Image cropper” in the wp_enqueue_script function.
  • SWFObject – for embedding flash objects. There are several complimentary functions that go along with this such as the SWFUpload, SWFUpload Degrade, SWFUpload Queue and SWFUload handlers functions. Use “swfobject” or the corresponding other function name in all lower case letters in the wp_enqueue_script function to deploy one of these functions.
  • Jquery – is the basic Jquery library most developers refer to when they mention anything about jQuery unless they reference a specific library. Use “jquery” in the wp_enqueue_script function.
  • jQuery UI Accordion – can be used to add accordion style menus on your blog or website. For an example and more details, see Use “jquery-ui-accordion” in the wp_enqueue_script function.
  • Tiny MCE – adds a WYSIWYG editor. This is just like the WordPress page and post editors in the WordPress admin. You could put it in a special page on your WordPress site if you had a need. To use it, enter “tiny_mce” inside the qp_enqueue_script function.

For a more complete list, see:

Call the wp_enqueue_script Function

Next you want to insert the call to the wp_enqueue_script function which includes the library you need for your page. Here is the structure of the function:


The function should be before your theme file’s call to the wp_head() function. Now let us look at each parameter:

  • $handle – is a required parameter which should be a lower case string indicating the name of the script.
  • $scr – is an optional URL for the script for cases WordPress doesn’t already know where to find it. This should be used with plugins_url() if you are writing a plugin or get_template_directory_uri() for a theme because you should never enter a URL directly.
  • $deps – is an optional array of handles for other scripts that the script depends on. It is only for cases when WordPress doesn’t already know where to find the script.
  • $ver – is an optional string that indicates the version number.
  • In_footer – is another optional parameter which is a Boolean that has a default value of false and is used for when you want to include the script at the bottom of the page instead of in the header as it is by default.

Safely Using the jQuery $ shortcut

If you don’t want to use “jquery” every time you reference a jQuery function, you can enclose your jQuery code in a simple function to safely use the $ instead of “jquery”. Here is an example:

jQuery(function ($) {
	/* Safely use $ here instead of jquery */

Step by Step Instructions for adding JavaScript or Jquery to a WordPress Page

Here I will cover a very basic method for creating a page with JavaScript or Jquery which is a JavaScript library. The method is the same for either a plain JavaScript script or a jQuery script. Here is how to add a new customized page to your WordPress site or blog without messing with the default functionality of other WordPress pages or posts:

  • Go to your current theme directory. It should be something like / Download the single.php file and the header.php file from the current theme directory.
  • Open the single.php file in your favorite text editor. I use Notepad++. Save the file under a new name. For this tutorial, I named my file simply javascript.php, but you can name it as you please. At the top of your new file, locate and delete the get_header() function. Then insert the following code a the very top of the file:
    Template Name: javascript
    <?php get_header('js'); ?>
  • Notice that I added ‘js’ to the get_header function after giving the template a name similar to the filename I choose. The “js” is part of what you will name your file in step four, so pay attention to what I did there.

  • Now in the same template file you created in the previous step, locate the WordPress loop which should start with “if (have_posts()…”, and add the following code before it:
    <span style="color:red;cursor:pointer">Fade in square</span>
    <div id="one" style="margin:3px;width:80px; display:none;height:80px;float:left;background:#f00;"></div>
          $(document.body).click(function () {

    Then save the file.

  • Now open the header.php file. Save a copy of it as “header-js.php” as I did or give it your own unique name. You have to call it something like header-something with the dash followed by something else to identify the header in the get_header function which will only read what is after the dash. Notice how I used it the previous step. Whatever is after the dash is what will be in your get_header function call. Add the following to your new header file, in this case, header-js.php. Add it right before the call to the wp_head function:
    <script src="//"></script>
  • Upload your new template file and new header file to your current theme directory using your FTP application.
  • Go to your WordPress dashboard and add a new page. Give it a title and select the template name you created in the template dropdown which will be in the right column. Click on “update” to save the page without entering anything in the page editor.
  • Finally click on the view page link above the WYSIWYG editor to view the page. Click on the red link that reads: “fade in square”. If you see a red square fade in slowly, then congratulations, you have successfully added a working Jquery script to a custom WordPress page! It should look something like mine did in the image below:



That is all there is to it. There are some possible issues, so be sure to troubleshoot using the codex if you have any issues. The above is just a simple example to get you started inserting Jquery or JavaScript into a custom page template. You can replace the Jquery code in the example with whatever code you choose and chances are it should work fine. There are often issues with JavaScript in WordPress if you have a lot of plugins activated because there is likely to be a conflict of interests with Jquery or JavaScript, so if you run into trouble, try disabling plugins in an attempt to find the root of the issue.

Comments (1)

  • Comment by Kanchana

    It works really fine in the first step ,,thanks