How to customise 404 error page on WordPress

A well-designed 404 error page can turn an “oops” moment into something positive. Instead of an ugly server error page, a customised on-brand page can direct people to search functionality so that they can discover what they need, or it can reroute them to new pages.

How to customise 404 error page on WordPress?

With WordPress themes

The easiest way is to use the 404 page set by your theme.

Most WordPress themes come with a built-in 404 page template. If yours doesn’t, it might be time to reconsider your choice of theme. Here’s how to customise the 404 error page for some popular themes:

1. Astra

If you’re using Astra, customising your 404 page is easy:

• Head to Appearance > Customise in your WordPress dashboard.
• Look for the 404 Page section.
• Here, you can change the text, add images, and include links to guide your visitors.

2. Elementor

Elementor is a popular page builder that makes creating a custom 404 page a breeze:

• Go to Templates > Theme Builder in your dashboard.
• Select 404 Page and click Add New.
• Now, you can use Elementor’s drag-and-drop features to design your 404 page just how you like it!

Quick Guide for Elementor:

1. In Elementor, click on Templates > Theme Builder.
2. Choose 404 Page and hit Add New.
3. Design your page using the available widgets, adding text, images, and links as needed.

3. Divi

To set up a custom 404 page in Divi:

• Go to Divi > Theme Builder.
• Click Add New Template and select 404 Page.
• Use the Divi Builder to add and arrange different modules like text and images.

4. GeneratePress

GeneratePress gives you two ways to create a 404 error page:

No-code Method:

For this method you must have GeneratePress premium, and you must have enabled Layout Elements.

1. Create a Layout Element:
   • Go to Appearance > Elements.
   • Click Add New Element and choose Layout.
   • Set Content Container to Full Width.
   • Under Display Rules, choose Location: 404 Template.
2. Create a Block Element:
   • Add another element and set the Element Type to Content Template.
   • Under Display Rules, choose Location: 404 Template.
3. Design the page:
   • Use the WordPress block editor to design the page.
   • Add elements like a heading, a friendly message, a search bar, links to popular pages, and a “Back to Home” button.
4. Save and test
   • Publish your elements.
   • Test by visiting a non-existent URL on your site.

With Code

This assume you are using a Child theme (best practice).

1. Create a file named 404.php in your theme folder.
2. To speed things up, you can copy your index.php file and modify it as needed.

What to do if your theme lacks a 404 page

If your theme doesn’t have a 404 page, don’t worry—you can create one from scratch. Here’s how:

1. Create the 404.php File:

• Use an FTP program or your hosting file manager to find your theme files.
• Go to wp-content/themes/your-theme-name/.
• If there’s no 404.php file, create one.

2. Add Your Content:

• Open the 404.php file in a text editor.
• Insert this code:

<?php get_header(); ?>

<div class="error-404 not-found">
    <h1>Oops! We can't find that page.</h1>
    <p>It looks like nothing is here. Try searching for what you need:</p>
    <?php get_search_form(); ?>
    <a href="<?php echo home_url(); ?>">Go back to the homepage</a>
</div>

<?php get_footer(); ?>

If you prefer not to show a 404 page, you can redirect visitors automatically. Just add this code to your 404.php:

<?php
// Redirect to homepage after 5 seconds
header("refresh:5;url=" . home_url());
?>

<div class="error-404 not-found">
   <h1>Page Not Found</h1>
   <p>You will be redirected to the homepage in 5 seconds.</p>
</div>

Conclusion

Creating a custom 404 error page is a simple yet effective way to improve your website’s user experience. Whether you choose to customise an existing template or create one from scratch, taking the time to get it right can make a big difference for your visitors’s experience. If you are struggling with technical difficulty, reach out Kahunam for quick and effective solutions.