Search code examples
wordpresspost

Add class to wordpress loop


I would add class to the first four posts. To print like this on html:

 <post id="post-1"  class="classes first">
 <post id="post-2" class="classes second">
 <post id="post-3" class="classes third">
 <post id="post-4" class="classes fourth">

My Loop:

<?php query_posts('cat=15'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
<?php endwhile; endif; ?>

Thanks so much


Solution

  • You can make it that way:

    <?php query_posts('cat=15'); ?>
    <?php $count = 1; ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div id="post-<?php the_ID(); ?>" class="post<?php echo $count; ?>">
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <?php the_content(); ?>
    </div>
    <?php $count++; ?>
    <?php endwhile; endif; ?>
    

    In css, use div.post1, div.post2, div.post3 and div.post4