wordpress custom - add class to the first blog

Question

here is my blog page template:

<?php
/**
 * Template Name: Blog
 *
 * Standard blog template, create a static page for your blog and select this as the template.
 *
 * The "Template Name:" bit above allows this to be selectable
 * from a dropdown menu on the edit page screen.    
 */

get_header(); ?>

<div id="main_container">

<!-- IE7 float fix --><!--[if lt IE 7]><span class="iefix">.</span><![endif]-->

<div class="main">

        <div class="entries_full">

            <div class="entry_full">

            <div class="box_twothirds mt30 pr60">

<!-- BLOG POSTS BEGIN -->
<?php
$exclude_cat = get_option('bb_exclude_cat');
$exclude_temp = str_replace(",", ",-", $exclude_cat);
$exclude_cats = "-" . $exclude_temp;
$blog_posts = get_option('bb_blog_posts');
if($blog_posts == NULL) {$blog_posts = '5';}
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query('cat=' . $exclude_cats . '&paged=' . $paged . '&showposts=' . $blog_posts);
$count = 0;
while ($wp_query->have_posts()) : $wp_query->the_post();
?>

<div class="blog">

<!-- displays the blog posts -->
<?php $count++; if($count > 3) { $count = 1; } ?>

            <h3 class="<?php if($count > 1) echo "mt25 "; ?>mb12"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>

            <?php if(get_post_meta($post->ID, large_image_value, $single = true) != NULL || get_post_meta($post->ID, fullsize_value, $single = true) != NULL)
            { ?>
            <div class="mag_blog"><!-- magnifying glass div -->
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php if (get_post_meta($post->ID, large_image_value, true) != NULL) {echo get_post_meta($post->ID, large_image_value, $single = true);} else if (get_post_meta($post->ID, fullsize_value, true) != NULL) {echo get_post_meta($post->ID, fullsize_value, $single = true);} else {echo get_post_meta($post->ID, accordion_image_value, true);} ?>&amp;h=213&amp;w=600&amp;zc=1" alt="<?php the_title(); ?>" /></a>
        </div><!-- end magnifying glass div -->
        <?php } ?>
            <p class="meta"><span class="postdate"><?php the_time('F jS, Y') ?></span><span class="tags"><?php the_category(', '); ?></span><span class="comments"><a href="<?php the_permalink(); ?>#comments" title="comments"><?php comments_number('0 comments','1 comment','% comments'); ?></a></span></p>
            <?php global $more; $more = false; ?><?php the_content('<span>Continue Reading</span>'); ?><?php $more = true; ?>

            <div class="bar mt25 mb30"></div>

            <?php comments_template( '', true ); ?>
</div>

<?php endwhile;
if(function_exists('wp_pagenavi')) { wp_pagenavi(); }
else { ?>
<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if (  $wp_query->max_num_pages > 1 ) : ?>
            <?php next_posts_link( __( '&larr; Older posts', 'twentyten' ) ); ?>&nbsp;
            <?php previous_posts_link( __( 'Newer posts &rarr;', 'twentyten' ) ); ?>
<?php endif; ?>

<?php }
$wp_query = null; $wp_query = $temp; ?>
<!-- BLOG POSTS END -->

            </div>

<!-- Begin Sidebar -->
<?php include('sidebar.php'); ?>
<!-- end sidebar -->

            <div class="clear"></div>

            </div><!-- end div.entry -->

        </div><!-- end div.entries -->

<div class="clear"></div>

</div><!-- end div#main -->

<div class="clear"></div>

</div><!-- end div#main_container-->

<?php get_footer(); ?>
</code>

Just wonder if there is a way to add a class to the first blog item, or a way to make the first block item has different style than the rest... Or I need to edit on other php file?

Thanks guys.

Answer 1

You can do exactly that within the first line of your while() loop:

Replace:

<div class="blog">

With:

<div class="blog<?php if ($count === 0) echo " first_post"; ?>">

That should add a custom class to the first blog item on the page called 'first_post'.