Your theme comes with a default 404 page. Mostly, it is bland, generic, and offers no guidance to users. By using the default 404 not found page, you’re missing out on a chance to turn this boring page into a content hub and guide users to more relevant, valuable content.
A well-customized and valuable 404 error page can achieve several objectives, including guiding users back to relevant content, collecting contact information, providing specific guidance, and more. It all depends on what you want to achieve with this page.
In today’s article, I will show you how to create custom 404 Not Found page without an additional plugin or code. What you need is the Astra Pro theme. Once you’ve got this, you can edit the native WordPress theme’s 404 page and customize it to match your brand design.
But before we dive deep into the tutorial, let’s understand why you need a customized 404 Not Found page for your WordPress blog.
Benefits of a Custom WordPress Not Found Page
Look at the default Astra Pro theme 404 page in the image below.
What do you notice?
A basic 404 error page with little to no content, guidance, or links to other relevant pages on your site. This is bad for improving conversion rates or reducing the bounce rate. Users who land on this page are more likely to leave your site without navigating it further.
Although a search box is available on the page, you can further enhance the user experience by editing the default 404 Not Found page and adding more relevant information tailored to user intent. The option I describe here allows you to automatically generate content based on specific criteria.
You can add your latest posts, showcase your most active commenters, eCommerce product collections, social links, etc. You can even turn these dead ends into a lead generation landing page by including a web form to collect subscriber contact details.
This gives you more control over the 404 page, making it more meaningful and improving the user experience.
Creating a custom 404 page also allows you to maintain your website’s branding, including logos, colors, typography, and other visual elements, on the error page. This can significantly improve brand consistency across the website.
Now that you understand the value or benefits of creating a custom WordPress 404 error page, let’s see how you can create one using the Astra Pro theme.
How to Create a WordPress Custom 404 Not Found Page With Astra Pro Theme
The first thing you need to make this work is the Astra Pro add-on plugin. If you’re using the free Astra theme, you must upgrade to a paid license.
The Pro add-on unlocks the Site Builder module, which is necessary to edit the default 404 template in the free theme. Check out my post on how to get Astra Pro add-on plugin for free.
So, once you get the Pro add-on plugin, navigate to Astra in your WordPress dashboard and locate the Site Builder menu link.
If the Site Builder menu is not active after installing the Pro add-on plugin, it means the module is turned off by default. In this case, you need to access the Astra dashboard and enable the module. This is how to do it.
Go to the Astra dashboard and scroll down to the Astra Pro Modules section. Locate the Site Builder Module and enable the function.
Once activated, click Site Builder from the Astra menu to open the Site Builder layout screen. On the Site Builder page, click “404 Page” from the side menu or the layout module, then click “Create Layout.”
This action will open the Gutenberg editor page. Next, enter a title for your custom 404 error page. This title is for internal use only; it will not be visible to your site visitors.
Creating Your Custom 404 Not Found Page
When you open the Astra 404 layout module in the Gutenberg editor, you’ll have a blank page (as in the image above). This is necessary as it gives you complete control over how you customize it.
I won’t dive deep into customizing your ‘not found’ 404 page, as individual preferences vary. What you intend to achieve with your customized 404 error page determines how you approach the design and the tools you might need.
The thing is that the possibilities are endless. The more creative you are, the better you can take advantage of the custom 404 page module in the Astra theme.
For this tutorial, I decided to edit this website’s default 404 page and customize it. You can check the final design by adding random text to the end of any URL on the site.
You’ll see how to turn this basic default 404 page into a more engaging and purposefully content-rich, helpful page.
First, I added an H2 headline to inform the user that the content does not exist on the website. Then, I assure you that there are alternatives, and even better, an opportunity to meet the author of the blog. I intentionally do this in case the user is a first-time visitor.
Next, I added a search box to the page so users can search deep into the blog archive.
After that, I added the Spectra post grid block to automatically pull content from all categories. This allows me to specify how the content on the 404 Not Found page displays.
I can choose between random posts, titles, menu order, published date, and either ascending or descending order, as well as restrict posts to a particular category or tag. I can also specify the number of posts to display and customize the layout and content.
For example, I can add a ‘Read More’ button, display comment counts, remove featured images, change title tags, customize background colors, and so on.
After you have finished customizing the custom 404 page, before hitting the publish button, there are a few Astra Site Builder settings you need to review. Let’s go over them one after the other.
404 Page Display Settings
Click the Astra theme icon on the Gutenberg editor top navigation bar to open the settings panel on the sidebar.
The first option is the display setting for the custom 404 page. Here you can specify whether to disable the primary header and footer.
Display and User Conditions.
Next, click the Display and User Condition setting to specify which user role should see your custom 404 error page.
This option may be beneficial for a multi-author or membership website that wants to tailor the 404 page experience based on user role.
Device Visibility
If you don’t want to display your custom ‘404 Not Found’ page on all user devices, this option allows you to control the setting. You can toggle between desktop, tablet, and mobile smartphone.
Date and Time
Lastly, it is the date and time setting. This is good if you want to display your custom 404 page during a specific campaign or season.
If you set this option, the default WordPress 404 page will override your custom 404 page design at the expiration date and time.
Once you’re through with these settings, click the WordPress save button to publish your beautiful 404 page.
How to Test Your Custom 404 Not Found Page
Testing your custom 404 page is as simple as adding random text at the end of any URL on your website. Something like this:
Let’s say your website address is https://mywebsitename.com/. You can add xyzmy to the end of this URL to trigger the customized 404 Not Found page.
After following the steps outlined in this post, I have created a customized 404 page, which I designed while writing this post.
FAQs
What exactly is a 404 page, and why customize it in Astra?
A 404 page, often called an ‘Error 404’ or ‘Page Not Found’ page, is what visitors see when they try to access a URL on your website that doesn’t exist. This might happen if they mistype a web address, follow a broken link, or try to reach content that has been moved or deleted.
By default, WordPress and Astra provide a basic 404 page. However, customizing this page offers significant benefits:
Improved User Experience: A custom page can be more helpful and less jarring than a generic error message. You can guide lost visitors back to relevant content.
Brand Consistency: It enables you to maintain your website’s design, logo, and overall brand voice, even on error pages.
Reduced Bounce Rate: A well-designed custom 404 page can encourage users to stay on your site by offering navigation options, a search bar, or links to popular content, rather than simply leaving the site.
Helpful Guidance: You can provide specific instructions or links to your sitemap, homepage, or contact page for further assistance.
Using Astra to customize it ensures seamless integration with your existing site design and leverages Astra’s flexibility.
Do I need Astra Pro to create a custom 404 page?
Yes, the easiest and most integrated way to create a fully custom 404 page design within the Astra theme is by using the Astra Pro addon and activating its Site Builder Module. The free version of Astra uses the standard WordPress 404 template, which offers limited customization options directly through the theme settings.
How do I create a custom 404 page with Astra Pro’s Site Builder Layouts?
Creating a custom 404 page with Astra Pro is straightforward using the 404 layout in Site Builder. Follow the step-by-step guide in this article to create your custom 404 error page using the Astra Pro theme.
What should I include on my custom Astra 404 page?
A truly effective custom 404 page should be helpful and guide the user. Consider including:
A Clear Message: Politely inform the user that the page they were looking for cannot be found. Avoid technical jargon.
Your Branding: Include your site logo and maintain your website’s overall design consistency.
A Search Bar: This is often the most helpful tool, allowing users to search for the content they intended to find.
Links to Key Pages: Provide links to your Homepage, Blog, Contact page, or popular posts/products.
A Sitemap Link: Offer a link to your sitemap for a comprehensive overview of your site structure.
A Touch of Personality: You can inject some humor or brand-specific messaging to make the experience less frustrating.
Simple Navigation: Ensure your main website navigation menu is still present (this is often handled automatically by Astra’s layout settings).
Can I design my Astra 404 page using Elementor or Beaver Builder?
One of the strengths of Astra Pro’s Site Builder Layouts is its seamless integration with popular page builders. When you create your ‘404 Page’ in Astra, you can design it with any page builder you have on your blog. Elementor, Beaver Builder, SiteOrigin, and other page builders work well with the Astra theme.
Does a custom 404 page impact website SEO?
A custom 404 page itself doesn’t significantly impact or benefit your SEO rankings. However, it has an indirect impact:
User Experience: A good custom 404 page improves user experience, which is a factor Google considers. Keeping users on your site instead of having them bounce immediately is positive.
Crawl Errors: Search engines like Google will still register a 404 error for the non-existent URL when they crawl it. This is correct behavior – the page doesn’t exist. Your custom page just makes the experience better for humans. It’s crucial not to redirect 404 errors to your homepage, as this can be confusing for search engines and mask actual site issues.
Finding Broken Links: Regularly checking your 404 errors (e.g., via Google Search Console) helps you identify and fix broken internal or external links, which is important for SEO.
So, while the custom design isn’t a direct ranking factor, the improved user experience and the opportunity it provides to guide users are beneficial overall.
Conclusion
Astra Pro is a powerful and customizable WordPress theme. I’ve been using it for a few years and could see firsthand how it elevates brand identity and makes it easy to create beautiful web pages.
The custom 404 module is just one of Astra Pro’s custom design templates; you can design a unique website using its vast features.
You don’t need an extra plugin to create a custom 404 page design or edit your theme files. With Astra Pro, every part of your website templates is one click away from customization.
