Add Order Numbers to Items in WordPress With CSS

Steps, features or team cards often need a number in front of each item: 1, 2, 3. Typing the numbers by hand in WordPress means renumbering everything when you move or add an item.

This snippet adds order numbers to items automatically. Add the class dpc-numbered to the block that holds the items, and each item gets its number in front, in the order it appears on the page.

The snippet

/* Number the direct children of any block with the class dpc-numbered. */
.dpc-numbered {
	counter-reset: dpc-item;
}

.dpc-numbered > * {
	counter-increment: dpc-item;
}

.dpc-numbered > *::before {
	content: counter(dpc-item) ". ";
	font-weight: 700;
	margin-inline-end: 0.25em;
}

How it works

counter-reset starts a counter called dpc-item at 0 on each .dpc-numbered element, so two numbered groups on one page each start at 1.
Every direct child of that element increases the counter by one, and its ::before shows the current value followed by a dot.
In the block editor, select the Group, Columns, Grid or Query Loop post template block, open Advanced → Additional CSS class(es) and type dpc-numbered. Its direct children (the blocks inside a Group, the columns, the posts of a loop) are numbered.
The old version did the same with jQuery: it loaded jQuery, ran after the page had loaded and did not number items added later. CSS counters need no script and number new items too.

Add it with Scripts Organizer

In Scripts Organizer go to Code Blocks → Add New and give the block a name. Set Trigger location to Conditions with Template set to All, tick Header under Script location, set Header Mode to CSS, paste the CSS and publish. Scripts Organizer prints Header and Footer code only with the Conditions trigger on the front end, not with Everywhere.

You can also paste the CSS into Appearance → Editor → Styles → Additional CSS or your theme’s stylesheet.

Customise it

Leading zeros (01, 02): use counter(dpc-item, decimal-leading-zero).
Start at another number: counter-reset: dpc-item 4; makes the first item 5.
Style the number as a badge: give ::before a background, border-radius: 50% and a fixed width and height, and set display: inline-grid; place-items: center;.
A real list of text is better as a List block set to Ordered, which numbers itself and is announced as a list by screen readers.

Variant: numbers as real elements

If you need the number as an element, for example to animate it or to target it with other CSS, use this JavaScript in the footer (Footer Mode Javascript) instead of the CSS. Each item gets a <span class="dpc-number"> in front:

document.querySelectorAll('.dpc-numbered').forEach(function (list) {
	Array.prototype.forEach.call(list.children, function (item, index) {
		var number = document.createElement('span');
		number.className = 'dpc-number';
		number.textContent = String(index + 1);
		item.prepend(number);
	});
});

Gotchas

Only direct children are numbered. If your items sit inside an extra wrapper, add the class to that wrapper instead.
Screen readers usually read generated ::before content, but it cannot be selected or copied. Use the variant if the number must be part of the text.

In the Scripts Organizer library Import it with one click from Scripts Organizer.