Inserting jQuery Into Wordpress

jQuery Tabs in an Accordion Layout

• The Mission: jQuery Tabs & Accordions
• Inserting jQuery Into Wordpress
• Add jQuery Accordion Layout

This is Part II of a five part series on building jQuery accordions with tabs inside the accordion. Part II will show the details of installing the necessary jQuery files into your Wordpress blog.

To start, we need to insert the jQuery core library and the jQuery UR library into your Wordpress theme, so that we have access to all the pre-built functions that jQuery provides.

There are 2 different libraries that we’ll need to download, the core jQuery library, and the user interface libraries for tabs and accordions. The core jQuery library is included with the jQuery UI library download, so there’s only one file to download.

Go download the jQueryUI libraries here.

There is a long page of options, but if you read the top paragraph, you’ll see that there is a quick download link for the current version (1.7.2 as of this writing).  I recommend the quick download to get started. You can also create your own customized version with a custom css theme and if you choose to go that route, just make sure that you have the accordion and tabs widgets selected.

After the files are downloaded, unzip them into a safe place on your hard drive. We will need 3 files from this download, 2 javascript files and one css file.

The two javascript files we’ll need are jquery-ui-1.7.2.custom.min.js and jquery-1.3.2.min.js, located in the js directory.  The css file we’ll need is called jquery-ui-1.7.2.custom.css, and is located in the css directory of the download.

Next step – upload the files into your theme.

For this tutorial, I assume you know how to use an FTP client like Filezilla and know the location of your theme in wordpress.

I like to create a js and css directories in my theme for my custom javascript and css stylesheets.

I assume for this tutorial that you will be using a structure such as /wp-content/themes/theme-name/js and /wp-content/themes/theme-name/css for the directory location of your uploaded files.

Go ahead and upload the two javascript files and one stylesheet now.

Now we’ll need to modify the header.php file in your theme.  I’ve been told that they need to go below your call to wp_head(), as shown below.

Since you know that you’re going to need to add some custom code, let’s insert the call to where you’ll put that custom code for your accordion and tabs.  Don’t worry about putting anything in it, we’ll take care of that soon.

After you’ve saved the header.php file, load up your site, and look at the source to verify that it’s there, and being found.  Firefox makes the links to .js and .css files hyperlinks, so I click on them and verify that the files are found.

At this point, we’ve downloaded the proper jQuery files, uploaded them into your Wordpress themes directory, and made the proper calls in the header.php, and everything should be ready to go.

In the next part of the series, we’re going to be creating a jQuery accordion with one simple javascript call…. stay tuned!