Post Template Block Style: Numbered Ranking
Adds a "Numbered ranking" style to the Post Template block inside Query Loops, which puts a large 1, 2, 3... next to each post, for "Top 10" and "Most popular" lists.
Opens WPIDE on
Code
add_action( 'init', function () {
register_block_style( 'core/post-template', array(
'name' => 'wpide-ranking',
'label' => 'Numbered ranking',
'inline_style' => '.wp-block-post-template.is-style-wpide-ranking{counter-reset:wpide-rank;}.wp-block-post-template.is-style-wpide-ranking>li{counter-increment:wpide-rank;position:relative;padding-left:3.5rem;}.wp-block-post-template.is-style-wpide-ranking>li::before{content:counter(wpide-rank);position:absolute;left:0;top:0;width:2.6rem;font-size:2.2rem;font-weight:800;line-height:1;text-align:center;opacity:.35;}',
) );
} );Notes
Select the Post Template block (inside the Query Loop) and choose the style. Works best with the List layout.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.