How To Create 404 Error Page In Wordpress

Let's start with the beginning: what does a 404-error page mean, after all?

A 404-error page means a broken link. It means that the content users searched for on that page doesn't exist or it does no longer exist.

404 is the status code a web server displays when the requested page cannot be found.

State of 404 error pages

Every website provides a 404 page when the requested content doesn't exist. Every website delivers a 404 page, even if there's no customization in place. It's important, however, to give users alternative options as to how they can continue navigation within the website.

There's a difference between browser-based 404 and page error 404.

Browser-based 404:

This type of error page implies that the website itself doesn't exist. It's highly frustrating for users. It implies that there's no other variant to find helpful information at the respective address.

default 404 page

Page error 404:

In a customized 404 error page, on the contrary, you get a chance to keep readers hooked and guide them through the website, to the information they need. A 404 error-page implies there's no content on the required page, but users can return to a different page and reinitiate their search.

Example of 404 page

Such a page needs to be customized accordingly, to be user-friendly and invite readers to stay on site. But how the error page can be customized?

Landing on an error page can be frustrating. Such a page needs to be customized to make it user-friendly and invite readers to stay on the site. To better the user's experience, you can create an interactive game. This will redirect your reader's attention away from the error, thus turning a mistake into an opportunity to create a positive brand impression. Remember, a well-designed 404 page can reduce your bounce rate and increase your conversions.

To be customized, you need to first find the 404 error-page into the WordPress website.

Where do I find the 404 error-page in my WordPress?

The theme in use for your website can have a 404-error template file. To find it, login to your WordPress Admin dashboard. In the left-hand menu, go to Appearance -> Theme Editor. On the right side of the screen, you should find a 404 template (404.php file) you have to customize as you want.

search for 404 page in WP admin

Important Note! For some themes, there's no 404.php file available in Theme Editor. That doesn't need to upset you, because there's a better solution to customize your 404-error page. Keep reading on.

To start the process of customizing a 404-error page, you also need to be aware of its usefulness for the readers. You need to be fully aware of its importance in that:

A customized 404 error-page is user-friendly, and it encourages navigation within the rest of the website, increasing time on site (when there's a risk for users to leave the website)

Custom 404 pages serve to increase branding. As long as they borrow the color scheme of the website, and the layout integrates well in the overall website presentation, typography is in line with that of other pages, customized 404 pages have their contribution to the brand personality in the online medium.

A 404-page acts like a soft-sell landing page: it helps retain people on the website and it can serve to better clarify the decision-making process for users that'll relaunch their search.

The actual customization of a 404 error-page

To bring specific elements to a 404 page and customize it to its best, there are 3 options available:

You have to modify the 404.php file. To do so, you have to adjust code for the error page customization. Some CSS & PHP knowledge is required.

Moreover, to be sure everything else stays in place in the website, you should ensure you have a backup of the website before proceeding to the actual changes in the 404.php file.

Another option is to take the 404-page template from Twenty Thirteen theme and apply it to your theme. Not very complicated, it also requires some coding knowledge to make the code transfer appropriately and have it work.

3. A third option is to use plugins for 404 pages. Pay attention, though, that you cannot use any plugin that's available for your WordPress website (That's why it's best to make a custom 4040 page with complete control over the page, and no reliance on a plugin).

And we'll explain you why:

When a user lands on a broken link, he/she is redirected to a custom 404 page. The same goes for search engine bots. Bots are redirected to a custom 404 page, once they identify a broken link. Plugins that make this redirection are not SEO-friendly, and they are to be avoided.

However, there's a plugin that you can safely use without affecting your SEO: it's 404Page. It doesn't make that redirection, and it's super easy to use. With 404Page, you can customize the page just like any other page in the website. There are some limitations, but for additional customizations, you'll need a custom 404 page and coding knowledge to make the changes.

In terms of basic customizations, and even more than basic, you can rely on 404Page.

Download the plugin

Let's see how you can use the 404Page in your WordPress, and make it simple:

404Page plugin for customizing 404-error pages in WordPress

Login to your WordPress Admin dashboard.
In the left-hand menu, go to Plugins -> Add New.
In the search bar placed on the right side of the dashboard, type in 404Page (the name of the plugin).

Click Install, then Activate plugin.
Next, create a page that'll be representative as your 404 error-page in the website.

Note that, for this doing, you have to go to Pages -> Add New -> create your own page.

The new page can be customized like any other page in the website, either in the WordPress Editor, or directly in the Customizer (as is the case for the Mesmerize theme).

How you can customize a 404-error page:

Add a specific title that explains that this is a 404 page.

You can add 1 or 2 blocks of content, if needed, for further indications or to embellish the page.

You might customize the background of the page. So it will perfectly integrate into the overall website design and, implicitly, its branding.

Elements to consider as potentially helpful in such a page:

A search box – it might help users directly search for the information they need, right in the error page
A link to the homepage – this is useful for orienting visitors in the navigation process, in case they landed on an error page
A funny message – the text in a 404-error page might be friendly, so users be inclined to dwell longer on the website and relaunch their search for the needed information; such a message sets up a connection with users
An explanatory message for the 404-error page display – if not funny, at least clear and explanatory, the text in the error page should help users. This text is bound to tell users why the error page is displayed at this step of their search process, and how to restart their browsing session
Additional links to where users can restart their browsing session – in line with the above text element, links that help users navigate through important pages with useful information are more than welcome in 404-error pages
The main menu – as we've mentioned useful links, the main menu cannot miss from the list. It includes the most important links for visitors to follow, so consider including the menu in the 404-error page, as well.
Some clues as to how users can get oriented into the website – this element is more generic, but we thought it might be useful to include it on the list, as incorporates several distinct elements (at your choice) that serve for orienting users within the website, and out of the error page.
You can choose to display popular posts, so visitors of the blog can restart their navigation from a widely appreciated post of yours
One might choose to display most commented posts, so users will restart their navigation within the blog from some posts presenting topics of high interest
You can choose to insert an archives widget into the error page, so visitors can browse through older posts, in search of topics they are interested in.

After the page you want to use is ready and customized, you have on more step to follow:

Check the results

In the left-hand menu of the WordPress Admin Dashboard, go to Appearance -> 404 Error Page.

Select the page you have just customized as your 404 page and set it as 404-error page that'll be displayedappear by default, when users land on a broken link:

Click Save Changes and that's it. You have finished setting up a customized 404-error page for your website or blog.

Now, re-enter your website address into the browser, and type just anything after the address/justanything. Here's how the page might look like:

404 page that's customized in ColibriWP

This is an example of 404-error page that we've customized with the 404Page plugin, for the Mesmerize Theme.

You have complete freedom as to how you can customize your page (as it is as just another page of your website). The above example is a simple suggestion: we wanted to show you 404-error pages can look greater than the default error pages.

Quick solution: is it really a solution to redirect all 404 pages to the homepage?

It's become common practice to redirect 404 pages to the homepage. The idea is to help users reinitialize their search within the website, without bothering with a 404-page error. But is this really a recommendable solution?

The answer is: no. Redirect 404 pages to homepage only if you have a great number of broken links and you want to solve the issue quickly. Otherwise, it's better to redirect pages individually, one by one and to the correct new pages.

We hope this article helps you customize your own 404-error page. You can put enough style into it as to make it more of a pleasant halt into the search process. Also, we hope you proceed to the 404-error page customization as soon as possible. You shouldn't neglect this aspect that might make you lose precious traffic on site.