
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>
As you can see, it's a barebones layout which can be easily modified as per your preferences.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(); ?>
You're free to customize this PHP file adding useful sections, at will.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
.htaccess
file 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
.htaccess
file. But, to make it future-proof, add the following directive to tackle a situation when a theme does not have its own404.php
file.
This directive ensures the fileErrorDocument 404 /index.php?error=404
index.php
is 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.




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.

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>
This CSS snippet ensures that unwanted elements are removed from the content section giving you a blank slate to work upon.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>
As you can see, the HTML markup is minimal and just gives you a skeleton to create an extended version of the same. You can freely link to homepage and popular posts from within this HTML section.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>
This 404-page template has been taken from /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.

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.

Step 3: And, the last step is dead simple. From within dashboard, go to 'Settings → Advanced → 404 Error / Page Not Found' option.

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 5: Freely edit the HTML section to create a highly customized 404 page.Step 6: Commit all the changes.