Tabbed Featured Posts

add to

There are probably many other ways to do this, but this one I’ve been using a lot so I will present you this one. The idea is to have more than one featured section on your blog home page (or any other page). If you need just one code is simple and you can find it on my latest free wordpress theme solemnity.

To show more than one featured post I will use tabbed navigation with small JavaScript and place latest post from every featured category into them with separate loop. And of course print the rest of latest posts as usual. So let’s get started!

For displaying latest posts we will use regular loop and exclude categories from featured section (you don’t want to have double, right) or include category that’s not in featured posts. Here’s the code

 
<?php if (have_posts()) : ?>
<?php query_posts('cat=5'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
 
Your post code here
<?php endwhile; ?>
next, previous page code here
<?php else : ?>
Not found code here
<?php endif; ?>
 

Ok, now we have printed posts from categories that are not in featured. Now let’s write small JavaScript for changing tabs, put this in header.php (include or just paste). NOTE: I will be using 4 tabs if you need more/less just change that number 5, and I will use just background color and if you want to use image use something like this 'url(/images/tab2.gif) no-repeat center top'

 
<script type="text/javascript"><!--//--><![CDATA[//><!--
 
function swaplayers(linkId,divId) {
for (x=1;x<5;x++){
var dynalinks = 'link' + x;
var dynadiv = 'div' + x;
document.getElementById(dynalinks).style.background='#666';
document.getElementById(dynalinks).style.color='#111';
document.getElementById(dynadiv).style.display='none';
}
document.getElementById(linkId).style.background='#333';
document.getElementById(linkId).style.color='#FFFFFF';
document.getElementById(divId).style.display='block';
}
 
//--><!]]></script>
 

So that’s JavaScript, of course you will modify it to suit your needs, also you can add more than one featured section etc.. Let’s write now that featured section and place it before main loop.

 
<div id="featured">
<div id="links" class="top color2">
<a href="javascript:;" id="link1" class="current" onClick="swaplayers('link1', 'div1')"> Featured 1 </a>
<a href="javascript:;" id="link2" onClick="swaplayers('link2', 'div2')"> Featured 2 </a>
<a href="javascript:;" id="link3" onClick="swaplayers('link3', 'div3')"> Featured 3 </a>
<a href="javascript:;" id="link4" onClick="swaplayers('link4', 'div4')"> Featured 4 </a>
</div>
<div id="red"></div>
<div class="guts">
<div class="guts2">
<div class="pad">
<div id="div1" class="current">
 
<?php $recent = new WP_Query("cat=1showposts=1"); while($recent->have_posts()) : $recent->the_post();?>
Featured content 1
<?php endwhile; ?>
<div style="clear:both;"></div>
</div>
<div id="div2">
 
<?php $recent = new WP_Query("cat=2showposts=1"); while($recent->have_posts()) : $recent->the_post();?>
Featured content 2
 
<?php endwhile; ?>
<div style="clear:both;"></div>
</div>
<div id="div3">
 
<?php $recent = new WP_Query("cat=3showposts=1"); while($recent->have_posts()) : $recent->the_post();?>
 
Featured content 3
 
<?php endwhile; ?>
<div style="clear:both;"></div>
</div>
<div id="div4">
 
<?php $recent = new WP_Query("cat=4&showposts=1"); while($recent->have_posts()) : $recent->the_post();?>
 
Featured content 4
 
<?php endwhile; ?>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
</div>
 
 <!--end featured -->
 

That’s pretty much it, I think code is clear and don’t need some special explanation. Just don’t forget to change category ID’s (and number of divs etc). Now just let’s apply some basic css to make it better

#featured {
width:557px;
background:#fff;
padding:0 0px 0 0;
margin:0 0 0 0px;
font: 10px arial;
}

#featured #links
{
margin:0 0 0 2px;
}

#featured #links a
{
color: #111;
display: block;
width: 140px;
height: 24px;
margin-left:-2px;
float: left;
font-weight:bold;
line-height: 25px;
text-align: center;
text-decoration: none;
background: #666;
}

#featured #links a.current
{
color: #fff;
background: #333;
}

#featured .guts
{
display:block;
height:auto;
text-align:center;
margin:0 3px 0 0;
}

#featured .guts2
{
display:block;
text-align: left;
background:#eee;
}

#featured .guts2 .pad
{
margin:0 12px;
color:#333;
padding:15px 0;
}

#featured .guts2 .pad div
{
display:none;
}

#featured .guts2 .pad .current
{
display:block;
}

#featured #red {
background:#111;
height:2px;
clear:left;
margin:0 3px 0 0;
}

Here’s the demo page for swapping divs and example in completed code. If you have any questions feel free to post them here in comments.

Have some feedback? Leave a comment

What Now?

Digg this
Save to Del.ico.us
Stumble This
Subscribe
Leave a Comment

Further Reading

• Five commonly neglected parts of a website that deserve detail
• Latest Design News, Daily
• Use Google Code to Speed Up Development
• Don’t forget about :active
• Improve your art direction abilities on 3.7CREA.TV

More?

Posted on 21. 04. 2008
Filed as Wordpress
By Dejan Cancarevic