When the a loop runs can I have each new post it grabs its own HTML class?

For example

  • Loop runs
  • First item gets class="first"
  • Second item gets class="second"
  • and so on...

Or each post just gets an equivalent numbered class= 1, 2, 3, 4, etc.

I've just been using CSS with nth-child() to target each new item.

index.php (here's the loop call and get_template_part pulls content.php with the loop contents)


      <?php $the_query = new WP_Query( array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>5, 'paged'=>$paged) ); ?> 

      <?php if ( $the_query->have_posts() ) : ?>

      <?php $counter = 1; ?>

      <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

      <?php get_template_part( 'content', get_post_format() ); ?>


content.php ( Here's the contents start of the loop where I want to add the class )


      <?php include(locate_template('index.php')); ?>

      <?php $counter++; ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class( 'inline-post-' . $counter ); ?>>



2 Answers 2


You could use post_class within the loop.

<?php post_class( 'myclass-here'); ?>

This will add the necessary HTML class="" and WP defaults classes plus your new myclass-here class

You could then use counters within the loop to add a unique suffix to your post class

// Outside the loop initialize your counter
$counter = 1;


// Then in the loop
<?php post_class( 'myclass-here-' . $counter ); $counter++; ?>


Ok taking into consideration the new information in your question, the way to go is to set a query var and that variable would now be available in your template part.


Here you would set your query var just before calling get_template_part() and you would increment it just after. You still have to initialize outside the loop the $counter of course. it would look something like this

<?php set_query_var( 'counter', $counter ); ?>
<?php get_template_part( 'content', get_post_format() ); $counter++; ?>

then in your content.php file, you would just have to call your variable $counter

<article id="post-<?php the_ID(); ?>" <?php post_class( 'inline-post-' . $counter ); ?>>

don't increment your $counter in your content.php file and don't include locate_template() either

  • post_class() is what I need, but I hit a few snags. For one this example needs an incrementor or all post will be myclass-here-1 also the loop is in get_template_part, and I can pass it a variable with include(locate_template()) except the counter needs to be outside the loop and include(locate_template('index.php') wont work. I guess index.php isn't a template Aug 18, 2016 at 21:59
  • You could add a custom filter inside your template file and call the filter before calling get_template_part(), and incrementing $counter just after. If you update your question by posting some code, it will be easier to help you out. Also, why do you want to have a class name with an incremented suffix? couldn't you just use the $post_id as a way of differentiating each class. Better yet, using the post's HTML id tag is the best way to target each post individually. Or maybe you need to know in a predictable way each class beforehand?
    – bynicolas
    Aug 18, 2016 at 22:25
  • I've added a couple snippets of code. Maybe it will be clearer. Let's say I have a page with ten posts on it. The third post id will be forever changing when new posts are created. If I want to target the third post in the css there's currently no way but with nth-child(3) make sense? @bynicolas Aug 19, 2016 at 1:05
  • ok, I've edited my answer. you have to set a query var which will be available in your template part. The explanation is here
    – bynicolas
    Aug 19, 2016 at 4:14

I think this will help you.

if ( have_posts() ) :
    $post_count = 0;
    while ( have_posts() ) : the_post();
    $post_classes = 'post-' . $post_count;
    <article id="post-<?php the_ID(); ?>" <?php post_class( $post_classes ); ?>>
    <!-- post stuff here.... -->
  • Looks promising. Let's say this is in my index.php file but the loop contents are in content.php. I can't seem to use include(locate_template('index.php')); in content.php to use post_class($post_classes); there. The variables set in index.php won't get carried through to content.php . Too complicated to understand? Aug 19, 2016 at 0:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.