How to Create a Tabbed Featured Post Area in WordPress

In this article I’ll show you how to Create a Tabbed Featured Post Area in WordPress. There are many themes that have built in tabbed featured post area. Also there are many plugins to show the tabbed featured post in specific area too. But each of them may have some lackings with your project requirement. So you may want to create your own hand coded tabbed featured post area in your existing theme.

In order to show a tabbed featured post in your home page you will need to write JavaScript code for the tab or you may use the jQuery UI Tab to serve the purpose. I’ll show you how to create the tab using jQuery (it will be easier).

To show featured post we will use regular WordPress loop and exclude categories from featured section. The loop code is given bellow:

<?php $featured = new WP_Query("category_name=featured&showposts=1"); ?>
<?php while ($featured->have_posts()) : $featured->the_post(); ?>
<div id="post-<?php the_ID(); ?>">
<?php the_content(); ?>
</div> <!-- end post-content -->
<?php endwhile; ?>

We will use this loop to query for every feature tabbed to fetch post data in that feature. The parameter passed in WP_Query function are category_name and showposts where parameter category_name is for the category slug name (NOT name) and the showposts is for how many posts you want to show. So the category_name parameter value will be different for each featured post query.

The Required JavaScript Code

Now to create tabs I have used jQuery. The jquery script code is as following:

<script type="text/javascript">
$(document).ready(function() {
$('.tabs-holder div#' + $('#tabMenu > li.current').attr('rel')).show();
$('#tabMenu > li').click(function(){
$('#tabMenu > li').removeClass('current');
$(this).addClass('current');
$('.tabs-holder div.tab').hide();
$('.tabs-holder div#' + $(this).attr('rel')).show();
});
});
</script>

The Required HTML Code

And the html code is:

<div id="tabbed_featured_posts">
<ul id="tabMenu">
<li id="tab1" rel="div1"> Featured 1 </li>
<li id="tab2" rel="div2"> Featured 2 </a>
<li id="tab3" rel="div3"> Featured 3 </li>
</ul>

<div>
<div id="div1">
<?php
$featured = new WP_Query("category_name=featured1&showposts=1");
?>
<?php while ($featured->have_posts()) : $featured->the_post(); ?>
<div id="post-<?php the_ID(); ?>">
<h1> <?php the_title(); ?> </h1>
<?php the_content(); ?>
</div> <!-- end post-content -->
<?php endwhile; ?>
<div style="clear:both;"></div>
</div>

<div id="div2">
<?php
$featured = new WP_Query("category_name=featured2&showposts=1");
?>
<?php while ($featured->have_posts()) : $featured->the_post(); ?>
<div id="post-<?php the_ID(); ?>">
<h1> <?php the_title(); ?> </h1>
<?php the_content(); ?>
</div> <!-- end post-content -->
<?php endwhile; ?>
<div style="clear:both;"></div>
</div>
<div id="div3">
<?php
$featured = new WP_Query("category_name=featured3&showposts=1");
?>
<?php while ($featured->have_posts()) : $featured->the_post(); ?>
<div id="post-<?php the_ID(); ?>">
<h1> <?php the_title(); ?> </h1>
<?php the_content(); ?>
</div> <!-- end post-content -->
<?php endwhile; ?>
<div style="clear:both;"></div>
</div>
</div>
</div> <!--end tabbed_featured_posts -->

The Required CSS Code

Now we need CSS to style the tabbed content nicely. The CSS is as follow (you may change it to customize a few aspects of the display):

* {
font-family: arial;
font-size: 13px;
letter-spacing: 1px;
}
#tabbed_featured_posts {
background-color: #CCC;
padding: 5px;
width: 560px;
}
#tabMenu {
margin: 5px 0 0;
padding: 0;
}
#tabMenu:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#tabMenu li{
background-color: #999;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
color: #111;
display: block;
float: left;
font-weight: bold;
height: 24px;
line-height: 25px;
text-align: center;
text-decoration: none;
width: 140px;
}
#tabMenu li.current{
background-color: #666;
color: #fff;
border-bottom-color: #666;
}
#tabMenu li:hover {
background-color: #666;
color: #fff;
cursor: pointer;
}
.tabs-holder .tab{
background-color: #666;
color: #fff;
display: none;
padding: 10px;
}
.tabs-holder .tab .post-content h1{
font-size: 20px;
}

The above code will create a tabbed featured post area with 560px width with 3tabs. Once you get the hang of it, you will be able to change a few values to make a tabbed featured post area with any width and use as many tabs as you need.