Create a Unique Custom WordPress 404 Page Exclusively For Your Website on Your Own

DECEMBER 20, 2016  12 MINS READ

What is 404 error page? 404 error page is shown when a page is either broken, discontinued or when not available in your website. So every time a user visits a link that doesn’t live on your site, they will be served a default 404 page. In this article, we are going to see custom WordPress 404 page for your WordPress website.

[tables_content title=”Table of content”][table_content link_type=”custom-link” title=”What does the numbers 404 mean?” link=”#404″][table_content link_type=”custom-link” title=”Where does the name 404 come from?” link=”#name”][table_content link_type=”custom-link” title=”How & What content to use in Custom WordPress 404 page” link=”#content”][table_content link_type=”custom-link” title=”Custom WordPress 404 page building plugin” link=”#plugin”][table_content link_type=”custom-link” title=”Creating custom WordPress 404 page on a child theme” link=”#child”][table_content link_type=”custom-link” title=”Adding custom WordPress 404-page using Widgetized Sidebar” link=”#sidebar”][table_content link_type=”custom-link” title=”- Setting up Widget Area” link=”#setting”][table_content link_type=”custom-link” title=”- Adding custom WordPress 404 page widget area to the 404 page” link=”#adding”][table_content link_type=”custom-link” title=”- Adding Widgets to the custom WordPress 404 page” link=”#widget”][table_content link_type=”custom-link” title=”- 404 page with custom CSS file in the child theme” link=”#final”][table_content link_type=”custom-link” title=”Custom WordPress 404 page examples” link=”#ex”][/tables_content]

create-custom-wordpress-404-page

What does the numbers 404 mean?

Let’s break 404 and see
4 – indicates a client error. The server is saying that you’ve done something wrong, such as misspell the URL or request a page which is no longer there.
0 – refers to a general syntax error. This could indicate a spelling mistake.
4 – just indicates the specific error in the group of 40x.

[exclusive_bonus title=”Reader’s Benefit:”]Value added benefit to WP Team Support readers. Free PDF download Create a Unique Custom WordPress 404 Page Exclusively For Your Website on Your Own [/exclusive_bonus]

Where does the name 404 come from?

It’s been said that 404 was named after a room at CERN European Council for Nuclear Research ( where Tim Berners-Lee worked) where the original web servers were located.

[Tweet “Create a Unique #Custom #WordPress #404Page Exclusively For Your Website on Your Own #WPTS”]

The office numbering system in CERN works like, the first number refers to building number (ie. building 4) and second two to the office number. But there are no room “04” in the building “ the offices start at “410” there is no Room 404 in CERN – it simply doesn’t exist, and certainly hasn’t been preserved as “the place where the web began”.

How & What content to use in Custom WordPress 404 page

404 page is not just a page where your visitors just come and go. You have to make 404 page to withstand the site visitor to your website, for that case only we use custom WordPress 404 page. You’ll want to give your visitor a few different ways to connect to the content they really want.

Your custom WordPress 404 page should contain the following content

An apology to your visitor since the page they search for is not present in your website.
Provide useful information to the visitors like the related content to their search or a search bar to make the visitor stay on the website.
Try to keep the custom WordPress 404-page style as same as to your website.
Provide a link to support or a way to contact you in the case of any trouble.
Add an important and most viewed post or product that may interest your visitor.

Custom WordPress 404 page can be build using WordPress plugin or manually by adding code to the PHP file in your theme file.

Custom WordPress 404 page building plugin

There are a number of plugins to help you with this out there. Most effective and simple among them is the 404page plugin.

Install the plugin, this plugin enables you to create custom WordPress 404 page easily like creating a normal WordPress page. Give your 404-page error title add images, content you want to add and other custom links.

create 404 page
404page settings

After creating the page head to your Appearance section and then select 404page. The plugin’s settings page will open.

Under the section Page to be displayed as 404 page select the 404 page you created. Select the check box you want and give create that’s all your custom WordPress 404 page is ready.

final 404 page

The plugin is almost compatible with every theme. Anyway successfully tested theme list is provided in the plugin page for further details.

[experts_box experts_title=”Easy One Click Solution:”]Customize your WordPress website give your own personal touch. Buy the Design and Customization Support Service[/experts_box]

Creating custom WordPress 404 page on a child theme

A child theme is the one which is created on your main or theme source file also known as the parent theme. The child theme is created so that you can make custom changes without affecting the source file and also you can update the theme without affecting the custom changes you made.

Almost all the theme file comes with the default 404 page and WordPress also have its default 404 page, in order to create custom WordPress 404 page we have to play a little with the 404.php file in your theme folder. This is your themes default 404 page.

[Tweet “This will override the default 404 page in theme and brings the #custom #WordPress #404page to life”]

Once you are done with your child theme setup, create a 404.php file in the child theme folder. This will override the default 404 page in your theme and brings the custom WordPress 404 page to life. Add the following coding in the custom 404.php file.

[code lang=”php”] <?php get_header(); ?>

<div id=”main-content”>
<div class=”wrap”>
<div id=”content-area” class=”clearfix”>
<main id=”main” class=”site-main” role=”main”>
<article id=”post-0″ <?php post_class( ‘et_pb_post not_found’ ); ?>>
<h1><?php esc_html_e(‘Page Not Found’,wpts); ?></h1>
<p><?php esc_html_e(‘Whoops. Looks like the page you were looking for doesn\’t exist. Try searching for something else using the search bar above’, wpts); ?></p>

</article> <!– .et_pb_post –>
</div> <!– #left-area –>

</div> <!– #content-area –>
</div> <!– .wrap –>
</div> <!– #main-content –>

<?php get_footer(); ?>
[/code]

This code will bring the header, footer, and sidebar like you gave in other web pages in your theme. In the middle, there is an apologize message for the visitor. Try adding a search bar or a sitemap in your custom WordPress 404 page because the user can get what they want there.

Adding custom WordPress 404-page using Widgetized Sidebar

Widgets are website blocks that can be added by simple drag and drop interface in the WordPress admin. The advantage of the widget is if we set up 404 widget properly then we can add images, contents, links to engage visitors and customize the 404 page to our wish.

Setting up Widget Area

Create a functions.php file in your child theme, if you already have one that is good then add the following coding in the the function.php file

[code lang=”php”]function widget_area_404() {

register_sidebar( array(
‘name’ => ‘404 Page’,
‘id’ => ‘404’,
‘description’ => __( ‘Widgets placed here will be shown on the 404 Not Found.’ ),
‘before_widget’ => ‘<div class=”et_pb_post”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h4 class=”widgettitle”>’,
‘after_title’ => ‘</h4>’,
) );
}
add_action( ‘widgets_init’, ‘widget_area_404’ );
[/code]

This code will register widget area for our custom WordPress 404 page and adds some default HTML. Next we have to add the widget area to the page.

Adding custom WordPress 404 page widget area to the 404 page

Get back to the 404.php file we first created in the child theme. This is the place we are going to bring the widget area into existence to your custom WordPress 404 page. Add the following code.

[code lang=”php”]<?php dynamic_sidebar( ‘404’ ); ?>[/code]

Dynamic_sidebar is a function provided by WordPress which allows you to display a widget area. Give it a name, and any widgets in a widget area will be automatically displayed whenever the code was placed.

Adding Widgets to the custom WordPress 404 page

404-widget

Once we register the widget space and bring it to the custom 404 page, we can start adding elements to the custom WordPress 404-page template.

Here you can add the recent post or popular post which may interest you reader. To achieve this install the WordPress popular post plugin. After installing the plugin add the following code in the 404.php file in the child theme.

For popular post

[code lang=”html”]<?php wpp_get_mostpopular(); ?>[/code]

For recent post

[code lang=”html”]<?php wp_get_archives( array( ‘type’ => ‘postbypost’, ‘limit’ => 10, ‘format’ => ‘custom’, ‘before’ => ”, ‘after’ => ‘<br />’ ) ); ?>[/code]

404 page with custom CSS file in the child theme

[code lang=”php”]<?php get_header(); ?>

<div id=”main-content”>
<div class=”wrap”>
<div id=”content-area” class=”clearfix”>
<main id=”main” class=”site-main” role=”main”>
<article id=”post-0″ <?php post_class( ‘et_pb_post not_found’ ); ?>>
<h1><?php esc_html_e(‘Page Not Found’,wpts); ?></h1>
<p><?php esc_html_e(‘Whoops. Looks like the page you were looking for doesn\’t exist. Try searching for something else in our sitemap’, wpts); ?></p>
<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>Recent Posts</h3>
</div>
<?php wp_get_archives( array( ‘type’ => ‘postbypost’, ‘limit’ => 10, ‘format’ => ‘custom’, ‘before’ => ”, ‘after’ => ‘<br />’ ) ); ?>
</div>
</article> <!– .et_pb_post –>
</div> <!– #left-area –>

</div> <!– #content-area –>
</div> <!– .wrap –>
</div> <!– #main-content –>

<?php get_footer(); ?>
[/code]

Along with this to style it like your theme use custom css file like below

[code lang=”css”]
.col1, .col2 {
width:30%;
float:left;
padding:0px 10px 10px 10px;
height:450px;
margin:0px;
}
.col2:after{
clear:both;
}
.col-header {
background:#220e10;
color:#FFF;
margin:0px;
padding:1px;
text-align:center;
}
[/code]

Use the color code, margin value and padding value as per your website theme.

To add the contact link drag and drop the text widget and the content you want like

Can’t find what you’re looking for? We are here to help you, reach our <a href=”/contact”>Contact Page</a> to get in touch right away.

You can also add an image of your website banner and link it to your homepage, as we always do in adding an image to our post.

Custom WordPress 404 page examples

As we shared in our WordPress stats, WordPress have websites from solo bloggers to New websites. Let us have a look at some of their custom WordPress 404 page.

[Tweet “Popular WordPress website’s #custom #WordPress#404page examples #WPTS”]

The New york Times 404 page appears like below

new_york_times_404_page

As you can see they have an apology message, recent news, link to their archive, contact link and search bar for their users. They really used the resources well in their 404 page.

Sony music 404 page appears like

sony_music_404_page


They keep it simple here, as they already have navigation bar up there so they are not much into the search bar, they got their contact links at the footer and provided an apology message along with a link to the home page.

The 404 page of us the WPTS is like

wpts_404_page

We kept it here straightforward and simple. As you can see we also provided an apology message and a link to our home page. Since we have navigation tabs at the top we avoided search bar.

Congrats

Congrats!! you made your own custom WordPress 404 page. Hope you guys find it useful, custom 404 pages are no longer a difficult task. Keep in mind that the first priority is to provide the visitors an easy path to find what they are looking for.

If you have any problem please share it in the comment section our WPTS member or WPTS readers will get into a discussion to help you. We and our readers believe in sharing and helping.

Leave a Reply

Your email address will not be published. Required fields are marked *