Have you ever wanted a lot of information in a small amount of space? Maybe you wanted to put widgets above your posts or pages.

Well, the Tabbed Info Pane is the solution! It can provide an unlimited amount of information in a small amount of page real estate.

What can kinds of information can the Tabbed Info Pane contain? Just about anything you can put into HTML or PHP. For example:

• Text
• Lists
• Tables
• Images
• PHP functions
• Widgets

Widgets? Yes, the Tabbed Info Pane can hold widgets, too. The example above and the Blog page of Thesis Theme Tools uses the Info Pane to display recent post, popular article, and recent comment widgets. Imagine what you could do with that! An example of using something like the Tabbed Info Pane is on Yaro Starek’s Entrepreneur’s Journey site.

A few of the features of the Tabbed Info Pane are:

• Easy to set up and use.
• It is very flexible and can be used in a lot of different ways.
• Requires no plugins. It is written entirely in JavaScript and CSS.
• Coexists with JQuery sliders, menus, featured posts plugins and other JavaScript elements
• Its simple programming ensures trouble-free operation.
• Can contain almost any kind of information or element
• Highly configurable. You can change almost everything about the appearance of the Info Pane.
• SEO friendly. The information is contained in the HTML of your page so Google’s and other bots can index it.

The Tabbed Info Pane is based on the open-source “JavaScript tabifier” project by Patrick Fitzgerald at BarelyFitz Designs. My thanks to him for this and many other projects he describes on his site.

Rather than copy the files shown below, I recommend you get all the files in a single zip file. You can download it by clicking here.

Navigation in this tutorial

This article is in 5 parts. If you want to skip to a particular part, just click on the links below:

• How the Tabbed Info Pane works contains all the code listings for the Tabbed Info Pane.
• Setting up the Tabbed Info Pane shows you how to set up the files for the Info Pane.
• Usage Tips for the Tabbed Info Pane has tips for customizing the Info Pane.
• How to use widgets in the Tabbed Info Pane will be a section of particular interest to many readers.
• Troubleshooting the Tabbed Info Pane. Although the Info Pane is very simple and trouble-free, I have listed some items I’ve encountered while using it.

How the Tabbed Info Pane works

The Tabbed Info Pane has four files. Each has a particular role to play in making the Info Pane work.

The first file is the “tab_pane-minimized.js” file, which as its name implies is a minimized JavaScript file. If you choose to copy the code below instead of using the zip file, be sure to name the file “tab_pane-minimized.js”. There are no configurations required in this file.

/* tab_pane-minimized.js by Patrick Fitzgerald pat@barelyfitz.com */
/* Copyright (c) 2006 Patrick Fitzgerald */

function tabberObj(argsObj)
{var arg;this.div=null;this.classMain="tabber";this.classMainLive="tabberlive";this.classTab="tabbertab";this.classTabDefault="tabbertabdefault";this.classNav="tabbernav";this.classTabHide="tabbertabhide";this.classNavActive="tabberactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabberid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg];}
this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null;}}
tabberObj.prototype.init=function(e)
{var
childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false;}
if(e.id){this.id=e.id;}
this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1;}}}
DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title='';}
if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"");}
break;}}}
if(!t.headingText){t.headingText=i+1;}
DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabber=this;DOM_a.tabberIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabberid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId;}
DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li);}
e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabber:this});}
return this;};tabberObj.prototype.navClick=function(event)
{var
rVal,a,self,tabberIndex,onClickArgs;a=this;if(!a.tabber){return false;}
self=a.tabber;tabberIndex=a.tabberIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabber':self,'index':tabberIndex,'event':event};if(!event){onClickArgs.event=window.event;}
rVal=self.onClick(onClickArgs);if(rVal===false){return false;}}
self.tabShow(tabberIndex);return false;};tabberObj.prototype.tabHideAll=function()
{var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i);}};tabberObj.prototype.tabHide=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
div=this.tabs[tabberIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide;}
this.navClearActive(tabberIndex);return this;};tabberObj.prototype.tabShow=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
this.tabHideAll();div=this.tabs[tabberIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabberIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabber':this,'index':tabberIndex});}
return this;};tabberObj.prototype.navSetActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className=this.classNavActive;return this;};tabberObj.prototype.navClearActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className='';return this;};function tabberAutomatic(tabberArgs)
{var
tempObj,divs,i;if(!tabberArgs){tabberArgs={};}
tempObj=new tabberObj(tabberArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabberArgs.div=divs[i];divs[i].tabber=new tabberObj(tabberArgs);}}
return this;}
function tabberAutomaticOnLoad(tabberArgs)
{var oldOnLoad;if(!tabberArgs){tabberArgs={};}
oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabberAutomatic(tabberArgs);};}else{window.onload=function(){oldOnLoad();tabberAutomatic(tabberArgs);};}}
if(typeof tabberOptions=='undefined'){tabberAutomaticOnLoad();}else{if(!tabberOptions['manualStartup']){tabberAutomaticOnLoad(tabberOptions);}}

