In this tutorial we are going to see how we can customize the 404 error in WordPress to make it more usable for our visitors.
404 error page
The first thing is to make sure minimize these types of errors whenever possible. If, for example, we detect an erroneous link, we will do our best to correct it. However, 404 errors cannot always be avoided, ending up on this page is as simple as typing a wrong url.
So have one custom 404 error page It is a good idea, in this way we take advantage of the opportunities that it offers us as we see in the tutorial. Let’s go there!.
Customize 404 error page with a plugin
There are several plugins in the repository that allow us to create or redirect URLs to a friendlier error page for our site users. , , special for Genesis Framework users or among others.
This time we are going to talk about the latter, which is developed by Peter Raschendorfer. In addition to being one of the highest rated plugins in this category, if not the best, it is a free plugin with very simple options that will help us customize the error page and offer alternatives to site users.
The first thing will be to go to the WordPress desktop, “Plugin / Add new”, and write the name of it “404page” (all together). Once located, as always, we install and activate it.
Immediately a new menu option will be created in “Settings”, “404 Error Page”, in which we will see the settings to configure:
Well, the options we find here are the following. Let’s start with the general ones:
- Page to be displayed as 404 page: This dropdown allows us to specify a specific error page, which can be the one that comes with the theme that we have activated, or one that we have created expressly for this issue.
Other options that this general section offers us are to check how this page would be displayed and edit it. In addition to these we find some advanced ones, we may not use them often, but it is worth knowing about them:
- Hide the selected page from the Page list: Hides the page selected in the above dropdown from all users who are not site administrators.
- Send a 404 error if the page is accessed directly by its URL: The only one that appears marked by default. WordPress will throw a 404 error if the selected page is accessed directly from its permalink.
- Force 404 error after loading page: By default, and with this option disabled, the plugin loads the selected page when a 404 error occurs and after that, once the browser is informed, it is removed. For WordPress the error no longer exists. If we activate this option we will be forcing a 404 error after loading the page, which would be generated on purpose so that WordPress has information about that data. It is advised to activate it only if necessary.
- Disable URL autocorrect guessing: By default it appears unselected. If it is checked, we will be deactivating the option of correcting URLs and automatic redirection to the page that WordPress deems that the user who accesses through an incorrect link can refer to.
- Send an HTTP 401 error instead of HTTP 404 in case the requested object is in trash: If enabled, and the content you want to access is in the trash, WordPress will send an HTTP 401 error instead of a 404.
- Activate Compatibility Mode: If this option is checked, compatibility mode will be activated. It is recommended to do it only when the 404page plugin does not work properly.
Well then, you will have already realized how easy it will be to customize the 404 error page with this plugin. We do not need to modify the advanced options, unless we need it for a specific issue.
We will simply have to create in WordPress the page to which users will be redirected when a 404 error occurs, select it in the drop-down that we saw at the beginning and save the changes.
When creating it, remember to follow the tips in the tutorial on . And if at any point you detect that it is something global, take a look at the fifth class of the .
Customize 404 error page from 404.php
Well, if we want to customize the 404.php file directly, the first thing we will have to do is locate it. you will find it inside the active theme folderspecifically in site/wp-content/themes/active_theme.
If we are going to modify it, it is advisable to do it in a child theme, we will have to create a new 404.php file if it does not exist in it. You can take a look at and to learn how to create a child theme, it is a good practice when we want to make changes to files.
With that said, let’s take a look at that code. The one we share corresponds to the one on page 404 of the popular Twenty Seventeen theme, which will serve as a base in many cases. Keep in mind that this code can vary more or less depending on the theme we are using, in fact if we work with Genesis for example it will be remarkably different.
We have indicated in bold two blocks that would be interesting to modify when customizing the 404.php file. The first is the “header” where we find the title of the page. Here we could change it, don’t forget to substitute the theme name.
The following is the block of the div that carries the class “page-content” which contains the information of the page. As we can see, it shows us a message that we could customize, and also the search engine. We could also include a paragraph where the user is invited to contact us, a form, a link to a resource page or the blog, as we are interested.
What we are looking for is to offer the user who arrives at this error page something that can be useful. The possibilities are really several, it is a matter of thinking about what we want to communicate and implementing it. So you know, there are options to choose from.
Summary and conclusion
Reducing 404 errors is important and in fact we should do it whenever possible, if you see that it is something global you can take a look at to fix them. The fact of minimizing them does not prevent some user from landing on the 404 error page, so it is a good idea to customize it.
We have seen two options to do this, one using the 404page plugin and creating a custom error page, and another creating or modifying the 404.php file preferably from a child theme. In that case we recommend you to do the and the .
And you already know it! If you subscribe to you will have access to the three courses mentioned, as well as many other classes. There are more than at your disposal 🙂