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.

404 Error pages in WordPress – a few simple ways to customise your 404 Page

A quick guide to the 404 Error Page and WordPress. This post takes a quick look at the 404 Page and will show you how you can do some basic customizations to your 404 Page in WordPress.

The 404 Page – what is it?:
We have all seen them, the 404 page is the page that you see on a website when you request a page that no longer exists or cannot be found.

The 404 is an HTTP status code, and is probably one of the most recognizable errors on the internet and is understood by pretty much everyone regardless of your technical background or understanding.

They often look like this:
404 pages

If you aren’t sure how to view your 404 page then just type in a random url for a page that you know doesn’t exist on your site, maybe something like: www.yoursite.com/random111. That should trigger your 404 page.

Can you make 404 Pages better?:

In recent years, websites have gotten smarter about how they handle 404 errors – instead of showing users the bland, dull, and impersonal error page of the Web Server, why not use this opportunity to reduce bounce rates, or to make your user smile, or to drive them to more useful information, or to offer a solution etc…….basically anything is better than just a “Error 404: file not found” message.

This is a great (and short – only 4.08 minutes) TED talk from Renny Gleeson about the 404 Page, where he gives his own views on the opportunities of a good 404 page, and looks at some real world examples. Hopefully something here will inspire you to play around with your own 404 pages.

How can I customize my own 404 Error Page in WordPress?:

The good news is that most modern WordPress themes come with a 404 page (you will see a 404.php file in your website directory) that you can find easily in your ‘Editor’ in WordPress and edit.

  1. Go to ‘Dashboard
  2. Click on ‘Appearance’
  3. Click on ‘Editor’

From there you should be able to see your 404 Error template in the ‘Templates’ section on the right-hand side. Simply click on it to open it and edit it. You should be able to quickly spot the text that your current 404 page displays, and it is a simple task to change this – just type the new text that you want to appear and press ‘save’.

Here is what mine looks like below, with the text that I changed highlighted in the box.

404 page in wordpress

If your WordPress 404 page already has a search box and you are mostly happy with the layout and you just want to tweak the text a bit, then you can do that via this method.

Adding ‘Recent Posts’ or other content your 404 Page:

We have shown you how to change the text on your 404 Error Page above, but what if you want to add some extra features or provide links to other content on your site?

For our 404 Page we tweaked the text, and then added a few automated links to other posts and articles on our site – it won’t win any design awards, but at least it provides extra choices for any users landing on our 404 error page.

You can see it below:

New 404 Page

So how did we do it?:
We have added 2 pieces of content to our 404 page that updates itself automatically – ‘Popular Posts’ and ‘Recent Posts':

1: How to show Popular Posts:
Showing your popular posts (ordered by by page-view in our case) is a popular content module to show on a 404 page – after all, you may as well show your most popular content.

In order to do this you will need to install the WordPress Popular Posts plugin. This is a decent plugin that keeps track of your most popular content, and you can configure it to show popular content in the last 24 hours, 7 days, 30 days, or all time.

Once you have the plugin installed and activated, then just go to your 404.php page in the Editor add the following code in to the page, where you want it to appear:

<?php wpp_get_mostpopular("stats_views=0"); ?>

Note: We set the ‘stats-view’ to equal 0 as we didn’t want to show the number of page-views next to each entry (our numbers are still pretty low, so we didnt want to highlight that too much ;)). You have complete control over this, so if you want to show page view numbers then you can set ‘0’ to ‘1’.

2: How to show Recent Posts:
We also chose to show ‘recent posts’, and you can do this easily by simply adding the following code to your 404.php page:

<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 5, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>

Note: You can change the number of posts to show here by changing the ‘limit’ number. We have ours set to 5 (‘limit’ => 5,), but this could be any number that you want.

In addition to the Recent Posts and Popular Posts, we added a few header tags, line-breaks, and our final code looked like this – you can see the bits we added in bold text:


<?php
/**
* The template for displaying 404 pages (Not Found).
*
* @package Generate
*/

get_header(); ?>

<div id="primary" <?php generate_content_class(); ?>>
<main id="main" <?php generate_main_class(); ?> itemprop="mainContentOfPage" role="main">
<?php do_action('generate_before_main_content'); ?>
<div class="inside-article">
<?php do_action( 'generate_before_content'); ?>
<header class="entry-header">
<h1 class="entry-title" itemprop="headline"><?php echo apply_filters( 'generate_404_title', __( 'Oops! That page can&rsquo;t be found.', 'generate' ) ); ?></h1>
</header><!-- .entry-header -->
<?php do_action( 'generate_after_entry_header'); ?>
<div class="entry-content" itemprop="text">
<p>
<?php echo apply_filters( 'generate_404_text', __( 'Sorry! It looks like nothing was found at this location, we probably moved something or screwed up.... Maybe try one of the links below, or maybe a search?', 'generate' ) ); ?>
</p>
<?php get_search_form(); ?>

<br>
<br>
<h3>Popular Posts</h3>
<?php wpp_get_mostpopular("stats_views=0"); ?>

<h3>Recent Posts</h3>
<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 5, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>

<!-- .entry-content -->

<?php do_action( 'generate_after_content'); ?>
</div><!-- .inside-article -->
<?php do_action('generate_after_main_content'); ?>
</main><!-- #main -->
</div><!-- #primary -->

<?php
do_action('generate_sidebars');
get_footer();

There is lots more stuff that you can do with your 404 page. We intend to add some images to ours soon and generally make it look a bit nicer, and we will share that on the blog as soon as we do it.