How to Create Tabs using JQuery Tools For Thesis Theme

Hesham Zebida

13 years ago

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:

Add content for tab one here..

Add content for tab 2 here..

Now, we must include or call the tab.php file from inside the custom_fucntions.php file to run it, you can add this simple code into the custom_functions.php file to call your tabs:

// start of tabs
function home_page_tabs() {
	if (is_home()) {
		require_once ('lib/fb_content_tabs.php'); // Load tabs
		}
	}
add_action('thesis_hook_before_content', 'home_page_tabs');
// End of tabs

Note: You can change thesis hook to display the tabs anywhere on your blog, in this example I am using thesis_hook_before_content to display the tabs at the top of content, and there is a condition to show it only on the home page of the blog.

3- Adding our CSS code

Now as we've uploaded our files to the server, the tabs may still not work or display probably, we must add some CSS to style the tabs, so I will simple past the code I am using here on the blog hopefully it will not require lots of modifications to work for you:

#home_page_tabs { margin-top:15px; margin-bottom:10px;}
/* root element for tabs  */
ul.css-tabs { margin:0 !important; padding:0;height:30px; border-bottom:1px solid #ccc; width:500px; }
/* single tab */
ul.css-tabs li { float:left;padding:0; margin:0; list-style-type:none;background-image:none !important;padding-left:0 !important;}
/* link inside the tab */
ul.css-tabs a { float:left;	font-size:13px;	display:block; padding:5px 10px; text-decoration:none; font-weight:bold; border:1px solid #ccc; border-bottom:0px;
	height:18px; background-color:#eeeeee; color:#777; margin-right:2px; position:relative; top:1px; outline:0; -moz-border-radius:4px 4px 0 0;	}
ul.css-tabs a:hover { background-color:#F7F7F7;	color:#333;}
/* selected tab */
ul.css-tabs a.current {	background-color:#eeeeee; border-bottom:1px solid #eeeeee; color:#000; cursor:default;}
/* tab pane */
.css-panes div {display:none; border:1px solid #ccc; border-width:0 1px 1px 1px; padding:15px 20px; background-color:#ddd;}
/* alternate colors: skin2 */
	ul.skin2 a {background-color:#89a; color:#fff !important;}

	/* mouseover state */
	ul.css-panes a:hover {background-color:#678;}
	/* active tab */
	ul.css-panes a.current {background-color:#eeeeee; border-bottom:2px solid #4F5C6A;}
	/* tab pane with background gradient */
	div.css-panes div { width:500px; color:#fff; background:#eeeeee;
		/* IE6 does not support PNG24 images natively */
		_background:#4F5C6A;}

I hope you've enjoyed this fast tutorial and now you are able to add tabs to your Thesis Theme!

Please visit the JQuery Tabs page to read more about it, I may not be able to support you or answer any questions, I am just sharing what's working for me, and I hope it will work for you without pain.

I use the JQuery tools on my Thesis Skins, take a look at it over at ThesisAwesome.com