What is the additional CSS class(es) for Jetpack top posts used for?

[I Love Jazz]

What is the additional CSS class(es) for Jetpack top posts used for?

 

[Meanders]

If you are digging around in the WordPress block settings and spot that "Additional CSS class(es)" box under the Advanced tab for your Jetpack Top Posts block, it is basically your escape hatch from boring default layouts.

Out of the box, that popular posts list just inherits whatever basic list styling your theme uses. It usually looks pretty generic. Dropping a custom class name in that box lets you isolate that specific block so you can hit it with your own CSS without accidentally breaking the styling on every other list on your site.

Why do people actually use it?​

Most folks use it because they want their top content to actually grab attention. You can use it to do things like:

• Kill the ugly default bullet points and maybe replace them with something cleaner.
• Force the list out of a vertical stack and into a horizontal grid layout.
• Tweak the typography by making the post titles bold or a completely different color from your regular body text.
• Add some breathing room by fixing the padding between the thumbnail images and the text.
• Throw a subtle background color or drop shadow behind the whole block so readers cannot ignore it.

How you set it up​

It is super straightforward. You just make up a name and type it into that field. Something like custom-popular-posts works perfectly. Just remember not to put a period in front of it inside that specific box.

Once you save that, you just open up your global CSS editor and write your rules targeting .custom-popular-posts. Your browser will pick up on that custom class and apply your new design exclusively to the Jetpack Top Posts block.