How to Create Tabs using JQuery Tools For Thesis Theme

I’ve been using JQuery tabs on thesis skins and here on FamousBloggers for a couple of months now, and I must say it’s really nice addition to any blog as tabs are saving you a lot of page space. Your blog space and spots should be considered as assets, this is why tabs makes it easy for your to display and feature more content without wasting your blog space. Personally, I think that tabs should be one of the most important design elements for every blog.

I know it’s confusing some times to deal with JQuery, especially if, but today I am going to show you how to display tabs on your Thesis Theme using JQuery Tools in a very easy and straight way, so I am going to include all the necessary codes for you, and all what you need to do is copy and paste the codes into your main thesis theme custom files.

The reason I wrote this tutorial is to show you where to load the scripts as it’s the most confusing part of enabling JQuery on your blog, it’s not to create a fancy tabs with contents, I didn’t want to add any content to the tabs as it might be more complicated, so let’s make things easy!

In this tutorial you will need to edit the custom_functions.php and custom.css files. I suppose here that you are using a custom skin!

After you are done with this tutorial, you should have your tabs up, and you will be ready to add content to it!

Adding Tabs using JQuery Tools For Thesis Theme

So, let’s do by steps to make it more clear and easy to follow!

1- Download JQuery Tools

I usually structure my Thesis Theme custom folder by adding a new folder for script files, it’s where I put all scripts and call them from the custom_functions.php file, so let’s start by creating a new folder inside your custom folder, for example name it “/scripts/“.

Go a head to the JQuery Tools site and grab the main file, this file should be located in the scripts folder we have created earlier.

Now to call the script and load it on the head of your blog add these lines of codes into your custom_functions.php file:

/* add custom javascript */
function add_custom_javascript(){ ?>
Note: You can also call the script directly from the JQuery Tools's CDN, probably it will load faster! I am not really sure about that, and I prefer to host my scripts on my own server. Actually, I used to combine them in one single file to reduce server calls.
Alright, we have done the first step. After updating your files, the JQuery Tools should be loaded on your blog.
2- Loading tab contents with AJAX
The Loading tab contents with AJAX is the type of tabs we are going to use in this tutorial, it's a very nice looking tabs and works great, you can add almost any type of content to be displayed in each tab, for more details and demo.
Adding the tabs HTML code
You can do this by two ways, the first way is to add the HTML code into your custom_functions.php file, the other way is to add the code into an external file, then include it in the custom_functions.php file. We will follow
So let's go a head and create a new php file, maybe name it tabs.php and place it in a new folder, I usually call it "/lib/" , add this code into the file:



	
Tab 1
	
Tab 2
 	
Tab 3





Add content for tab one here..
Add content for tab 2 here..
Add content for tab 2 here..