Adding Automatic Serial Numbers in GeneratePress & GenerateBlocks (Without PHP)

When working with GeneratePress and GenerateBlocks, one common requirement is adding a serial number (1, 2, 3…) to each item inside a Query Loop — for example, before post titles, images, or feature cards.

Many developers immediately look for PHP solutions, but in reality, CSS Counters can solve this problem in a much cleaner and faster way.

Let’s explore how.

The Problem

In a Query Loop:

• You may have 5, 10, or even 50 items
• You want each item to display a dynamic number
• The number should update automatically when items change
• And you want to avoid unnecessary PHP or performance overhead

The Solution: CSS Counters

CSS counters allow us to:

• Automatically count loop items
• Display numbers anywhere inside each item
• Keep the setup lightweight and maintainable

Here’s the exact CSS used:

.gb-query-loop {
    counter-reset: post-counter;
}

.gb-loop-item {
    counter-increment: post-counter;
}

.loop-serial::before {
    content: counter(post-counter) ". ";
    font-weight: 700;
    margin-right: 6px;
    color: #84A60A;
}

How This Works

1. Resetting the Counter

.gb-query-loop {
    counter-reset: post-counter;
}

This initializes the counter at the start of the Query Loop.

---

Incrementing Per Item

.gb-loop-item {
    counter-increment: post-counter;
}

Each loop item increases the counter by 1 — automatically.

---

Displaying the Number

.loop-serial::before {
    content: counter(post-counter) ". ";
}

This prints the number before any element that has the loop-serial class.

---

Where You Can Use It

You can place the serial number:

• Before the post title
• Above an image
• Inside a badge
• In a separate text block

Just add the class:

loop-serial

to any GenerateBlock element.

---

Why This Approach Is Ideal

✅ No PHP
✅ No database queries
✅ Fully dynamic
✅ Easy to maintain
✅ Works with any post type
✅ Perfect for GenerateBlocks workflow

This method aligns perfectly with a performance-first WordPress setup, especially when using GeneratePress.

---

Final Thoughts

Sometimes the best solutions are the simplest ones.
By using CSS counters, you can add powerful functionality to your WordPress layouts without increasing complexity.

If you’re building modern WordPress sites with GeneratePress and GenerateBlocks, this technique is a must-have in your toolkit.