The second file is the CSS for the Tabbed Info Pane. It is named “tab_pane.css”. If you choose to copy the code, be sure to give your file the same name. Note that I heavily commented the code so you can easily make changes in its appearance.

/* Created by Patrick Fitzgerald March 27, 2006 pat@barelyfitz.com */
/* Copyright (c) 2006 Patrick Fitzgerald */
/* Modified and annotated by Mike Nichols October 9, 2009 */

/* all tabs font properties */
ul.tabbernav {
	/* size of all tab fonts */
	font-size: .9em;
	/* all tabs bold or not */
	font-weight: bold;
	/* all tabs font family if desired */
	/*font-family: Verdana, sans-serif;*/
	/* padding might be needed in some installations */
	/*padding: 3px 0;*/
	/* do not change this! */
	margin: 0;
}

/* all tab properties */
ul.tabbernav li a {
	/* border on top of tabs */
	border-top: 3px solid red;
	/* border color right and left */
	border-right: 1px solid black;
	border-left: 1px solid black;
	/* tab color */
	background: #F8FFC0;
	/* underline or not */
	text-decoration: none;
	/* font color */
	color: black;
	/* distance from top of letters to top of tab */
	padding-top: 3px;
	/* distance from bottom of letters to bottom of tab */
	padding-bottom: 3px;
	/* distance from right of letters to right edge of tab */
	padding-right: 8px;
	/* distance from left of letters to left edge of tab */
	padding-left: 8px;
	/* tab spacing */
	margin-left: 3px;
	/* do not change this! */
	border-bottom: none;
}

/* unselected tab hover behavior */
ul.tabbernav li a:hover {
	/* font color */
	color: white;
	/* tab color */
	background: red;
	/* border color */
	border-color: black;
}

/* selected tab properties */
ul.tabbernav li.tabberactive a {
	/* font color */
	color: blue;
	/* tab color */
	background-color: white;
	/* top border color */
	border-top: 3px solid blue;
	/* do not change this! */
	border-bottom: 3px solid #FFFFFF;
}

/* selected tab hover behavior */
ul.tabbernav li.tabberactive a:hover {
	/* font color */
	color: black;
	/* tab color */
	background: white;
	/* do not change this! */
	border-bottom: 3px solid white;
}

/* content box */
.tabberlive .tabbertab {
	/* padding around inside of box */
	padding: 10px;
	/* border color */
	border: 1px solid black;
	/* do not change this! */
	overflow: auto;
}

/* ===== DO NOT CHANGE ANYTHING BELOW THIS LINE ===== */

/* interface setup */
.tabber {}
.tabberlive { margin-top:1em; }

/* selected tab setup */
ul.tabbernav li {
	list-style: none;
	margin: 0;
	display: inline;
}

 /* hide unselected tab content */
.tabberlive .tabbertabhide { display:none; }

/* hide the heading */
.tabberlive .tabbertab h2, .tabberlive .tabbertab h3 { display:none; }

The next file is some CSS code that you place in your custom.css file. It defines the size of the info box and sets its font and other properties. It, too, is heavily commented so your customizations are easier.

