How to Improve Your 404 Page Template in WordPress
404 errors are not good for user experience. We showed you how to get email alerts for 404 errors on your site so that you can quickly fix them. In this article, we will show you how to improve your 404 page template in WordPress, so you can create a more useful 404 page that actually help users.
How Most WordPress 404 Page Looks Like?
404 page is often the most neglected page on most sites. Often a lot of WordPress themes 404 page looks like this:
This 404 page in WordPress is handled by a template file called 404.php.
If your configuration is really messed up, then the 404 page would look like this:
Neither of the above 404 pages are really useful.
When a user lands on a 404 page, they’re already frustrated. Why? Because they can’t find what they were looking for.
You need to help the user find the right page. You can help make this experience better by properly conveying the error, and give them a proper course of action (i.e What to do next).
This can be done by showing them other sections of your sites they can visit, give them a way to contact you, etc.
How to Create a Custom 404 Page in WordPress
First thing we need to do is start by creating a custom 404 page template. This can be done by editing the 404.php file in your WordPress theme.
If you are editing your theme directly, then we would urge you to at least backup your WordPress theme.
To make your 404 page more useful, we are going to show you how to add useful elements such as popular posts, most commented posts, recent posts, date archives, list of all categories, etc.
This will allow new users to have a quick glance at what you have to offer.
Display Most Popular Posts on 404 Page
We are going to use one of the best WordPress popular posts plugins to display popular posts on our 404 page.
First thing you need to do is install and activate the WordPress Popular Posts plugin on your website. Upon activation, you need to add this template tag into your 404.php file where you want to display the popular posts.
<?php wpp_get_mostpopular(); ?>
Display Most Commented Posts on 404 Page
The most commented posts section also relies on the popular posts plugin we activated in the last step. Simply add this template tag where you want to display your most commented posts.
<?php wpp_get_mostpopular("range=all&order_by=comments"); ?> You can also check out our guide on how to display most commented posts in WordPress.
Display Recent Posts on 404 Page
There are multiple ways to display recent posts in WordPress. The easiest way is to add this template tag in your 404 template to display your recent posts.
<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>
Display Random Posts on 404 Page
If you want to display a random list of posts in WordPress, then you can simply add this code in your 404 template where you want to display a random list of posts from your site.
<ul> <?php $posts = get_posts('orderby=rand&numberposts=5'); foreach($posts as $post) { ?> <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> </li> <?php } ?> </ul> Add Monthly Archives with Compact Archives
If you look at the WPBeginner 404 page, then you will notice that we are displaying our monthly archives listing using a plugin Compact Archives. Note we have adopted this plugin and are now maintaining it.
Install and activate this plugin the Compact Archives plugin. After activating the plugin, add the following code in your 404.php file:
<p><strong>By Date</strong></p> <ul> <?php compact_archive($style='block'); ?> </ul>
It will display your monthly archives like this:
A Sample 404 Template for WordPress
Here is a sample 404.php file based on the default WordPress theme Twenty Thirteen’s 404 template.
<?php /** * The template for displaying 404 pages (Not Found) * */ get_header(); ?> <div id="primary" class="content-area"> <div id="content" class="site-content" role="main"> <header class="page-header"> <h1 class="page-title"><?php _e( 'Not found', 'twentythirteen' ); ?></h1> </header> <div class="page-wrapper"> <div class="page-content"> <h2><?php _e( 'This is somewhat embarrassing, isn’t it?', 'twentythirteen' ); ?></h2> <p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentythirteen' ); ?></p> <?php get_search_form(); ?> <h3>Check out some of our popular content:</h3> <div class="col1"> <div class="col-header"> <h3>Popular Posts</h3> </div> <?php wpp_get_mostpopular(); ?> </div> <div class="col2"> <div class="col-header"> <h3>Most Commented</h3> </div> <?php wpp_get_mostpopular("range=all&order_by=comments"); ?> </div> <div class="col3"> <div class="col-header"> <h3>Recent Posts</h3> </div> <?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?> </div> </div><!-- .page-content --> </div><!-- .page-wrapper --> </div><!-- #content --> </div><!-- #primary --> <?php get_footer(); ?> Compare this 404 template with the default template in Twenty Thirteen. You will notice that right after the search form we have added our custom code to display popular, most commented, and recent posts. After that we added a little CSS to divide it into columns.
.col1, .col2, .col3 { width:30%; float:left; padding:0px 10px 10px 10px; height:450px; margin:0px; } .col3:after{ clear:both; } .col-header { background:#220e10; color:#FFF; margin:0px; padding:1px; text-align:center; } This is how the end result looked like:
We hope this article helped you improve the 404 page on your WordPress site. Feel free to play around with the code and experiment with different template tags to meet your needs.
You can also use this lists for cool 404 design examples as inspiration.
If you liked this article, then subscribe to our YouTube Channel for more WordPress videos. You can also join us on Google+ and Twitter.
