If you're still scratching your head trying to figure out what a 404 page is, read all about it here. Throughout this guide, you may find the use of FTP and SSH, so make sure you're comfortable with both the options.Note: Use web analytics software to track 404 events as well as to know how visitors behave on the custom 404 page. Do implement it without any fail.
1. Custom 404 Page for WordPress
We'll start with the most popular content management system on the web. A 404 page can be implemented in different ways on a WordPress site depending on the hosting environment or in the way the site owner wants to implement it.Let's first address the two popular web hosting environments before moving on to a generic and easy solution.
Step 1: Create a custom 404 page template.
You can either create this page in the root directory of the WordPress installation or in a subdirectory within the root. And, the page itself can be crafted in two different ways i.e., either a static HTML layout or a dynamic layout using WordPress template tags.
Let's name our custom template
404.html for a static HTML page or 404.php for a dynamic PHP-powered layout.Here's a basic static HTML layout for the 404 page (create it in the root directory of the WordPress installation) you can build upon and can extend as per your need.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Page Not Found - 404</title>
<meta name="description" content="This page does not exist - 404 error" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
body {
background: #499bea;
background: -moz-linear-gradient(left, #499bea 0%, #207ce5 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, #499bea), color-stop(100%, #207ce5));
background: -webkit-linear-gradient(left, #499bea 0%, #207ce5 100%);
background: -o-linear-gradient(left, #499bea 0%, #207ce5 100%);
background: -ms-linear-gradient(left, #499bea 0%, #207ce5 100%);
background: linear-gradient(to right, #499bea 0%, #207ce5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=1 );
}
section {
color: white;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
</style>
</head>
<body>
<section>
<h1>This page does not exist - 404 error</h1>
</section>
</body>
</html>
And, here's a basic layout (create this file in your current theme's directory) using PHP template tags.
<?php get_header(); ?>
<!-- Add custom content/text/messages here-->
<style type="text/css">
#primary { float: left; }
</style>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<header class="page-header">
<h1 class="page-title">Page Not Found</h1>
</header>
<div class="page-wrapper">
<div class="page-content">
<h2>This is somewhat embarrassing, isn’t it?</h2>
<p>It looks like nothing was found at this location. Maybe try a search?</p>
<?php get_search_form(); ?>
</div>
</div>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Once you've created one of these files, it's time to complete the configuration.
Step 2: Depending on the web server software you're using for the website, complete the following steps to get your very own custom 404 page.
- Apache web server: If your WordPress site is powered by Apache, add one of these lines within
.htaccessfile present in the root directory of the WordPress installation.
If you're using a static HTML template within the root directory of your website, add the following directive.
If you've created the file within a subdirectory, provide a complete relative path like this.ErrorDocument 404 /404.html
And, in case, you're using a dynamic PHP template within the current theme's directory, you can omit adding any directive within theErrorDocument 404 /SUBDIRECTORY-NAME/404.html.htaccessfile. But, to make it future-proof, add the following directive to tackle a situation when a theme does not have its own404.phpfile.
This directive ensures the fileErrorDocument 404 /index.php?error=404index.phpis used as a base template for a 404 error.
- Nginx web server: For websites using Nginx as their web server, follow these steps.
Create a static HTML file (mentioned above) at the document root used by your Nginx web server. For example, the path may be/var/www/html. If it's different in your case, choose that path.
Now open the default server file. In my case, the location of this file is/etc/nginx/sites-enabled/default. Change the path as per your server configuration. Now add the following directives within theserver { . . . }block.
And last but not the least, restart the Nginx service by issuing the following command at the shell prompt.error_page 404 /404.html; location = /404.html { root /var/www/html; internal; }
This completes the configuration of a custom 404 page for sites powered by Nginx web server.sudo service nginx restart
Note: If a 404 template is present in current theme's directory, it will take precedence over the file present in the root directory.
For technically challenged people who do not want to mess with code, a plugin is an ideal solution. Following are some of the plugins to easily create a custom 404 page for broken links.
1. 404page – your smart custom 404 error page: This is one of my favorite 404 plugins I often recommend on social media. It gives you easy control and options to create a custom 404 page. It also works seamlessly with PHP 7 powered servers. One can also configure action on direct access to the custom 404 page. Custom CSS can also be applied to a body class. Do once give this plugin, a try.
2. Custom 404 Pro: Loaded with features, this 404 plugin is a must-try for everyone. Redirection for both custom 404 page and an existing URL is available to the users. It also records tons of data and statistics related to traffic landing on the website through broken links. One can also filter logs and can see keywords which are generating maximum 404 errors. If not needed, disable the logs altogether.
3. 404 to 301: This is yet another highly popular 404 plugin with a large user base and good ratings. This plugin facilitates delivery of 404 error alerts via email. The error log file is sent as a PDF attachment for offline analysis. Apart from a global custom redirect, you can also configure per-page level redirects as and when required. It's ideal for business websites with high volume of traffic and too many 404 errors.
4. Easy 404 Redirect: This simple and lightweight plugin lets you redirect the visitors to a specific page or towards the homepage whenever a 404 error occurs. Because it doesn't have tons of options, the configuration is very easy. It's ideal for small to medium websites hosted on sluggish shared servers. You can easily enable and disable this 404 plugin anytime without any adverse effect on the live website.2. Custom 404 Page for Blogger (Blogspot)
This section deals with a custom 404 page for a blog hosted on blogger platform by Google. The process of creating one is quite simple and all you need is working knowledge of CSS and HTML.So, let's get started and learn to create a custom 404 page for a blogger blog.
Step 1: Open the blog's dashboard, and go to 'Settings → Search preferences → Errors and redirections → Custom Page Not Found' option.
Step 2: Click the 'Edit' link of this option to open the input field for adding the custom code snippet. It may look like as shown in the image below.
You can see, the custom code has a limit of 10,000 characters (approx.) which is good enough for most of the users.Step 3: Add the following CSS code in the text box.
<style type="text/css">
#blog-pager, .post-header, .status-msg-hidden, .feed-links { display: none; }
.status-msg-border { border: none; }
.status-msg-body { background: #fff; }
.status-msg-wrap { margin-top: 50px; }
</style>
Step 4: Right below this CSS code, add the following HTML code.
<div class="custom-404-content">
<h3>Oops! This page does not exist.</h3>
</div>
If you want to stylize different elements within this section, feel free to add classes to them (e.g:
.custom-404-content) as shown above and style them through the CSS section created in step 3.Note: Blogger template tags cannot be included in this section so make sure you hard code links to posts and pages, if any.
3. Custom 404 Page for Ghost Platform
If you're using the Ghost blogging platform, complete the following steps to create a custom 404 page for your blog. Although Ghost provides a default template for 404 errors, creating your very own version is highly recommended.So, here we go.
Step 1: Create a blank file named
error.hbs within current theme's directory.Step 2: Copy the following code in it and save the file.
<!doctype html>
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if (gte IE 9)| IEMobile |!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>{{code}} — {{message}}</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" href="{{asset "favicon.ico"}}">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="{{asset "ghost.css" ghost="true" minifyInProduction="true"}}" />
</head>
<body>
<main role="main" id="main">
<div class="gh-app">
<div class="gh-viewport">
<div class="gh-view">
<section class="error-content error-404 js-error-container">
<section class="error-details">
<img
class="error-ghost"
src="{{asset "img/404-ghost@2x.png" ghost="true"}}"
srcset="{{asset "img/404-ghost.png" ghost="true"}} 1x, {{asset "img/404-ghost@2x.png" ghost="true"}} 2x"/>
<section class="error-message">
<h1 class="error-code">{{code}}</h1>
<h2 class="error-description">{{message}}</h2>
<a class="error-link" href="{{@blog.url}}">Go to the front page →</a>
</section>
</section>
</section>
{{#if stack}}
<section class="error-stack">
<h3>Stack Trace</h3>
<p><strong>{{message}}</strong></p>
<ul class="error-stack-list">
{{#each stack}}
<li>
at
{{#if function}}<em class="error-stack-function">{{function}}</em>{{/if}}
<span class="error-stack-file">({{at}})</span>
</li>
{{/each}}
</ul>
</section>
{{/if}}
</div>
</div>
</div>
</main>
</body>
</html>
/core/server/views/user-error.hbs which is used by Ghost, by default, if no custom template is available in the theme's directory.Step 3: Freely edit the
<section> having a class name .error-content and its child elements as per your preferences to create a custom 404 content section.4. Custom 404 Page for Squarespace
If Squarespace platform is powering your website, creating a custom 404 page is a simple and user-friendly process. Here's how to do it.Step 1: Open your Squarespace dashboard and go to 'Pages → Not Linked → Create New Page' option.
Step 2: Now give this page an appropriate name (e.g. 404 Page) and freely edit and design this page as per your preferences using the visual editor.After the design and editing process is finished, a sample page may look like this.
As I said before, you're free to design the content of this page.Step 3: And, the last step is dead simple. From within dashboard, go to 'Settings → Advanced → 404 Error / Page Not Found' option.
Select the custom 404 page you've made earlier from the drop-down menu as shown in the image above and save the changes. Now all visitors landing through a broken link will be automatically redirected to the custom 404 page.5. Custom 404 Page for Jekyll on GitHub Pages
And, if your site is hosted on GitHub Pages and you're using Jekyll as the content management system, follow these steps to create a custom 404 page.Note: Make sure you're using a custom domain for the site.
Step 1: First of all, open your site's repository hosted on GitHub.Step 2: Now depending on the type of site you've created, a switch to a specific branch is required. If it's a 'User/Organization Pages' site, switch to the
master branch and if it's a 'Project Pages' site, switch to the gh-pages branch.Step 3: Now create a blank file named
404.html at the root level of the current branch.Step 4: Add the following content in the file and make sure
permalink: /404.html directive is added within the YAML front matter section as shown below.---
layout: page
title: "404 - File Not Found"
permalink: /404.html
comments: false
sharing: false
footer: true
---
<h1>Oops! This page does not exist.</h1>
<p>
Sorry, the page you are looking for is broken.
</p>
Step 6: Commit all the changes.