The 404 error page is one of the most feared for anyone who has a website. It appears whenever the user tries to access a page that does not exist, either because they have made a mistake typing the URL or because they are trying to access a page that has been removed from the web and the necessary measures have not been taken so that it does not appear.
If your website is made with WordPress , surely the theme you use has a template to display the 404 error. These templates are usually more basic than the mechanism of a lollipop.
Most are only limited to displaying the typical “Error 404 – Page not found” or similar message and they are so pissed off. Total, it already fulfills its function to indicate that you have landed on a page that does not exist, right?
But what if I told you that you can take advantage of the 404 error to create a custom page with the elements you want instead of displaying the typical message?
Sounds interesting, right?
Well, in this post I am going to explain how to customize the 404 error page in WordPress to use it in your favor, and not against you.
Why customize the 404 error?
As I said, the vast majority of WordPress themes include a simple template for the 404 error notifying that the page does not exist.
This is usually the case from the most nefarious free themes, to the most popular premium themes in the world.
When a user arrives at a page on your website that doesn’t exist, they find that standard and boring message, and, apart from feeling frustrated that they didn’t find what they were looking for, that page doesn’t get their attention at all, so It is likely that they will end up abandoning your website. Come on, the only thing he achieves is to further depress the user.
On the other hand, creating a personalized 404 page offers you the possibility of attracting the user’s attention and taking the opportunity to take him where you want.
You can achieve this by making an attractive design and adding links to key places on your website, increasing the chances that a user who was lost on your website will end up browsing it until they find something of interest that appeals to them.
Well, if the explanation has convinced you, we’ll stop messing around and get down to business 😉
I will explain several ways to do it, so you can choose the one that best suits you.
Customize 404 page with Elementor Pro
Elementor Pro has become the preferred builder for many WordPress users (including me) to build a website from top to bottom. Here you can read all its advantages , in case you don’t know it yet.
If you decide to make your website with Elementor Pro or you already have it made with it, it will be a piece of cake for you to configure the WordPress 404 page . Of course, you need the Pro version, since the free one does not allow it to be done.
If your website is not made with Elementor and you have no intention of using it, below I will give you other options for you 😉
Let’s go there.
The first thing you have to do is go to the “Templates” tab, which is just below “Elementor”, and then click on “Add new”.
Select the type of template “Individual” and in post type, select “Page 404”. Then, give the template whatever name you want.
Customize 404 page with Elementor
Clicking “Create Template” will take you to the next screen, where you can choose some predefined layouts. You can choose one of them (either to use it as is or to work from it) or close the window and create a layout from scratch, just as you would create any other page with Elementor, adding any element you want.
Once the design is done, click the green “Publish” button and a window will appear for where you would like this design to appear.
If you have created the template following these steps and you have indicated at the beginning that it would be the template for the 404 error, it will already be selected by default, as you can see in the screenshot below.
So it only remains to click on “Save & Close”, and from then on, the 404 page will be displayed with the design you just created.
Example of page 404 customized with Elementor
As an example of a personalized 404 page with Elementor, I leave you a screenshot of my Webconomics project ( you can see more information here ):
As you can see, I try to make any user who lands on a page that does not exist, be interested in one of the websites that are offered.
To see the 404 page in real operation, you can enter the Webconomics website and write anything invented after the “.com/”.
Customize the 404 error with Divi
Divi is one of the most popular and used WordPress themes in the world (this website is made with Divi). Here you can see interesting information about Divi , in case you want to take a look at it.
Since its version 4, Divi allows you to create and customize a website from top to bottom, so it deserves a section explaining how to create a custom 404 page .
To do this, you have to go to the “Divi – Theme Builder” tab, click on “Add new template” and select “404 page”.
Next, click on “Add custom body”, and then on “Build custom body”.
From here, the procedure is the same as when you are going to create any page with Divi. You can choose to use a predefined layout, clone an existing page, or create a layout from scratch.
If you decide to create a design from scratch, you can insert the elements you want to your 404 page, as if it were a normal page.
Once the layout is done, click save changes, click the close layout button (top right), and, once on the Divi Theme Builder page again, click the save changes button.
It will be when you click on “Save changes” when the design of the 404 page replaces the default one.
Example of custom page 404 with Divi
For you to see an example of a 404 error page with Divi, I leave you a screenshot of this same website :
And so you can see the difference and how incredibly disgusting this page was, I leave you a screenshot of what the 404 error that came by default in Divi was like, before customizing it:
It’s a good change, isn’t it?
Configure 404 page with 404page
In the event that you do not use and do not intend to use either Elementor or Divi, I bring you another option to customize the 404 error with a plugin that you can use with any WordPress theme.
This is the 404page plugin , which you can install on your website like any other plugin .
You can find its options in “Appearance – 404 Error Page”. You will see that it has three tabs: General, Advanced and Explainer Videos, which are basically tutorials in English explaining how the plugin works.
We’re sticking to the General tab for now, which has a single option. But a single cool option, why not say so.
And it is that from here you can choose which page of your website you are going to use for when the 404 error appears.
That is, you can create a page on your website in any way (with the classic WordPress editor, with Gutenberg, with Visual Composer , or with the layout that you normally use on your website), and assign it as the default page for the error 404.
Modify 404.php file with code
Finally, I bring an option for the hardest, for those who do not want to know anything about plugins or layout designers because you are good at programming and you get along with the code.
This option consists of directly editing the 404.php file that comes with the theme you are using on the web, no matter what it is. This file is located in /wp-content/themes/youractivetheme.
If you choose this option, I recommend copying this file to a child theme , otherwise the changes you make will be lost when you update the theme.
The 404.php file can be different in each theme, and it may not have anything to do between one theme and another, so it is best to look at how the 404.php file of your theme is made and modify it according to your needs. needs.
I think it’s obvious to say, but choose this option to customize the 404 error only if you know what you’re doing, lest you mess it up by touching the wrong thing.
Conclusion
Well, you see, four different ways to customize the 404 error page . If you use Elementor or Divi on your website, focus on the options dedicated to it in each of the tools.
Otherwise, choose one of the other two options, depending on your knowledge or desire to fight with the code.
Whatever your choice, take advantage of the possibility to leave a 404 error page rigged up that doesn’t depress users for not having found what they’re looking for, and if you can take the opportunity to send them where you’re interested, all the better 🙂