How to use multi tabbed menu in wordpress

Today i implement dynamic tabbed interface for my wordpress blog and after sparing few minutes i also fix it for some wordpress plugins like similar post and simple twitter and some others.I liked this feature and was thinking of its patch on wordpress.Multi tabbed menu often used in professional blogs and high profile blogs but their isn’t any documentation specially for wordpress.

Help: I get the tabber menu from barelyfitz designs and i implement it as per my requirement and modifications for wordpress.

Ingredients

A javascript for menus named as tabber.js

A CSS patch for the menu to display correctly example.css

Open the stylesheet of your current theme used in the blog (e.g style.css ) in a notepad, dreamweaver or in any text editor.
Now copy the example.css into your wordpress theme style sheet.
Now open your header.php file (header files control all the styling of the wordpress ).
Upload the javascript file tabber.js any where in your directory (remember the path where you upload the tabber.js )
Add the following code in your header,php file <script type=”text/javascript” src=”path of tabber.js“></script>

Now you are almost 50% done you just have to know the usage of tabbed menu.

Carefully watch the wp_menu code http://www.honeytechblog.com/wp-content/uploads/2008/08/wp_menu.txt

Example of the above code will look like this

What I’m Doing

we are learning “to use multi tabbed menu in wordpress”

License

This work is licensed under a Creative Commons Attribution-Non Commercial-ShareAlike 2.5 License

Some Interesting Posts

Their are many just go to www.honeytechblog.com

Another beautiful example of making tabbed menu that i have read recently and is similar to the above one is here

Note: feel free to comment here if you want to know more about wordpress implementation or have any problem in fixing this menus.

Digg

Dzone

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Similar Interesting Posts

Tutorials On

Designs

Follow @honeytech On Twitter

More than 2999 people are watching this spreadsheet having list of all the "Android Tablets" http://bit.ly/9AMRu1

etomyam Says:
August 19th, 2008 at 6:22 am

interesting, I’m trying it right now…

Jim Bertucci Says:
March 15th, 2009 at 8:57 am

Great explanation. I got it installed on my localhost, and got the same text you did, but all the text was not in any tabs, like yours. Can you help and advise me as to why we have no tabs?

Thanks

JIM

Honey Singh Says:
March 16th, 2009 at 1:46 am

Have you included the javascript in the header?
Have you call the right html tags for the posts?

Jim Bertucci Says:
March 16th, 2009 at 2:33 am

Thanks Singh, it was in the HTML tags. All going great now.

thanks again

Jim

Honey Singh Says:
March 16th, 2009 at 2:37 am

Yours welcome and i’m glad to kill some time of yours.
Feel free to bother me regards.

irwan Says:
April 30th, 2010 at 8:25 am

Dear admin,
i’ve installed it on my localhost, but its not work ?

i’ve input the script same of you and i’ve edited the path of the javascript with my javascript location, beside that i’ve insert the css on my style.css in my theme css, can you help me ?

Honey Singh Says:
May 1st, 2010 at 3:05 am

@irwan
Where actually you stuck?
Few pointer for you:
1. Scattered files indicates the issues in css. Please cross check the url in the header. (hot link the css file if possible)
2. Look of menu are file but jquery switching not working –>issues in js file, so cross check the file in header and try to hotlink in header.
Note: Hotlink or upload the file on the server and call the direct url in header of your theme.

Chris Says:
June 29th, 2010 at 5:33 am

Thank you for this fantastic information because finding relevant sites on this topic is sometimes hard to find. You did an excellent job covering the subject and I look forward to more posts from your site. Do you offer RSS Feeds or feedburner to get more content for our blogs? I will be sure to include links from my other blogs to yours.

Honeytech Blog - Top 10 | Tutorials | Internet Tools | How to | Guides