Broken links in your website may have adverse effects both to your search engine ranking and the general impression about to your website, business or brand. Many webmasters try as much as possible to remove all broke links from their websites but some may persist. Even the best websites do have 404 errors since the visitors can type the wrong URL.

In my earlier days, working with WordPress permalinks was one of the most common causes of 404 errors. Learning how to manage, edit and redirect WordPress permalinks may be a good way of avoiding generating 404 errors relating to permalink structure.

Negative Effects of Broken Links or 404 Pages

When a visitor lands on a 404 page they are more likely to exit your website and not come back again. Broken links also increases your bounce rate which has an overall effect on your search engine ranking. Installing Google Webmaster Tools helps a great deal in tracking broken links on your website.

Whilst, having broken links in your website is not good, sometimes they are inevitable. For this reason it calls for an ingenious way of impressing your visitors who hit a 404 page and encouraging them to continue browsing more pages on your website. One of such useful ways of keeping visitors on your website is a well designed 404 page.

Best Practices of Creating a Good 404 Page

When you are building a 404 page there are a number of things that you should put into consideration. You should ensure you inform the visitor that is a 404 page and the resource they are looking for is not available.

Secondly you should provide the user with option to either return to the home page or search your website. Your message should be polite and friendly to keep the visitor on your website.

Designing Your 404 Page

Cool 404 Page Template

A good design for a 404 page should have a title showing the users this is a 404 page, the page should have a polite message about the error, and search function should be included. Link to the home page is an important way to keep the visitor on your website. You can also add a link to the popular pages or to the most relevant page like the archives.

The following is the design for the custom 404 page for this tutorial:

404 Design

Coding Your 404 Page

If you are not creating a theme from scratch by default all WordPress themes come with a 404 error page. You should locate this page 404.php inside your theme folder. You can open it and begin editing this page to suit your design.

If you are creating a WordPress theme from scratch, you should always include a 404.php page in your starting files. It is usually taken care of if you are building your theme using a starter theme or framework like Underscore.

Every theme comes with its own 404 page, to customize the 404 page in your theme; you should begin by opening the file 404.php in a text editor and try by editing the message on the 404 page then save and test it.

For the purpose of this tutorial we are going to use WordPress default theme 2014 and edit the 404 page to suit our custom design. The default WordPress 2014 theme 404 page looks as shown in the screenshot below:


We are going to customize to build a custom 404 page. This customization can be done on any other theme.

Editing 404.php Page

Open the 404.php page in your favorite text editor. When we open the 404.php page in a text editor we see the following code:

We should now edit this code to suit our design; we begin by editing the heading to replace it with our heading then move to create the different other HTML sections as per our design. We create the HTML markup then style it later. Here is the HTML code:

When you have added this code the page should look like the screenshot below:


We begin styling the page by adding the background image and positioning it appropriately.

Final Page

Here is the complete CSS code :

Final Product


Finally, designing a 404 page that is user friendly is one step forward towards improving your users experience as well as reducing your bounce rate. There are many ways you can choose to design your 404 pages but here is a good collection of creative 404 pages to inspire your design. I hope this tutorial helps you create your custom 404 page, if you require further assistance, or have questions feel free to leave comments below.


WordPress Codex