How to Create a Custom 404 Page in WordPress

A custom 404 page is a valuable addition to your WordPress website, as it provides a user-friendly and visually appealing error page for visitors who encounter broken links or unavailable content. In this tutorial, we will guide you through the process of creating a custom 404 page using a child theme in WordPress. By following these steps, both beginners and pro developers can enhance their website’s user experience and maintain a consistent design throughout the site. So, let’s get started!

Access the Child Theme Files

Before we begin, ensure that you have set up a child theme for your WordPress site. This tutorial assumes you already have a child theme in place. Access the child theme files through your WordPress theme editor or via FTP.

Create a Custom 404 Page Template

Inside your child theme folder, locate the ‘wp-content/themes/your-child-theme‘ directory. Create a new file named ‘404.php‘. This file will serve as your custom 404 page template.

Add the Header and Footer

To maintain consistency with the rest of your website, include the header and footer code in your 404.php file. Copy and paste the following code:

<?php
get_header(); // Include the header template

// Add your custom content for the 404 page here

get_footer(); // Include the footer template
Code language: PHP (php)

Design the Custom 404 Page

Now, it’s time to design your custom 404 page according to your website’s aesthetics. Use HTML and CSS to create the desired layout and styling. Here’s an example to get you started:

<?php get_header(); ?>

<div id="primary" class="content-area">
  <main id="main" class="site-main">
	<section class="error-404 not-found">
	  <header class="page-header">
		<h1 class="page-title">Oops! Page not found.</h1>
	  </header>
	  <div class="page-content">
		<p>It seems the page you were looking for does not exist.</p>
		<p>But don't worry, you can <a href="<?php echo esc_url( home_url( '/' ) ); ?>">go back to the homepage</a> or try searching for the content you're looking for.</p>
	  </div>
	  <div class="page-search">
		<?php get_search_form(); ?>
	  </div>
	</section>
  </main>
</div>

<?php get_footer(); ?>
Code language: PHP (php)

Test Your Custom 404 Page

To verify that your custom 404 page is functioning correctly, simulate a 404 error by visiting a non-existent page on your website (my 404 page) . You should now see your custom design in action.

Update Permalinks

To prevent any permalink issues with your custom 404 page, it is recommended to update the permalink structure in your WordPress dashboard. Navigate to ‘Settings’ > ‘Permalinks‘ and simply click ‘Save Changes‘. This ensures that WordPress refreshes the permalink structure and recognizes the custom 404 page.

That’s it! You have successfully created a custom 404 page for your WordPress website using a child theme. By following these steps, you can provide a more engaging and user-friendly experience for visitors who encounter broken links or missing content. Remember to always test your custom 404 page after making any changes. If you prefer using plugins for this purpose, there are several WordPress plugins available, such as “Custom 404 Pro” and “404page,” which offer additional features and customization options.