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
Post Content
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
Post ContentItems 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
”> Post ContentItems 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
”> Post Content
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.
