Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Improve Your 404 Page Template in WordPress

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
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:

Twenty Fourteen 404 Page

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:

404 error handled by browser

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:

Displaying monthly archives one year per row using Compact Archives

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&rsquo;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:

A modified 404 page in WordPress showing popular posts

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.


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Pramendra Singh says:

    Thank you sir. This is what I was searching for long time. Great Post.

  2. Joe Wocoski says:

    Hi,

    I just read about the 404 page, but I am not code literate. Your article seems complicated and the popular posts does not float my boat.

    What would is a simple widget that I can use to display a single list of my main tabs on the 404 page under the search.

    Do you have a widget to send readers back to my main blog page or my other main 9 tabs?

    Thank you very much
    Joe Wocoski

  3. arman says:

    This code is showing headings of post but i want to show content of posts also .Thanks in advance

  4. WPBeginner Staff says:

    Try updating your permalink structure by visiting Settings -> Permalinks. Simply click on save changes button without making any changes to your permalink structure.

  5. On Boit Quoi Ce Soir says:

    Hello there, very nice article, thanks ! However something simply does not work. When calling on 404.php page (once plug-in activated), it just does not show. Anyway idea why this is happening?

  6. Ali Sajjad says:

    Thanks for this usefull post, i want to know how i can bend my first post from header just like a curve with shadow?

  7. CANALWP says:

    Thank you for this awesome article. I was wondering how can i add my category to this page and as well images. Thanks.

  8. Cheri- CreationScience4kids says:

    Thanks! I’d used wp.com for 2 years before moving to selfhosting. It was exciting to take out all the dates on my articles, but then I started realizing my most popular page by far was the 404! I did the work to use the redirect plugin (also great for posts with rotten original headlines), but haven’t done it for all 400+.
    The email alert will be a relief and the most recent/popular/etc posts idea is great. :-)

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.