How to create a custom 404 error page in WordPress

Updated Jul 17, 2020・2 minute read Post By Amine Dev
How to create a custom 404 error page in WordPress

How to create a custom 404 error page in WordPress

404 appears when you try to visit a page that is not on the site, and most people tend to leave this page and not think about its design. But taking some time and creating a design for this page can give a different user experience to your site visitors and determine whether or not to stay on your site as quickly as possible. Most often when you design the site, you check the validity of all the links in the site so that the user's error page does not appear, but over time you may delete a publication or change its name. It is also possible for the user to visit the page directly without visiting the site, which will lead to the error page. This page can be designed simply and easily with the help of ready-made Wordpress templates.

Understanding the 404 error

The 404 error message is a message that will appear to the visitor when the page he is trying to visit is not present. By default, this page is in WordPress, but it is not found in all WordPress templates on the Internet. If you create a custom WordPress template for your site, it increases the chance of a user staying on your site even when he does not find the page he is looking for when he finds a delightful and beautiful 404 page.

Default page for error 404

The 404 error page is included with some WordPress templates but not necessarily all the templates you find on the web, with WordPress looking for a default template on page 404.php in the template on the site but if you do not find this template you will see the default error message for Wordpress which It is inappropriate for the user.

If this page template does not exist, you can easily create a template for this page. Create a blank page named 404.php.

Here's the code we'll start with:

404.php   file

<?php get_header(); ?>

<h2>Error 404 - Page Not Found.</h2>

<?php get_sidebar(); ?>

<?php get_footer(); ?>
The previous code will show simple output, within the h2 tag. It also calls the header, the sidebar, and the footer. All of these elements are virtual and you can modify them to fit the template you are designing.

Make sure the page works ..!!

You can be sure that a 404 page works by typing your site URL and appending it to a page title or article that you know is not on your site.


If it does not work

If you are not redirected to this page it means that we have modified the htaccess file. On the server (server) in order to make a 404 page work, search for the htaccess file. In the installation of your WordPress and add the following line to it:

ErrorDocument 404 /index.php?error=404

But if you do not install Wordpress in the root folder of your server, you should point to the subfolder that WordPress has installed:

ErrorDocument 404 /YOURSUBFOLDERNAME/index.php?error=404
This will force the server to use the 404.php file

© 2020 DevDojo LLC. All rights reserved.