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.
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackbackfrom your own site.
Subscribe to our FREE Rss Feed
What's Hot
Similar Interesting Posts
- How to optimize website loading time and performance
- 101 List Of Awesome Wordpress Tips and Resources
- Download HoneytechBlog Christmas flavored wordpress theme
- Merry Christmas with a free Christmas Wordpress theme
- How to auto add excerpt in the wordpress blog home page
- Wordpress 2.6.2 Released, How and Why to Upgrade it now?
- How to hide a categories posts from Home page without using any plugin
- RapidWeaver – Excellent Tool To Design Beautiful Websites In Minutes
- Top 26 reasons to go for wordpress 2.6
- TOP 20 Best Of WordPress Theme Resource
- Getting a FREE (Banner Free) .COM registration
- How to show RSS feeds in a Wordpress Page and Posts
- How to hide a categories posts from wordpress RSS Feeds without using any plugin
- How to decide the robots.txt for Wordpress blogs
- 100+ Collected Great WordPress Video Tutorial List
Tutorials On
August 19th, 2008 at 6:22 am
interesting, I’m trying it right now…
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
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?
March 16th, 2009 at 2:33 am
Thanks Singh, it was in the HTML tags. All going great now.
thanks again
Jim
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.