How to Create Your 404 Page Template in WordPress

[easy-social-share counters=0 style="button"]

404 errors are certainly not good for user knowledge. We displayed you how can you get e-mail updates for 404 errors on your website so you can immediately fix to them. In this post, we can make it easier to better your 404 web page template in Word Press, so that you can set up a much more helpful 404 web page that basically help out users.

HOW MOST WORD PRESS 404 PAGE LOOKS LIKE

404 web pages are usually the most of the UN watched web page on a lot of websites. Generally lots of Word Press themes 404 web page is similar to this:

twentyfourteen404page

This 404 web page in Word Press is managed by a website template data file known as 404.php.
In case your settings is actually spoiled, and then the 404 web page can seem like this:

404-error-doc
None of the above 404 web pages are usually helpful.
When ever a user lands on a 404 web page, they’re actually frustrated. Exactly why ? Simply because they can’t look for what they have to were looking for.
You will need to guide the user find the correct web page. You can still help to make this working experience much better by properly conveying the error, and also give to them the proper plan of action ( i.e. What you want to do after that ).
This can be completed by displaying to them some other parts of your web sites it can visit, supply them with a method to contact you, and etc.

HOW TO CREATE A CUSTOM 404 PAGE IN WORDPRESS

The first thing we will need to do is a simple start of creating a custom 404 web page template. This will be done by changing the 404.php data file in your Word Press themes.
When you are changing your themes direct, and then we would likely urge you to at the least back up your Word Press themes.
To make up your 404 web page a lot more helpful, we will make it easier to insert helpful elements just like famous posts, most commented posts, recent posts, date archives, listing of all of the categories, and etc.
This will likely permit new consumers to have a fast check of what we need to offer you.

DISPLAY MOST POPULAR POSTS ON 404 PAGE

We can use the same of the better Word Press favorite posts plug-in to show favorite posts on our 404 web page.
The first things you must actually do is install and then activate the Word Press Famous Posts plug-in on your web site. Upon activation, you will need to insert this website template tag into your 404.php data file the place where you would like to show the favorite posts.

<?php wpp_get_mostpopular(); ?>

DISPLAY MOST COMMENTED POSTS ON 404 PAGE

The most of the commented posts part as well relies upon the well-known posts plug-in we activated within the last step. Just simply insert this website template tag in which you would like to show your most commented posts.

<?php wpp_get_mostpopular("range=all&order_by=comments"); ?>

Also you can check out our guideline on how exactly to show most commented posts in Word Press.

DISPLAY RECENT POSTS ON 404 PAGE

Usually there are a number of methods to show current posts in WordPress. The simplest way is for you to insert this website template tag in your 404 website template to show your current posts.

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

DISPLAY RANDOM POSTS ON 404 PAGE

If you would like to show a random listing of posts in Word Press, after that you can easily insert this code in your 404 website template the place you need to show a random listing of posts from your website.

<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

In case you look into the 404 web page, next you will likely note that we will be showing our per month archives listing using a plug-in Compacted Archives. Notice now we have adopted this plug-in as they are now maintaining it.
Install and also activate this plug-in the Compact Archives plug-in. After activating the plug-in, insert the following code in your 404.php data file:

<p><strong>By Date</strong></p>

<ul>

<?php compact_archive($style='block'); ?>

</ul>

It will certainly show you’re per month archives like that:

archives-monthly

A SAMPLE 404 TEMPLATE FOR WORDPRESS

This is a small sample 404.php data file depending on the default WordPress theme 2013 404 website 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 first this 404 website template with the default website template in 2013. You may have noticed that just after the research form we now have installed our custom code to show well-known, most of the commented, and then current posts. And after that we inserted just 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 just one way the end results looked as if:

modified-404-template

Hope you all like this Tuts by CodiTuts.com, if yes then keep us supporting by sharing this post, Cheerful Coding smiley.

Submit a comment

Pin It on Pinterest