What is a 404 page?
A 404 page is where you users will end up if they try to access a page on your website that does not exist.
“The HTTP 404, 404 Not Found and 404 error message is a Hypertext Transfer Protocol (HTTP) standard response code, in computer network communications, to indicate that the client was able to communicate with a given server, but the server could not find what was requested.”
The default 404 page that is shown to your users when they arrive at a page that no longer exists on your site will just say “No Results Found The page you requested could not be found. Try refining your search, or use the navigation above to locate your post.” This is obviously not that helpful for your users, not very good looking and may well push your users to close your site. A great idea to set up a custom 404 page that provides your users with some clear options and look nice too.
How to make a Divi 404 page?
Option 1: Use a plugin for custom 404 page
The (FREE) 404 Page plugin allows you to select any page to be used as your 404 error page. Just create a new page and design the 404 however you like (using the Divi builder for full control), set the page in the custom 404 page plugin settings, and your selected page will show up instead of the default 404 error. If you don’t want to use a child theme and edit the 404 php code then this plugin is the easiest and fastest way to create your custom 404 page.
Option 2: Edit your 404.php page
If you are willing to dive into a little code and/or don’t want to add yet another plugin to your site, then you can edit the 404.php file using a child theme. To customize your 404 page by editing the 404.php file in your child theme just follow the steps outlined below;
- You will need a child theme for this. If you don’t already have a child theme active on your site then you will need to add one or these updates will be lost when you update the Divi Theme. You can download a free blank child theme, install and activate it and you are ready to start. If you want to know more you can check out this post om creating a child theme for Divi and why you would need one.
- Go to Divi > Divi Library and “Add New”. Here you can use the Div builder to create your 404 page layout using the standard sections, rows and modules. Once you have finished the page design save the layout and take a look in the browser, where you will see something like https://www.divithemeexamples.com/wp-admin/post.php?post=123456&action=edit. You will need the number (123456 in this example) for the next step.
- in your child theme, create a 404.php file and add the following code into the file. The 123456 will need to be replaced with the header shortcode number for your 404 layout you created in the Divi library from the previous step. You can download the 404.php here rather than typing it out manually (I can’t add the code to this page as it will mess up the page!) Just unzip the folder and copy the 404.php into your child theme then edit the number using the one from step 2. Save your 404.php file and upload and your 404 page is now active. Just go to your website and add /thisisnotapage and you will see it.