No matter how hard you try at some point one of your links will break. So instead of your users going to a generic 404 page we will show you how to create a custom 404 page in WordPress.
What is a 404 error?
We give a 404 error when our server can’t find the page that was requested. EG: www.itrecipes.co.uk/thispagedoesntexist
For example, imagine going shopping for chocolate ice cream, but you can’t find any, you enter the store but chocolate ice cream doesn’t exist. Instead of an empty shelf wouldn’t it better to see a sign saying Sorry, out of stock. This is like a 404 Error page, it allows us to show the user that there is a minor issue without them leaving the store and looking elsewhere.
Child Theme
We don’t need to create an Child Theme for this to work, but it will certainly help avoid issues when you update your theme.
Designing our 404 error page
A 404 error page shouldn’t be as simple as “Sorry out of stock”. It would be better for us to make an alternative suggestion like “Sorry out of stock, have you tried Mint Chocolate Chip ice cream?”. This small suggestion will help improve our bounce rate and keep a user on our website. Thus improving our SEO score and keeping a user online for longer (the longer someone is on your website the longer they will purchase, join a mailing list etc)
For our 404 error page we decided we wanted 3 things
- Search bar to help users find what they were looking for
- A message saying sorry, opps, 404 error
- List of recent posts
Look at 404 pages from other websites to get inspiration. To view them just add a forward slash and a random string of numbers and characters e.g. www.itrecipes.com/hfy6htyvvd the likelihood of this page existing is minimal. Another excellent source of inspiration is Creative Bloq’s 404 article, we looked at food blogs for inspiration.
WordPress 404
WordPress makes it very easy to create a custom 404 page, all we need to do is add a file called 404.php to our theme’s folder. That’s it, well we need to add some code to the 404.php, but we don’t have to do anything that’s too intense and if it goes wrong, we can just delete or rename the file and WordPress will go back to what it did before.
404.php
Depending on our theme we may already have a 404.php file you can edit, if you have created a child theme then you can create a new one.
Navigate to our theme’s main folder yourdomain.com/wp-content/themes if you can see a 404.php then we can either edit this file or copy this file to our child theme and edit. If there is no 404.php don’t worry we have the code below for a basic 404 error page.
Please follow our WordPress Backup recipe before cooking
How to create a custom 404 page in WordPress
Equipment
- WordPress
Ingredients
- Website Images
- Website Images
Instructions
- FTP onto your site, we are using FileZilla for this tutorial.
- In our theme folder (yourdomain.com/wp-content/themes/themename) Right click in the dictionary and select Create new file
- Enter 404.php and press OK
- Add the below code to your newly created 404.php then change the code where required
- Save and test your newly created 404 error page
Notes
<?php
/*
*
* Custom 404 error from I.T. Recipes
* itrecipes.com
*
*/
get_header();
?>
<div class="content-container">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Add your custom 404 page content below -->
<!-- Basic search box -->
<?php get_search_form(); ?>
<!-- 404 Image 1960 x 674 -->
<img src="<?php echo get_stylesheet_directory_uri() . '/images/404.webp'; ?>" />
<!-- Display 6 recent posts -->
<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 6, 'format' => 'html' ) ); ?>
<!-- Secret I.T. Recipes plug, Please delete if you don't want it there -->
<a href="https://www.itrecipes.com/" target="_blank">Code Provided By I.T. Recipes</a>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>