Adding JQuery to WordPress – For your customized WordPress theme

JQuery can be easily added to your WordPress theme. Irrespective of whether you use the default themes from WordPress or if you have customized an unique theme for your website, JQuery will help your website to stand out from the crowd.

I do not prefer to use the integrated WordPress JQuery plugins. In fact, I have not tried them. I always love to add JQuery manually to my WordPress application.

Lets get our hands dirty by straight away jumping into the integration.

Step 1: Create a ‘js’ folder under your WordPress theme directory.

Step 2: Save any of your JQuery stylesheets directly under the theme directory with your other theme stylesheets. One example would be the lightbox stylesheet file.

Step 3: Create a ‘images’ folder under your WordPress theme directory. You may normally already have this directory. Place your JQuery related images under it. For example, the NEXT, PREV and CLOSE buttons of the lightbox plugin can be stored here.

Step 4: create a ‘your_theme_name.js’ file which can be placed under the ‘js’ folder created in step 1.

Sample contents of the js folder:

jquery-1.3.1.js
jquery-lightbox-0.5.js

Step 5: Edit your header.php file in your theme directory to include the ‘your_theme_name.js’ script file and all of your JQuery style sheets (for example the lightbox plugin css file). In this file, you can define the ready() function where JQuery calls can be added.

First, include the script file and stylesheet in your header.php

.....
<link rel="stylesheet" href="/jquery.lightbox-0.5.css" type="text/css" media="screen" />
<script src="<?php bloginfo('stylesheet_directory'); ?><!-- /js/jquery-1.3.1.js" type="text/javascript">
.....

Next, modify the ‘your_theme_name.js’ under the ‘js’ folder to include your JQuery calls

$(document).ready(function() {
.....
/* Sample code to show/hide a layer by clicking on a second layer */
$("#layer1").click(function () {
$("#layer2").show("slide", {}, 1000);
});
.....
}

Thats it! Now, can it be more easier than that?

Comments

1. djai says:

   March 9, 2009 at 10:45 pm

   Hi, Madan.

   Thanks you for your article. I’m not a developer, but a designer instead. I followed your examples as close as I could, but I wasn’t sure how to create multiple jquery and css script files? I had to take out a css file that works with tis photo gallery – basic.css Here’s what I added to header.php:

   <script src=\
   <script src=\
   <script src=\

   document.write(\div.navigation{width:300px;float: left;}div.content{display:block;}\);

   I also added the following scripts at the bottom of header.php:

   jush.style(’/css/jush.css’);
   jush.highlight_tag(’pre’);

   This is how the photo gallery is supposed to behave: http://adsitap.com/adsit-portfolio1.html

   Sorry, this is such a long post. Any help would be greatly appreciated.

   Thanks,

   djai
2. djai says:

   March 9, 2009 at 11:07 pm

   Hi, Madan.

   Sorry for the last post. I didn’t review before sending it. Here’s how it should read:
   —————————-
   Thank you for your article. I’m not a developer, but rather a designer. I followed your examples as close as I could, but I wasn’t sure how to add multiple jquery and css script files to header.php? I had to take out a css file (basic.css) that conflicted with the theme’s style.css file. Here’s what I added to header.php:

   <link rel=”stylesheet” href=”/css/basic.css” type=”text/css” />

   <link rel=”stylesheet” href=”/css/galleriffic.css” type=”text/css” media=”screen” />

   <script src=”<?php bloginfo(’stylesheet_directory’); ?><!– /js/jquery-1.3.min.js” type=”text/javascript”>

   <script src=”<?php bloginfo(’stylesheet_directory’); ?><!– /js/simplicitybright.js” type=”text/javascript”>
   <script src=”<?php bloginfo(’stylesheet_directory’); ?><!– /js/jquery.galleriffic.min.js” type=”text/javascript”>

   <script type=”text/javascript”>
   document.write(”<style type=’text/css’>div.navigation{width:300px;float: left;}div.content{display:block;}</style>”);
   </script>

   I also added the following scripts at the bottom of header.php:

   <script type=”text/javascript” src=”/js/jquery/jush.js”></script>

   <script type=”text/javascript”>
   jush.style(’/css/jush.css’);
   jush.highlight_tag(’pre’);
   </script>

   The photo gallery is supposed to behave like the one on the following page: http://adsitap.com/adsit-portfolio1.html
   Sorry, this is such a long post. Any help would be greatly appreciated.
   Thanks,
   djai
3. Madan Revoor says:

   March 10, 2009 at 12:25 am

   Hi djai, I can see that you are trying to use the galleriffic plugin for your slideshow. The problem with your header.php file is that you are not correctly specifying the location of the ‘js’ and ‘css’ directories in the ‘href’ attribute of the tag. If your ‘js’ and ‘css’ directories are under your default or custom theme directory in the same location as your style.css file, then you need to refer to them as follows:-

   < link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_directory’); ?>/css/galleriffic.css” type=”text/css” media=”screen” >
4. Madan Revoor says:

   March 10, 2009 at 12:35 am

   You can check out my other post on ‘Mixing JQuery Lightbox with Innerfade…” to learn about how to setup the <link> tag correctly and how to create slideshows with slide or fade animations. Thanks to Innerfade! Have fun.
5. DR says:

   October 5, 2009 at 3:02 pm

   You can check out my other post on ‘Mixing JQuery Lightbox with Innerfade…” to learn about how to setup the <link> tag correctly and how to create slideshows with slide or fade animations. Thanks to Innerfade! Have fun.
6. Celebrate jQuery in WordPress and WordPress Plugins: jQuery Turns 4 | WordCast - Blogging news, WordPress help, WordPress plugins, WordPress themes, WordPress news says:

   January 18, 2010 at 6:02 pm

   [...] Madan Revoor – Adding jQuery to WordPress – For your customized WordPress theme [...]
7. Roger says:

   February 10, 2010 at 1:45 am

   Hi Madan,

   I am having a nightmare! tried for last week to implement floating_window-with_tabs on my wordpress site using http://www.dhtmlgoodies.com/index.html?whichScript=floating_window_with_tabs

   Followed your tips which have helped me get .css working correctly but the windows still won’t render!!!!

   My header code is below;

   <link rel="stylesheet" href="/floating_window_with_tabs.css” type=”text/css” media=”screen”>
   <script src="/floating_window_with_tabs.js” type=”text/javascript”>

   And my page body code is below;

   This script has been tested in IE, Firefox and Opera. Unfortunately, Opera doesn’t support overflow in the same extent as
   IE and firefox, so there you will find both a horizontal and vertical scrollbar. I found that to be better than no scrollbars at all.

   Content 2

   Content 3

   [inline]

   initFloatingWindowWithTabs(’window1′,Array(’Info’,'More info’,'The end’),200,220,50,50,true,false,false,true,false,false);

   [/inline]

   Any ideas? – extremely grateful driving me absolutely bonkers!

   Thanks,
   Roger

• How to swap two variables without a temp variable?
• Mixing JQuery Lightbox with Innerfade - Your own JQuery Slideshow album
• Emacs - Playing music in your text editor
• How to install wordpress for your website?
• Configuring Linksys WAG200G (Wireless ADSL Router) with BSNL broadband
• Adding JQuery to WordPress - For your customized WordPress theme
• WordPress Plugins - Five most useful wordpress plugins for your website
• Emacs vs Vi - A single page reference to commands
• Shell script to count number of lines of all files within a directory