How to make a tabbed menu for Single Post pages
January 25th, 2007 by alexBecause many people asked me how to make that tabbed menu that I have at the end of each post (you should be here to see the menu) I thought it will be nice to write a tutorial about how do that in Wordpress. If you liked that tabbed menu and you want to enchant your blog here are a few steps to follow…
1. Download these files from here and upload them to your blog folder, if your blog is directly on the root folder of the domain you should upload to alexblogging.com/ (example), if your blog is on a folder you should upload to alexblogging.com/blog (example).
2. After you uploaded the menu files you should paste this code into header.php just before </head> tag:
<script type=”text/javascript” src=”/tabber.js”></script>
<link rel=”stylesheet” href=”/example.css” TYPE=”text/css” MEDIA=”screen”>
<link rel=”stylesheet” href=”/example-print.css” TYPE=”text/css” MEDIA=”print”>
<script type=”text/javascript”>
document.write(’<style type=”text/css”>.tabber{display:none;}<\/style>’);
</script>
4. Now you should put the menu code on your single post page (single.php) just after the post content. Here is the code that I am using (you need those plugins instaled for this to work):
<div class=”tabber”>
<div class=”tabbertab”>
<h2>Post Info</h2>
This entry was posted on <?php the_time(’F j, Y’) ?> <?php _e(’at’); ?> <?php the_time() ?>
</div><div class=”tabbertab tabbertabdefault”>
<h2>Related Posts</h2>
Posts related with “<?php the_title(); ?>”
<ul>
<?php related_posts(); ?>
</ul>
</div><div class=”tabbertab”>
<h2>Most Popular Posts</h2>
<ul>
<?php akpc_most_popular(); ?>
</ul>
</div><div class=”tabbertab”>
<h2>Latest Posts</h2>
<ul>
<?php wp_get_archives(’type=postbypost&limit=10′); ?>
</ul>
</div></div>
5. But again, this is the content that I am using, you can add or change the content of the menu. Here is a an example of a simple tab just in case you want to make your own tabs:
<div class=”tabber”>
<div class=”tabbertab”>
<h2>Tab 1 Title</h2>
Tab 1 Content…
</div><div class=”tabbertab”>
<h2>Tab 2 Title</h2>
Tab 2 Content…
</div></div>
I hope this helps you because is my first tutorial. Anyway if you need any help I’ll be glad to answer all your questions.
January 25th, 2007 at 10:31 am
Thanks for the tip. I’m going to give this a shot soon. I’ve got the related posts, and the other tabs just might help drive some traffic to other pages!
January 25th, 2007 at 11:31 am
Ok Ryan, let me know if you need some help
January 26th, 2007 at 3:42 am
How to make a tabbed menu for Single Post pages…
Because many people asked me how to make that tabbed menu that I have at the end of each post (you should be here to see the menu) I thought it will be nice to write a tutorial about how do that in Wordpress. If you liked that tabbed menu and you want …
January 26th, 2007 at 3:47 am
Nicely done, and I liked your site too. It looks neat to me, and thanks for visiting my blog. Have a nice day Alex.
January 26th, 2007 at 4:01 am
Actually I really like your blog
I have subscribed to your RSS feed 
Thanks and have a nice day also !
January 26th, 2007 at 5:02 am
[…] How to make a tabbed menu for Single Post pages […]
January 26th, 2007 at 7:35 pm
Excellent job, Alex. How long did it take you to write the code? The tutorial itself is simple to follow.
January 27th, 2007 at 7:02 am
Actually i just modified a script named tabber and write this tutorial to include it in WordPress.
January 28th, 2007 at 1:38 am
Very nice Alex I Might look into putting that into my blog very soon. The menu just makes things look nice and professional.
Great Job.
January 28th, 2007 at 7:24 am
Ok Qwerty, let me know if you have any problems or need some help
February 3rd, 2007 at 12:18 pm
[…] make a tabbed menu for Single Post pages (tags: wordpress 代 ) […]
February 18th, 2007 at 4:10 pm
Hi, I came across this while I was searching for tabbed menu for content (the post itself) but I still think its extremely useful, thanks
I was also wondering how easy it was to apply the same concept to post content… but then I realised that it would probably involve fiddling with Wordpress itself I think…since the user would have to define e.g. ==[Tab - Chapter Blah]== ==[Tab - Pictures]== and such for each ‘tab’. For those wondering what I’m going on about… http://www.wpplugins.org/plugin/simple-forum - the tabbed content format.
March 15th, 2007 at 8:54 pm
Very, very cool. There’s so many things you can do with that tabbed feature.
Thanks for sharing the code with us.
March 22nd, 2007 at 12:20 am
Thank you very much!. I have used the Tabs innovatively!
March 24th, 2007 at 5:05 pm
Thank you.
June 11th, 2007 at 11:06 pm
Useful tips Alex… Thanks
June 12th, 2007 at 3:32 am
Hello Aris and welcome to my blog.
I am glad that you liked my post and I hope you will enjoy the articles that will be posted in the future also.