It’s easy to create a 404 Page with Astra WordPress theme.
What is a 404 Page?
Also known as “Page not Found” or “Error Page” a 404 page is shown to a visitor when they request a page that no longer exists on your website.
It’s a broken link. A dead link.
The dreaded 404 page is simply a page that notifies your visitor that the page they requested doesn’t exist and they need to try again.
This happens when websites go through redesigns or infrequently visited pages are deleted from a site.
Sometimes search engines still have the old dead link associated with your website, which results in the 404.
Help Your Visitors!
So when a visitor lands on a 404 page, it’s important to help them find what they are looking for.
Perhaps you could suggest a few pages or posts of interest to keep your visitor on your site.
Or have a search bar where they can try again.
The main thing is that you don’t want to frustrate your website visitors, so show a 404 page when this happens.
And this post will show you how to create a 404 page with Astra.
If you’ve been following our Astra Series, you should have a basic knowledge in how to use Astra and Gutenberg to build your WordPress pages.
As we said earlier, it’s a nice touch to add a custom 404 page to your website.
And Astra makes it easy to do so with their custom layouts module because you don’t have to do any special programming.
So let’s look deeper at how this is done.
Install Astra Pro
First you will need to have the Astra Pro plugin installed and activated.
Activate Astra Pro Custom Layouts
And you’ll need to have the Custom Layouts module activated, too.
From the Dashboard, go to Appearance > Astra Options.
Scroll down to Custom Layouts Module and click the activate button.
That’s it! Now you can design your page.
Design Your 404 Page
Once that is in place, think about your 404 page design.
You’ll likely want to find an image that represents your brand.
Next decide what you want the page to show the visitor when they land on it.
For example, you might want to display a message that says “Sorry! We can’t find your page” and a button to return home.
Or you might want to get creative and fun with your 404 page.
So if you need some help coming up with ideas, check out this article or this one.
However, If you solely use the Gutenberg editor, you are limited in the layout and structure of your 404 page.
For example, I wanted a boxed layout format instead of full width for my 404 page.
And I wanted a sidebar with a search bar and list of pages on my site that looked like this:
But I couldn’t see a way to do it.
I submitted a support ticket and was told that the custom layout editor is just a blank canvas with no options for sidebars or layouts using the Gutenberg editor.
Yet if you use Elementor or another of the page builders with Astra, you can do so much with the design of your 404 page. For example, you can set a sidebar for your page.
So that was disappointing to me since I’m not using any of the page builders.
Astra support said they would take it as a suggestion to add it as a feature in a future update.
But given the limitations, you can still create a basic 404 page using Gutenberg.
And the rest of this post will show you how.
Create a 404 Page with Astra
Follow the steps below to create your 404 Page.
- Go to Appearance > Astra Options > Custom Layouts
- Click the Add New button at the top.
- Give your custom layout a title such as “404 Page.”
At this point you should be in the WordPress Editor.
If you are NOT, click the Enable WordPress Editor button right under the title as shown below.
Design Your 404 Page
Design your page using the Gutenberg block editor or any Astra-compatible page builder such as Elementor.
Once done, scroll down to Custom Layout Settings and select 404 page from the drop down:
Next decide whether you want to disable the Primary Header and/or Footer Bar.
If so, check the following check boxes. Otherwise leave them unchecked.
Finally, click the publish button to make the 404 page live.
Test your new 404 page by trying to visit a non-existent page on your site.
That’s it! You’ve successfully learned to create a 404 page with Astra.
And to further help you, watch the 3 minute YouTube video.
I hope this post has helped you create your 404 page.
Any questions? Please feel free to post them in the comments below. I’m always happy to help!
Thanks for a great tutorial! I have a question : Michelle, why do you think it is beneficial to disable the header and footer on a 404 page? I followed your tutorial and am very happy with the result, but I retained the header with its search box. Is there a good reason to remove the header?
Hi Lin! Glad you found the tutorial useful. Disabling the header and footer is entirely your preference. Initially I thought that the 404 page looked less cluttered without them. But I’m learning as I go, too, and I have to agree with you. I have since enabled both the header and the footer on my 404 page because I think it’s more helpful to the user. I will likely update this post to reflect that change of mind! Always learning something new! Appreciate your perspective 🙂
Well, I was thinking that it would be a courtesy to the user to have the top nav bar and the search box immediately available, as in my header.
But I do see some sites without a header using a search box in the 404 page content area, and even one with a category menu (I cant remember of that was within the content area, or a sidebar.)
So long as the visitor ultimately finds what they are looking for, or something else helpful or of interest to them, then we have served them well!
Agree! That’s really why I wanted a sidebar choice on the 404 page with Gutenberg in place of a header. You could customize that sidebar specifically for the 404 page. But currently it’s not possible, so I guess we have to wait until Astra adds that as a feature! I do know it’s on their to-do list for now.