How to create and add tabber for your wordpress theme
Tabbers can be found on many websites and especially blogs. Why use them? Well, they can save you some space. Although there are plugins which will help you place a tabber in a widget area of your blog, it is better to do it manually (or so i prefer).
How does a tabber look like? Here is a sample image of a tabber:
There are many scripts for tabbers (Jquery tabber, MooTools tabber etc…) But i prefer the use of the following one in WordPress.
Why this Tabber and not some plugin or MooTab, Jtabber etc…
Jtabber, MooTabber or any other tabber which is based on javascript framework may give you problems when used with another script on your site (script conflicts) which may result in some of the scripts to not work at all.
It is also better to use when creating your own themes, you can place anything you want inside the tabs, widgetize the tabs etc.
Usage:
#1 Download
You can download the official latest Tabber script from http://www.barelyfitz.com/projects/tabber/, or if the link is not working you can download
#2 Upload or Place
Unpack the files and then upload it to your site (if it’s located online) or place them in your wordpress instalation if you are working locally to:
The CSS files should be placed in your stylesheet folder
wp-content/themes/your-theme-name/css/
Or you can copy the contents of the CSS files and copy paste them in your main stylesheet that is (styles.css).
The Javascript file should be placed in your themes scripts/js folder:
wp-content/themes/your-theme-name/scripts/
#3 Call the tabber
You will need to call (”reference”) the tabber in the header.php template of your theme. Use the following codes
1.<script type="text/javascript" src="<?php bloginfo('template_url');?>/scripts/tabber.js"></script>2.3.<script type="text/javascript">document.write('<style type="text/css">.tabber { display: none; }<\/style>');</script>#4 Create tabber.php and paste the codes
Create a tabber.php file in your theme’s directory and paste the following codes:
01.<div class="tabber">02.<div class="tabbertab">03.<h2>First Tab</h2>04.<ul class="custom-tabber">05.<li>First tab list nested in ul</li>06.</ul>07.</div>08.<div class="tabbertab">09.<h2>Second tab</h2>10.<ul class="custom-tabber">11.<li>Second tab list nested in ul</li>12.</ul>13.</div>14.</div>How would this look?
- First tab list nested in ul
The code is pretty clear for understanding, but here is a quick explanation for it:
The h2 is the name for a particular tab. For example you can use Recent Posts or so.
The ul with class custom-tabber is where your content should be located.
You can normally change those tags and style the tabber’s css per your needs.
#5 Include the tabber in the one of your template files
You can include the tabber in any template file of your theme, be it the header, sidebar, index… anyone, with the php include function
For example, open the sidebar.php and write down the following code where you would like your tabber to appear
1.<?php include("tabber.php");?>The tabber now should appear in your sidebar
Further customization
In between the ul tags (with class name custom-tabber), you can add specific function, calls to wordpress queries.
For example, you can widgetize the place, so the user can place anything he wants from the widgets section of the wordpress dashboard.
You can make a call for the most recent posts to be displayed, without the use of any plugins.