/*-----------------------------------------*/
/* TABBED INFO PANE */
/* Created by Mike Nichols October 9, 2009 */
/*-----------------------------------------*/

/* size of tabbed info pane */
.tab_pane, .custom .tabberlive .tabbertab {
	height:100px;
	width: 500px;
}

/* properties of info pane */
.tab_pane {
	/* font color */
	color: #000000;
	/* font size */
	font-size:1em;
	/* font family if desired */
	/*font-family: Verdana, sans-serif;*/
	/* space from bottom to next object */
	margin-bottom: 5px;
	/* do not change this! */
	list-style: inside;
}

The last file contains 3 functions that go into your custom_functions.php file. They load the CSS file into the head of the page’s HTML, load the JavaScript file into its foot, and call and define the contents of your Tabbed Info Pane. Only the third function, “tab_pane_box” requires any configuration. It contains the HTML or PHP code you will display in your info panes.

/*-----------------------------------------*/
/* TABBED INFO PANE */
/* Created by Mike Nichols October 9, 2009 */
/*-----------------------------------------*/

/* load css into head */
function tab_pane_head() {
?>
	<link rel="stylesheet" href="<?php bloginfo('template_url')?>/custom/tab_pane/tab_pane.css" TYPE="text/css" MEDIA="screen">
<?php 
}
add_action('wp_head','tab_pane_head');

/* load JavaScript into footer */
function tab_pane_foot() {
?>
	<script type="text/javascript">
		document.write('<style type="text/css">.tabber{display:none;}<\/style>');
		var tabberOptions = { 'manualStartup':true, };
	</script>

	<script type="text/javascript" src="<?php bloginfo('template_url')?>/custom/tab_pane/tab_pane-minimized.js">
	</script>

	<script type="text/javascript">
		tabberAutomatic(tabberOptions);
	</script>
<?php 
}
add_action('thesis_hook_after_html','tab_pane_foot');

/* display tabbed info pane */
function tab_pane_box() {
?>
<!-- do not change these two divs! -->
<div class="tab_pane">
	<div class="tabber">

		<!-- each tab is in a div with the tabbertab class -->
		<div class="tabbertab">
			<!-- tab title placed in h2 tags -->
			<h2>TAB TITLE 1</h2>
			<!-- put your content here -->
			INFO PANE CONTENT	
		</div>

		<div class="tabbertab">
			<h2>TAB TITLE 2</h2>
			INFO PANE CONTENT	
		</div>

		<div class="tabbertab">
			<h2>TAB TITLE 3</h2>
			INFO PANE CONTENT
		</div>

		<div class="tabbertab">
			<h2>TAB TITLE 4</h2>
			INFO PANE CONTENT
		</div>

	</div><!-- tabber -->
</div><!-- tab_pane -->
<?php
}
/* HOOK YOUR TABBED INFO PANE TO A THESIS HOOK */
add_action('thesis_hook_before_content','tab_pane_box');

Setting up the Tabbed Info Pane

There are 4 easy steps to setting up the Tabbed Info Pane.

1. Set up a “tab_pane” folder

Make a new folder in your /custom folder called “tab_pane.” It should look like Figure 1 when you are finished.

2. Copy files into the “tab_pane” folder

There are two files that go into the “tab_pane” folder: “tab_pane-minimized.js” and “tab_pane.css”. If you have downloaded the zip file, they are contained in the “for-tab_pane-folder” folder. When you are done, your file structure will look something like Figure 2.

3. Set up your custom_functions.php file

Copy the contents of the “for-custom.css” file into your custom.css file. It does not matter where it goes. Do not copy the “for-custom.css” file to your server!

4. Set up your custom.css file

Copy the contents of the “for-custom_functions.php” file into your custom_functions.php file. It does not matter where it goes. Do not copy the “for-custom_functions.php” file to your server!

That’s it! Before trying the Tabbed Info Pane out, you will want to change the size of the box that contains it, as well as check the “add_action” statement at the end of the “tab_pane_box” function. Both of these actions are described fully in the next section.

