Creating jQuery UI Tabs in WordPress

jQuery UI is the official jQuery user interface library. It provides interactions, widgets, effects, and theming for creating rich internet applications. jQuery UI provides a comprehensive set of core interaction plugins, UI widgets and visual effects that use a jQuery-style, event-driven architecture and a focus on web standards, accessiblity, flexible styling, and user-friendly design.

In this tutorial, I will be integrating the jQuery UI Tabs widget into the sidebar of my WordPress theme. The reason I am using the jQuery UI is because I do not want to be reinventing the wheel by creating another widget when the amazing jQuery team already has one.

Include the jQuery Javascript Library into WordPress

I have covered this topic in great detail in my previous post, Include the Latest Version of jQuery in WordPress without Duplicates. Please refer to that post for more information on how to include jQuery into WordPress.

Download jQuery UI Files

The jQuery UI download page has so many options it can be really confusing. I downloaded all of the components of the latest “stable” release, which works with jQuery 1.4 and above.

Upload jQuery UI Files to Your WordPress Theme Directory

I created a “js” directory within my WordPress theme’s directory to store the jQuery UI files.

You only need to upload the following files:

  1. jquery.ui.core.min.js
  2. jquery.ui.widget.min.js
  3. jquery.ui.tabs.min.js

Include jQuery UI Files into Your WordPress Theme

<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.tabs.min.js"></script>

Add the 3 lines above into your header.php template file. Replace the “TEMPLATE” text with your theme’s template folder name.

<?php
#DISPLAY TABS
if(!is_page())
{
?>
<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.tabs.min.js"></script>
<?php
}
?>

If you’re planning to display the tabs on the blog pages, you could use some WordPress conditional tags to control where they appear. Remember to replace the “TEMPLATE” text with your theme’s template folder name.

$(document).ready(function()
{
	$("#post_tabs").tabs();
});

Another thing I like to do is to create an external Javascript file to store the Javascript code that launches the tabs. I saved the code above into the Javascript file, jquery-initialise-tabs.js.

<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.tabs.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery-initialise-tabs.js"></script>

I included the jquery-initialise-tabs.js file as an external Javascript file like the rest of the jQuery UI files.

Adding the jQuery UI Tabs to the Sidebar

<div id="post_tabs">
 
	<!-- TAB TITLES - START -->
	<ul class="post_tabs_title">
		<li title="Latest Posts"><a href="#latest-posts">Latest</a></li>
		<li title="Popular Posts"><a href="#popular-posts">Popular</a></li>
		<li title="Most Commented Posts"><a href="#most-commented-posts">Most Comments</a></li>
	</ul>
	<!-- TAB TITLES - END -->
 
	<!-- LATEST POSTS - START -->
	<div id="latest-posts">
		<ul class="tabs"><li><a href="#" rel="bookmark" title="">....</a></li></ul>
	</div>
	<!-- LATEST POSTS - END -->
 
	<!-- POPULAR POSTS - START -->
	<div id="popular-posts">
		<ul class="tabs"><li><a href="#" rel="bookmark" title="">....</a></li></ul>
	</div>
	<!-- POPULAR POSTS - END -->
 
	<!-- MOST COMMENTED POSTS - START -->
	<div id="most-commented-posts">
		<ul class="tabs"><li><a href="#" rel="bookmark" title="">....</a></li></ul>
	</div>
	<!-- MOST COMMENTED POSTS - END -->
 
</div>

The HTML code of the jQuery UI Tabs is pretty straightforward. You have create a div container to store your tabs and the content of the tabs. In my case, I created a div with the id of “post_tabs”. The Javascript code within my jquery-initialise-tabs.js file activates the jQuery UI Tabs.

The a tags point to another div, which houses the content of the that tab. For example, the “Latest Posts” tab is activated when you click on the “#latest-posts” link. You can display anything you want within the tab’s content area. In my case, I displayed a list of blog posts.

/* TABS */
#contents #sidebar #post_tabs
{
	height: auto;
	margin: 0px 0px 7px 0px;
	padding: 5px 0px 0px 0px;
}
 
#contents #sidebar #post_tabs ul.post_tabs_title
{
	width: 189px;
	margin: 0px;
	padding: 0px 0px 0px 13px;
	list-style-type: none;
	border-bottom: 1px solid #EDEDED;
	overflow: hidden;
}
 
#contents #sidebar #post_tabs ul.post_tabs_title li
{
	float: left;
	margin: 0px 3px 0px 0px;
	padding: 4px 3px 4px 3px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 9px;
	font-weight: bold;
	color: #333333;
	cursor: pointer;
	background-color: #EDEDED;
}
 
#contents #sidebar #post_tabs ul.post_tabs_title li.active, #contents #sidebar #post_tabs ul.post_tabs_title li.over
{
	color: #FFFFFF;
	background-color: #3A8BD4;
}
 
.ui-tabs .ui-tabs-panel
{
	display: block;
	margin: 0px;
	padding: 0px;
	background: none;
}
 
.ui-tabs .ui-tabs-hide
{
	display: none !important;
}
 
#contents #sidebar ul.tabs
{
	margin: 8px 0px 0px 27px;
	padding: 0px 20px 0px 0px;
	list-style-type: square;
}
 
#contents #sidebar ol.tabs2
{
	margin: 8px 0px 0px 39px;
	padding: 0px 20px 0px 0px;
}
 
#contents #sidebar ul.tabs li, #contents #sidebar ol.tabs2 li
{
	margin: 0px;
	padding: 0px 0px 3px 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: normal;
	color: #333333;
}

The CSS code is a bit tricky because jQuery UI Tabs’ documentation does not go into great detail about it. If you check out the jQuery UI Tabs demo and view its source code, you will see a link to an external style sheet file.

Actually the only required CSS for this jQuery UI Tabs to work is only this block of CSS code:

.ui-tabs .ui-tabs-hide {
     display: none;
}

The rest of the the CSS code I added above is just for styling it to suit my web site’s look and feel.

Overall, I find the jQuery UI Tabs relatively easy to install and customise but it isn’t for people who know nothing about HTML, CSS and Javascript.

About the Author

Similar Posts

Facebook Comments

-->

3 Comments On “Creating jQuery UI Tabs in WordPress”

On 17th August 2010 3:20 PM, thomas said:

judging by the looks of it this is by far the most lean and mean solution to the popular question of dynamic tabbed content in wp templates. gosh i can’t wait to try this.

On 17th August 2010 4:23 PM, thomas said:

looked promising but it doesn’t work for me. content of tabs is not hidden and they apppear on top of eachother instead of next to eachother. must be conflicting with one my plugins using jquery.

will try tabber now, thanks for the alternative.

On 17th August 2010 4:58 PM, thomas said:

Tabber doesn’t work for me either. Then I guess it’s back to postTabs – which unforunately I can’t configure in my templates. Thx anyway.

Post a Comment


(Required)


(Required)