How to Add a Tabbed Content Section to Your Blog
Oct 4th, 07 | Comments are closed.If you’re a consistent blogger who has surpassed the 6 month mark, you’ve likely built up a notable resource for your visitors. Eventually, rotating older content in becomes a challenge. A few months ago I wrote about ways to bring dead posts to life, and 5 ways to sticky up your blog, but adding a tabbed interface is another (very clever) option for showing off your work.
Tabbed interfaces are easy to come by. In fact, Smashing Magazine has an excellent list put together. Most appear to be easy to implement, but I’m unlucky when it comes to scripting so I blundered around a bit before I found one I could use without inducing a migraine. I finally settled on domTab, by OnlineTools.org.
Once you’ve downloaded the files, you’ll need to add the script to header.php. If you’re running a Wordpress blog, don’t bother copy/pasting the script on domTab’s instruction page. It doesn’t work. Instead, use WP’s bloginfo template tag. The final result should look like this:
< script type="text/javascript"
src="< ?php bloginfo('template_directory'); ? >/js/domtab.js" >
< /script>
Note that I put the javascript into its own folder (within the theme folder) specifically named js. You don’t have to do this, but I’m picky about file structure. :) Ok, now that you’ve got the script linked, just add your content, and style it up. Because domTab is basically an unordered list, styling is easily done using the class and ID hooks provided. There’s even a sample CSS file in the download which you can use to get started. Here’s a screenshot of what I came up with:
Now, where to put it? The index page is a no-brainer, but I suggest using it as a follow-up to your most recent post. Depending on how your theme is laid out, look for a variant of the following snippet, and simply paste your list in after it (or it’s closing div).
< ?php comments_popup_link('Post a Comment'); ?>
Of course, precise control over content (without manual entry) carries a lot of appeal for most bloggers, so what if you could automate some of the content in your tabs? Tying on a plugin like Top Posts by Category, you could display your most popular entries dynamically. Just call the function from within your list:
< div > < h2 >< a name="popular" id="popular">Most Popular< /a>< /h2 > < ?php tpbc_list ();? > < /div >
Edit: (10/12/07) A plugin which works a little better with this idea is Popularity Contest. It can be used to power more tabs, such as most popular by category and/or month, in addition to all time. Using this plugin instead also allows you to configure the TPBC plugin to calculate popularity by most commented, thereby automating another tab. (TPBC can be configured to show popular entries by visits or comments, not both.)
Note: If you c/p any of the code excerpts above, don’t forget to remove the spaces. Oh and be sure to drop in the snippet for preventing the flash before the script renders the content properly (found in the How to Style a domTab section).
Believe it or not, that’s it!
IamWW currently has a really cool application of this technique for a main menu.
Oct 4, 07 | 10:53 amThat is a good tip. Thanks for writing this tutorial.
Oct 4, 07 | 11:00 amThanks for pointing that out Ian. I hadn’t thought of using it for main navigation at first, but now I wonder if it could be expanded to include tabbed sub-pages as well. I especially liked how he used it for Categories. I’m always trying to figure out the best way to display them… Will’s is a good one!
@Fred - you’re welcome. Glad you enjoyed it. :)
Oct 4, 07 | 2:44 pmI was just talking about this with a group of bloggers this week. It is definitely a cool feature and I need to figure out how to best implement it at my site.
Great work!
Oct 4, 07 | 8:18 pm[...] wind of this one this week, although I haven’t had a chance to go try it out yet. It’s an exciting idea, what with Darren Rowse of ProBlogger recently adding a similar feature to his site (see the post [...]
Oct 5, 07 | 12:08 amThanks for the links. I’m planning on creating a new blog, so I think these should come in handy.
Oct 7, 07 | 12:31 amYou’re welcome, Lorna, and good luck with your new blog!
Oct 8, 07 | 9:07 am[...] I hired Charity of Design Adaptations to implement it for me. Charity recently wrote a great tutorial on how to add tabbed content to your site - a must read for those who want to use this method for creating stickiness on their [...]
Oct 11, 07 | 10:03 am[...] Adaptations - How To Add A Tabbed Content Section To Your Blog If you’re a consistent blogger who has surpassed the 6 month mark, you’ve likely built up a [...]
Oct 14, 07 | 11:00 am[...] script itself is very lightweight - go ahead, try it out. You might also like this tutorial that explains it in further [...]
Oct 22, 07 | 2:28 am[...] Wordpress Designing explains how to put DOMtab on your wordpress blog. The DOMtab script adds uses blog real estate well and adds a cool effect for [...]
Dec 27, 07 | 1:04 pm[...] How to Add a Tabbed Content Section to Your Blog by Design Adaptations [...]
Jul 30, 08 | 11:04 pm[...] can manually create a tabbed based interface on your WordPress blog to help rotating older content. There are many great javascript Tab-Based Interfaces using [...]
Oct 6, 08 | 6:34 pm[...] can manually create a tabbed based interface on your WordPress blog to help rotating older content. There are many great javascript Tab-Based Interfaces using [...]
Oct 6, 08 | 10:40 pm[...] can manually create a tabbed based interface on your WordPress blog to help rotating older content. There are many great javascript Tab-Based Interfaces using [...]
Oct 7, 08 | 6:22 pm[...] can manually create a tabbed based interface on your WordPress blog to help rotating older content. There are many great javascript Tab-Based Interfaces using [...]
Oct 9, 08 | 2:10 pm