Usage Tips for the Tabbed Info Pane

The Tabbed Info Pane is very easy to use. It is set up in the example files like you see it at the top of this page. But as mentioned, almost everything about it can be changed. Following are some of the things you can do:

1. Change the “tab_pane” selector in custom.css to the size box you want.

The default size of the Tabbed Info Pane is 500×100 pixels. You will want to change this to suit the column width of your page and how tall you want the box to be.

2. Change the “add_action” statement in custom_functions.php to where you want the Info Box.

This statement is at the end of the “tab_pane_box” function. The Info Pane can go anywhere you want it — even into a widget! The default hook for the Info Pane is right before the page content. The hook used for this article is “thesis_hook_before_post.”

3. Put content into the “tab_pane_box” function.

As stated, this can be almost anything that you can render in HTML and PHP. Pay particular attention to the comments in the code to make sure you don’t erase or overwrite anything important.

4. Edit the “tab_pane.css” file to change the Tabbed Info Pane’s appearance.

The “tab_pane.css” file is documented heavily, so you ought to be able to find what you want. Its selectors and properties define everything except the contents of the info pane itself. I have used standard CSS colors for the example above, but you can use any colors that you wish. Note that there are several selectors and properties that you should not change. Of course, no one will be watching you if you do change them, but the Info Pane will look very strange!

5. Edit the “tab_pane” selector in custom.css to change the info pane’s properties.

The fonts used in the info pane itself are governed by the “tab_pane” selector in your custom.css file. It also controls the distance around the entire box. Feel free to add properties to the fonts as needed.

How to use widgets in the Tabbed Info Pane

There are many widgets that can be called in PHP rather than on the widget panel of your WordPress dashboard. Using them in the Tabbed Info Pane is easy. The basic syntax to include them is as follows:

			<?php if (function_exists("WIDGET-FUNCTION")) WIDGET-FUNCTION(); ?>

For example, the recent posts widget code used in the example above looks like this:

		<div class="tabbertab">
			<h2>Recent Posts</h2>
			<?php if (function_exists("mdv_recent_posts")) mdv_recent_posts(); ?>
		</div>

Be sure not to leave out the “if (function_exists())” part of the code. If you simply call the widget and it doesn’t exist, then all you get is a blank screen when you refresh!

The three widgets that I use in the example are listed below, but there are many more. To see if a widget is usable, check out the widget description and look for instructions on calling it from PHP. If present, then you can use it in the Tabbed Info Pane.

The widgets used in the example Tabbed Info Pane at the head of this article are:

• Recent Posts by Nick Momrik. Get it from the WordPress Plugin Directory.
• WordPress Popular Posts by Hector Cabrera. You can get it either from the WordPress Plugin Directory or from the author’s plugin page.
• Recent Comments is also by Nick Momrik. It can be found in the WordPress Plugin Directory as well.

Troubleshooting the Tabbed Info Pane

The Tabbed Info Pane is pretty trouble-free, but here are some things that I have noticed while using it:

1. The tabs have a space below them and the info pane.

Try changing the “padding-bottom” property in the “ul.tabbernav li a” selector (the second one) of the “tab_pane.css” file. This determines the space at the bottom of the tab. If that doesn’t work, you can uncomment and possibly change the padding in the “ul.tabbernav” selector of the same file (it’s the first one), but that can produce some very strange results!

2. The font in the info pane is too large or too small.

Font definitions for the info pane are found in the “tab_pane” selector you put in your custom.css file. Feel free to add other font properties as needed.

3. The info pane flashes its contents right before the page is finished loading.

This is due to a slow video card, a slow internet connection, or a lot of slow-loading content in the info pane, such as the images in the example above. This, unfortunately, can’t be helped. Under normal circumstances, most people will never see this behavior.

Conclusion

Remember that you can get all the files in this tutorial in a single zip file. Download it by clicking here.

I hope you have found this tutorial instructive and helpful. Remember that your comments are always welcome, and that you can email me directly by clicking on the “Contact” button in the menu.

©2009 Michael L Nichols. All rights reserved.

Tags: