Create a tabbed featured posts area in Wordpress
July 10, 2008
A couple of days ago I released version 2.0 of my premium news wordpress template - Simify, one of the templates main features is the tabbed area for the featured posts. In this tutorial I am going to show you how to produce a tabbed area for your featured posts on your blog complete with thumbnail support. This has become common in many premium wordpress templates so if you are wanting to go into this field then this is a must. I am going to use the Default Wordpress Template for this tutorial, but you can add it to pretty much any wordpress template you like.
-
Step 1 Set up the featured posts
The first thing you need to do is create four posts on your blog and add them to a “Featured” category. On each of these posts upload an image you would like to use as your thumbnail, instead of inserting it into the post, copy the URL from the Link URL field
and scroll down the page to where it says custom fields. In the Key field type “thumb” (without the speech marks) and in the Value field paste the URL of the image and click Add Custom Field:
-
Step 2 Styling the tabs
Open the header.php, index.php and style.css files from the wordpress template that you are using.
In the style.css file add the following code:
#tabs {
clear:both;
width:100%;
border:1px solid #CCCCCC;
background-color:#FFFFFF;
margin-top:10px;
}
#tabs p. #tabs h2 {
margin:0;
padding:0;
}
.thumb {
float:right;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
}
#tab1 {
display:block;
top:0;
left:0;
height:280px;
width:100%;
}
#tab2 {
display:none;
top:0;
left:0;
height:280px;
width:100%;
}
#tab3 {
display:none;
top:0;
left:0;
height:280px;
width:100%;
}
#tab4 {
display:none;
top:0;
left:0;
height:280px;
width:100%;
}
#tabstrip {
height:40px;
clear:both;
width:100%;
background-color:#eaeaea;
border-bottom:1px solid #CCCCCC;
}
#tabstrip .inner {
float:right;
padding-right:10px;
}
#tabstriptab1, #tabstriptab2, #tabstriptab3, #tabstriptab4 {
padding-left:15px;
padding-right:15px;
padding-top:8px;
padding-bottom:3px;
border:1px solid #CCCCCC;
float:left;
margin-left:5px;
margin-top:10px;
display:block;
text-decoration:none;
border-bottom:none;
height:18px;
z-index:100;
cursor:pointer;
}
#tabstriptab1 {
background-color:#FFFFFF;
height:19px;
}
There are two sections to this code, the first section is the tabs themselves, tab1 is set as display:block; whereas the other three are set to display:none; this means that tab 2, 3 and 4 will be invisible.
The tabstrip elements are also styled, because tab1 will be the first tab to be shown there is an extra bit of code underneath which overrides the settings for the other tabs, so that it shows up white.
-
Step 3 Adding the Code
What you are going to see now is some advanced wordpress coding, so don’t worry if you don’t understand it all. Add the following to the index.php file after the <div id=”content” class=”narrowcolumn”> and before the <?php if (have_posts()) : ?>
<div id="tabs">
<div id="tabstrip"><div class="inner">
<div id="tabstriptab1" onclick="javascript:tab1();">1</div>
<div id="tabstriptab2" onclick="javascript:tab2();">2</div>
<div id="tabstriptab3" onclick="javascript:tab3();">3</div>
<div id="tabstriptab4" onclick="javascript:tab4();">4</div>
</div></div>
<?php $countfeatured=0; ?>
<?php $my_query = new WP_Query('category_name=Featured&showposts=4');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<?php if ($countfeatured == 0) { ?>
<div id="tab1">
<h2 style="padding-top:8px;padding-left:8px;margin:0;font-size:20px;"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p style="padding-left:8px;margin:0;padding-bottom:10px;">Posted on <?php the_time('F j, Y'); ?> in <?php the_category(', ') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments', 'commentslink', 'Comments Off'); ?></p>
<div class="entry" style="padding-left:10px;">
<?php $thumb = get_post_meta($post->ID, "thumb", true);
if ($thumb != "") { ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img height="100px" src="<?php $values = get_post_custom_values("thumb"); echo $values[0]; ?>" alt="<?php the_title(); ?>" class="thumb" /></a>
<?php the_excerpt(); ?>
<?php } else { ?>
<?php the_excerpt(); ?>
<?php } ?><br/>
<strong><a href="<?php the_permalink() ?>">Read Post...</a></strong>
</div>
</div>
<?php $countfeatured++; ?>
<?php } elseif ($countfeatured == 1) { ?>
<div id="tab2">
<h2 style="padding-top:8px;padding-left:8px;margin:0;font-size:20px;"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p style="padding-left:8px;margin:0;padding-bottom:10px;">Posted on <?php the_time('F j, Y'); ?> in <?php the_category(', ') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments', 'commentslink', 'Comments Off'); ?></p>
<div class="entry" style="padding-left:10px;">
<?php $thumb = get_post_meta($post->ID, "thumb", true);
if ($thumb != "") { ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img height="100px" src="<?php $values = get_post_custom_values("thumb"); echo $values[0]; ?>" alt="<?php the_title(); ?>" class="thumb" /></a>
<?php the_excerpt(); ?>
<?php } else { ?>
<?php the_excerpt(); ?>
<?php } ?><br/>
<strong><a href="<?php the_permalink() ?>">Read Post...</a></strong>
</div>
</div>
<?php $countfeatured++; ?>
<?php } elseif ($countfeatured == 2) { ?>
<div id="tab3">
<h2 style="padding-top:8px;padding-left:8px;margin:0;font-size:20px;"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p style="padding-left:8px;margin:0;padding-bottom:10px;">Posted on <?php the_time('F j, Y'); ?> in <?php the_category(', ') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments', 'commentslink', 'Comments Off'); ?></p>
<div class="entry" style="padding-left:10px;">
<?php $thumb = get_post_meta($post->ID, "thumb", true);
if ($thumb != "") { ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img height="100px" src="<?php $values = get_post_custom_values("thumb"); echo $values[0]; ?>" alt="<?php the_title(); ?>" class="thumb" /></a>
<?php the_excerpt(); ?>
<?php } else { ?>
<?php the_excerpt(); ?>
<?php } ?><br/>
<strong><a href="<?php the_permalink() ?>">Read Post...</a></strong>
</div>
</div>
<?php $countfeatured++; ?>
<?php } elseif ($countfeatured == 3) { ?>
<div id="tab4">
<h2 style="padding-top:8px;padding-left:8px;margin:0;font-size:20px;"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p style="padding-left:8px;margin:0;padding-bottom:10px;">Posted on <?php the_time('F j, Y'); ?> in <?php the_category(', ') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments', 'commentslink', 'Comments Off'); ?></p>
<div class="entry" style="padding-left:10px;">
<?php $thumb = get_post_meta($post->ID, "thumb", true);
if ($thumb != "") { ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img height="100px" src="<?php $values = get_post_custom_values("thumb"); echo $values[0]; ?>" alt="<?php the_title(); ?>" class="thumb" /></a>
<?php the_excerpt(); ?>
<?php } else { ?>
<?php the_excerpt(); ?>
<?php } ?><br/>
<strong><a href="<?php the_permalink() ?>">Read Post...</a></strong>
</div>
</div>
<?php $countfeatured++; ?>
<?php } ?>
<?php endwhile; ?>
</div>
Basically what is happening here is that we are querying wordpress to get 4 posts from the database that are in the “Featured” category. We then use the counter ($countfeatured) to keep track of which of the 4 posts we are showing, once one post has been shown in its specific tab then the counter increments and it keeps doing this until the output is 4.
You should now have something like this on the homepage of your blog:
-
Step 4 Making the tabstrip work
Currently clicking the tabs will do absolutely nothing, in this step we are going to make them active, so that when you click on a tab in the tabstrip the corresponding tab shows. This is done by editing CSS styling through Javascript.
Open the header.php file and add the following before <?php wp_head(); ?>
<script type="text/javascript">
function tab1(){
document.getElementById("tab1").style.display = "block";
document.getElementById("tab2").style.display = "none";
document.getElementById("tab3").style.display = "none";
document.getElementById("tab4").style.display = "none";
document.getElementById("tabstriptab1").style.backgroundColor = "#FFFFFF";
document.getElementById("tabstriptab2").style.backgroundColor = "#eaeaea";
document.getElementById("tabstriptab3").style.backgroundColor = "#eaeaea";
document.getElementById("tabstriptab4").style.backgroundColor = "#eaeaea";
document.getElementById("tabstriptab1").style.height = "19px";
document.getElementById("tabstriptab2").style.height = "18px";
document.getElementById("tabstriptab3").style.height = "18px";
document.getElementById("tabstriptab4").style.height = "18px";
}
function tab2(){
document.getElementById("tab2").style.display = "block";
document.getElementById("tab1").style.display = "none";
document.getElementById("tab3").style.display = "none";
document.getElementById("tab4").style.display = "none";
document.getElementById("tabstriptab2").style.backgroundColor = "#FFFFFF";
document.getElementById("tabstriptab1").style.backgroundColor = "#eaeaea";
document.getElementById("tabstriptab3").style.backgroundColor = "#eaeaea";
document.getElementById("tabstriptab4").style.backgroundColor = "#eaeaea";
document.getElementById("tabstriptab2").style.height = "19px";
document.getElementById("tabstriptab1").style.height = "18px";
document.getElementById("tabstriptab3").style.height = "18px";
document.getElementById("tabstriptab4").style.height = "18px";
}
function tab3(){
document.getElementById("tab3").style.display = "block";
document.getElementById("tab2").style.display = "none";
document.getElementById("tab1").style.display = "none";
document.getElementById("tab4").style.display = "none";
document.getElementById("tabstriptab3").style.backgroundColor = "#FFFFFF";
document.getElementById("tabstriptab2").style.backgroundColor = "#eaeaea";
document.getElementById("tabstriptab1").style.backgroundColor = "#eaeaea";
document.getElementById("tabstriptab4").style.backgroundColor = "#eaeaea";
document.getElementById("tabstriptab3").style.height = "19px";
document.getElementById("tabstriptab2").style.height = "18px";
document.getElementById("tabstriptab1").style.height = "18px";
document.getElementById("tabstriptab4").style.height = "18px";
}
function tab4(){
document.getElementById("tab4").style.display = "block";
document.getElementById("tab2").style.display = "none";
document.getElementById("tab3").style.display = "none";
document.getElementById("tab1").style.display = "none";
document.getElementById("tabstriptab4").style.backgroundColor = "#FFFFFF";
document.getElementById("tabstriptab2").style.backgroundColor = "#eaeaea";
document.getElementById("tabstriptab3").style.backgroundColor = "#eaeaea";
document.getElementById("tabstriptab1").style.backgroundColor = "#eaeaea";
document.getElementById("tabstriptab4").style.height = "19px";
document.getElementById("tabstriptab2").style.height = "18px";
document.getElementById("tabstriptab3").style.height = "18px";
document.getElementById("tabstriptab1").style.height = "18px";
}
</script>
As you can see, each function changes the display setting of the tab and the background color and height of the tab on the tabstrip. Each function also corresponds with the code inside the tabstrip div on the index.php file.
Now go to the template and click each of the tabs and everything should now work.
-
Result
So there you have it, a fully functioning tabbed featured posts area in Wordpress. You can download the amended Default Wordpress Template here with the changes. If you have any questions please ask them here or on the forum.
John Petrucci
July 15th, 2008 at 10:58 am
Good.. I really appreciate.
Erica Mike
July 16th, 2008 at 3:19 am
It seems to be really great.