How to Add Counter Classes with a Global Variable

Ever wonder how to add counter/numbered classes to your posts? Is this the fourth post or the seventh? Well, if you have wished upon a star (or even if you didn’t, but it was more like cursing out your computer, that’s fine too), then your wish is about to come true with this tutorial.

In this tutorial’s example, we want our blog posts to have classes like “article-number”, and we can achieve this using the post_class(); function and a counter that we’ll set as a global variable.

It’s not as hard as you think. Also, keep in mind that this is a technique that can be applied to other scenarios too, and it’s not limited to just adding classes to our blog posts. Well, let’s get started, shall we?

Before we begin:

1. Some familiarity with loops and general PHP will help.
2. Might want to review what variables are. I also go over variables with better analogies in an old article of mine on the Pixafy Blog: Understanding WordPress’ $args Variable
3. Make sure you have a theme that you can edit files in – for my example, I’m using TwentyThirteen. The files I’ll be working in are: functions.php, index.php, and content.php.

What we’re going to achieve:

What is a Global Variable?

A variable is layman’s terms is a value that you store for more flexible use when coding – it’s a stand in for something else. I make some pie analogies on an older Pixafy article of mine if you’d like more review that’s a bit less technical than some other references on the web: Understanding WordPress’ $args Variable.

So a global variable is just a stored value that is global to the site, meaning you can grab it anywhere in your WordPress theme without having to worry about scope. I found this post on Codecademy’s Forums that explain local and global variables pretty well along with scope:

“Scope” is just a technical term for the parts of your code that have access to a variable.

Now that we’ve hopefully cleared up variables and scope, let’s move on to what we’re really here for – numbered classes using a global variable.

Step 1:

In order to count the blog posts on our homepage blogroll, and then apply classes according to those numbers, we’re going to have to create a counter. In our functions.php (I like to make my own little custom commented section at the very end) we’re gonna drop this in:

/** 
* GLOBAL VARIABLES 
*/
global $count; //Hey, WordPress, this is going to be global!
$count = 0; //Also, let's start counting at zero, okay WordPress? Cool.

Two things are happening here.

1. First, we’re telling WordPress that this  variable that is global – meaning we want to be able to access it within any other template file inside this theme when we call it.
2. Second, we’re defining what $count stands for by default. And by default, we’re setting it to zero because we want it to start counting at zero ( 0, 1, 2, 3 vs 1, 2, 3, 4). If you like, you can set this to 1 if you want to start counting from there, but for our example, let’s start at zero.

Step 2:

Next we need to open index.php assuming that there is no custom template for the homepage, the homepage is a blogroll/list of posts, and this is a standard post loop.

In index.php, we need to find our loop, which should look like this in TwentyThirteen:

And we’re going to add $count++; before the loop closes with endwhile:

<?php /* The loop */ ?>
     <?php while ( have_posts() ) : the_post();
          <?php get_template_part( 'content', get_post_format() ); ?>
 <?php 
 $count++;//add 1 to our counter every time we loop through a post
 endwhile;//loop closes ?>

Also, let’s clean up PHP tags since we only have PHP in this section:

<?php /* The loop */
while ( have_posts() ) : the_post();
     get_template_part( 'content', get_post_format() );
            
$count++;//add 1 to our counter every time we loop through a post
endwhile;//loop closes ?>

What this is saying is, hey WordPress, every time we loop through a post, for every post, we want to add one to the counter.

Step 3:

At the top of content.php AND on top of index.php, let’s drop this in the existing PHP tags like this:

global $count;//Hey WP, refer to that global var in functions!

I like to put it nearby the get_header() call since there are some lovely PHP tags for me to drop in code so I might as well. Here we’re just declaring our global variable for these two templates to access and refer to the value declared in functions.php – which is our $count set at zero.

Step 4:

Lastly, in content.php, we find the beginning of our article tag and look for post_class(); which should appear as below:

Finally, we add ‘article-‘ . $count  in between the parenthesis of post_class();

<?php post_class( 'article-' . $count ); ?>

What this is outputting is a class of “article-number” for every post within the post_class(); function. It’s a good idea to prefix your class instead of just dropping in $count and having just numbers for classes.

Summarizing it all up!

And there you have it! Numbered classes! Let’s go over what we did in this tutorial:

• Briefly reviewed variables, global variables and scope.
• Added and defined a global variable in functions.php. We started a counter at zero using a variable called $count.
• Edited the loop in index.php to add 1 to the $count variable each time a post loops through.
• Edited both content.php and index.php to declare the global variable up top for access with global $count;
• Finally edited content.php’s post_class(); function to output a class of “article-number” each time a post loops through.

I hope this helps in all your future CSS/JS wizardry!

If you have any questions, drop me a line. My next tutorial in the works will talk about adding “first” and “last” classes. Look forward to it!