Loading...

Blog

How to add a Featured Class to the First Post in the WordPress Loop using the Post Count

The WordPress post count can be used to achieve many different types of layouts or additions to the WordPress loop. One such instance you may encounter is the need to style the very first post of the WordPress loop as a featured post that stands out from the rest. In this tutorial we will teach you how to add a featured class to the first post in the WordPress loop using the post count.

Step 1: Setup a Basic WordPress Loop

In the first step of this tutorial we will setup a basic WordPress post loop. If you are familiar at all with WordPress development then this should be self-explanatory. If for any reason you do not understand the WordPress Loop please refer to the WordPress codex to learn more by clicking here.

PHP

<?php 
  if (have_posts()) :
  while (have_posts()) : the_post(); 
?>
  <article class=”post”>
    Post Content
  </article>
<?php endwhile; endif; ?>

Step 2: Setup and Initiate the WordPress Post Count

In the next step of this tutorial we will setup and initiate the WordPress post count. The post count needs to be placed in between the PHP ‘if’ and ‘while’ statements as shown below. Basically all we are doing here is creating a variable that is zeroed out before the loop begins so that it can then be incremented inside the WordPress loop.

PHP

<?php 
  if (have_posts()) :
  $post = $posts[0]; $c=0;
  while (have_posts()) : the_post(); 
?>
  <article class=”post”>
    Post Content
  </article>
<?php endwhile; endif; ?>

Items to Note:

  • The $post variable is just making sure that the post count is zeroed out.
  • The $c variable is initially zeroed out and will then be used to track the increment of posts inside the WordPress loop.

Step 3: Use the WordPress Post Count to add a Featured Class to the First Post in the Loop

In the final step of this tutorial we will use the post count to add a featured class to the first post in the WordPress loop. The post count PHP code needs to be placed inside the loop inside the post’s class declaration as shown below.

PHP

<?php 
  if (have_posts()) :
  $post = $posts[0]; $c=0;
  while (have_posts()) : the_post(); 
?>
  <article class=”post<?php $c++; if($c == 1) { echo ' featured'; } ?>”>
    Post Content
  </article>
<?php endwhile; endif; ?>

Items to Note:

  • $c++ will increase the initial $c variable value of 0 by 1 on each post inside the loop, it’s basically the same as c = c + 1.
  • Using the if statement of $c == 1 will only add the CSS class ‘featured’ to the very first post inside the WordPress loop.
  • You can now use CSS to add specific styling using the class ‘featured (.featured)’.

Full Code

PHP

<?php 
  if (have_posts()) :
  $post = $posts[0]; $c=0;
  while (have_posts()) : the_post(); 
?>
  <article class=”post<?php $c++; if($c == 1) { echo ' featured'; } ?>”>
    Post Content
  </article>
<?php endwhile; endif; ?>

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.