Emanuele Feronato

Talking about WordPress.

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

before </head> tag.

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

Posts


Recent
Most popular
Top rated




have_posts()) : $recent->the_post();?>

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.