Adding tabs easily in your WordPress theme

January 3, 2009 by Emanuele Feronato
Filed Under WordPress • 5 Comments 

When you are running a blog for some time, you will have more and more contents to display, and the same space where to make them fit.

That’s why a lot of latest WordPress themes feature tabbed navigation to save space.

This screenshot refers to Linoluna theme, but there are thousands more using this kind of navigation.

You can find various tutorials in the web explaining how to do it, but I am going to tell you what I made.

What’s the difference? I won’t give you cut/paste code, as in most cases it will only work in the themes the tutorials is referring.

I am going to tell you how I made the tabbed navigation showing recent, most popular and top rated posts.

I made my tabbed navigation with one thing in mind: lightweight.

So I discarded all framework-based tabbed navs and used DOMTab. Once I downloaded the last version, I only uploaded the main file, domtab.js, into my theme directory.

Then I changed header.php adding

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/domtab.js"></script>

before </head> tag.

Now it’s time to change the sidebar… forget the examples full of <p> and <div>, I just added

17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<h2>Posts</h2>
<div class ="domtab">
<ul class="domtabs">
<li><a href="#t1">Recent</a></li>
<li><a href="#t2">Most popular</a></li>
<li><a href="#t3">Top rated</a></li>
</ul>
<div>
<a name="t1" id="t1"></a>
<ul>
<?php $recent = new WP_Query("showposts=10"); while($recent->have_posts()) : $recent->the_post();?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
</div>
<div>
<a name="t2" id="t2"></a>
<?php tpbc_list(); ?>
</div>
<div>
<a name="t3" id="t3"></a>
<ul><?php get_highest_rated('both',18,10); ?></ul>
</div>
</div>

and then I just had to define some styles. Just remember not to change the domtab and domtabs class names, or it won’t work.

As for the styles, I did not upload the external CSS provided with the package, but just defined some styles to the new classes recently added.

And that’s it… see the result in my sidebar… now I am going to add some fancy icons and my lightweight tabbed navigation is done.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» WordPress themes are designs for WordPress - one of the most popular blogging software nowadays.
You will be pleasantly surprised by WordPress Themes provided by Template Monster. All of them are of professional design and high quality.

5 Responses to “Adding tabs easily in your WordPress theme”

  1. Shival on January 4th, 2009 10:46 am

    Pretty great…
    When do you plan to continue the survival horror tutorial?
    It’s the 4th highest rated post in your blog in that list..

  2. Hawdon on January 4th, 2009 11:20 am

    I found a bug…. (I think)
    On my computer using Internet Explorer (newest version.

    On your home page there are all the posts and for every post there is a small link that has the number of comments for the post. Like this:
    “5 Comments”
    That link will take you to the post and automaticly scroll down to the comments, right?
    Well for me it dose that but after a couple of seconds all the content of the post (all of it) vanishes and the side bar simply pops to the middle.

  3. dim on January 4th, 2009 11:39 am

    lot of thanks for this wordpress tutorial Emanuele ! thankyou ! ! !

  4. Walter on January 6th, 2009 10:21 pm

    Da un po fastidio che cambia altezza durante il hover. Per il resto, molto bello!

Leave a Reply




Trackbacks

  1. Adding tabs easily in your WordPress theme : Emanuele Feronato | thethemesecrets on January 4th, 2009 2:46 am

    [...] View post: Adding tabs easily in your WordPress theme : Emanuele Feronato [...]

Posts