Adding bullet points and numbers to the WordPress Popular Posts widget

Adding bullet points

I am a big fan of the WordPress Popular Posts widget as it offers a simple way to surface your most engaging content and posts via widgets on your site or blog.

It is very simple to use, and the popularity of your posts can be displayed according to pages views, comments and more, over a time-period that you can define (e.g. most popular over 24 hours, 7 days etc…)

This means you can have multiple widgets on your blog exposing different content. For example, you could add a widget to your footer and call it ‘Most Popular of All Time‘ and display all time popular posts by page view. And, at the same time, you could have a widget in your sidebar called ‘Trending Topics’ and set it to display the most popular posts for the last 24 hours.

Both widgets would end up displaying different content, despite being generated from the same plugin, and would add more exposure for your content to your visitors.

I have use the WordPress Popular Posting this way across a number of websites that I am developing and it works like a dream.

When you activate the plugin and add the widget to your sidebar, you get the chance to add a title, but the default display of your links is a bit bland. This is what my sidebar widget for this blog looked like when I first put the widget in the sidebar:

Popular Posts with no formating

One thing that I quickly wanted to work out how to do was to add styling and formatting to this plugin. As you can see from the image above, it does the job well enough, but it looks unstructured and needs some formatting to help the readers eye see where one Post title ends and another begins.

Plus it would be nice to add bullets or numbering indicators.

The developers of the plugin have assembled a really simple guide to help you with the styling which you find here.

I used this guide to create the numbered ‘popular posts’ that you can see below:

Popular Posts with bullet points

Adding formatting to the WordPress popular Posts widget

I will share what I did below, which is not a huge departure from the instructions that can be found here, but I made some minor changes to the code so that it would be more suitable for my site (the original code has dark backgrounds on the numbered list and I wanted a plain white background). The instructions below are pretty much the same, but it took me a couple of attempts to customize it how I wanted as I didn’t want the colour schemes that are featured in the official guide – so I figured I may as well share it here for when I forget and need to come back and remind myself what I did, should I need to do it all again.

1. First we added the following code to our CSS stylesheet (Dashboard > Appearance > Editor > Style.css)

ol.wpp-list {
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}

ol.wpp-list > li {
position:relative; /* Create a positioning context */
margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
padding:4px 8px; /* Add some spacing around the content */
list-style:none; /* Disable the normal item numbering */
border-top:2px solid #666;
background:#fff;
}

ol.wpp-list > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:2em;
/* Some space between the number and the content in browsers that support
generated content but not positioning it (Camino 2 is one example) */
margin-right:8px;
padding:4px;
border-top:2px solid #666;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}

2. Then add your widget to the sidebar and click on the checkbox for Use custom HTML Markup in the ‘HTML Markup settings‘ and add <ol class="wpp-list"> and </ol> in the ‘Before/after popular Posts’ section, and then add <li>{title}</li> to the ‘Post HTML Markup‘ input box.

You can see the screenshot from our widget below to see where to paste the updates.
WordPress Popular Posts

And that was how we turned it into a numbered list with a white background.