How to Improve Your 404 Page Template in WordPress (2 Ways)

"Да умоется кровью тот, кто усомнится в нашем миролюбии." Тертуллиан ©

Beginner’s Guide for WordPress
WPBeginner» Blog» Themes» How to Improve Your 404 Page Template in WordPress (2 Ways)
Do you want to improve your 404 page template in WordPress?
Improving the default WordPress 404 page can help create a better user experience, reduce bounce rate, and increase pageviews.
In this article, we’ll show you how to customize your 404 page template in WordPress, step by step.
How to improve your 404 page template in WordPress (2 ways)
Most visitors who land on the default WordPress 404 page will leave your WordPress website quickly.
This will increase your bounce rate, create a poor user experience, and can even negatively impact your search engine rankings.
By improving your WordPress 404 page, you can send visitors to popular posts, increase pageviews and reduce bounce rate, and turn one time visitors into long-term readers and customers.
404 page example
When a visitor stays on your site longer, they’re more likely to make a purchase, read more posts, join your email list, and more.
Plus, it can improve your WordPress SEO, so you’ll get more search engine traffic.
Note: it’s important to create a custom 404 page, but you should also track what 404 URLs visitors use to visit your website and then set up proper redirects to improve SEO rankings.
For more details, see our guide on how to easily track 404 pages and redirect them in WordPress.
With that said, let’s take a look at how you can improve your 404 page template in WordPress.
The best and most beginner friendly way of improving your 404 page template is using the SeedProd page builder plugin.
SeedProd is the best landing page builder for WordPress. It lets you create, edit, and customize your WordPress pages without writing any code.
With this plugin, you can easily create a custom 404 page using the included 404 page templates.
First thing you need to do is install the SeedProd plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Note: there is a free version of SeedProd available, but we’ll be using the Pro version since it has the 404 page templates we need.
Upon activation, you need to navigate to SeedProd » Settings and enter your license key. You can find this information on your account page on the SeedProd website.
Enter SeedProd license key
After that, go to SeedProd » Pages and click ‘Set up a 404 Page’ button in the ‘404 Page’ meta box.
This will bring you to a page where you can select your 404 page template.
Set up 404 page
There are dozens of professionally designed 404 page templates you can choose to help you get started quickly.
To select a template, hover over it and click the ‘Checkmark’ icon. For this tutorial, we’ll be using the ‘Oh No 404 Page’ template, but you can use any template you like.
Select 404 page template
After selecting a template, you’ll be taken to the drag and drop builder, where you can start customizing your 404 page.
You’ll find blocks and sections you can add to your 404 page on the left side of the screen. The right side of the page is the live preview. Every element on the page can be edited and customized.
SeedProd editor
First thing, we’re going to add text and tell users what to do next. Instead of simply landing on a 404 page and leaving, you can direct your visitors towards valuable content and the next actions to take.
To do this, drag the ‘Text’ block over to your page, and click it to change the text.
Add text block
Next, we will change the home page button link and instead link to one of the most valuable pieces of content.
This can be a post on your WordPress blog that’s the most popular or one that brings you the most revenue.
First, drag over the ‘Headline’ block and add your new headline.
Add headline block
Then, drag over another ‘Text’ block and enter some text that describes your article.
After that, click on the button to bring up the button editor screen.
Change button text
Here you can customize the text, color, size, and more.
Add Your Most Popular Posts to Your WordPress 404 Page
Next, you can add your most popular articles. Since these articles are proven to be popular, there’s a good chance your visitors will find something they like.
The easiest way to do this is by using the MonsterInsights plugin. It’s the best analytics solution for WordPress used by over 3 million websites.
With this plugin, you can simply add popular posts anywhere on your WordPress website.
For more details, see our guide on how to display popular posts by views in WordPress.
Once the plugin is activated and set up, all you have to do is add a single shortcode to your page.
To do this, simply drag the ‘Shortcode’ block over to your page.
Add shortcode block
Then, enter the following shortcode to display your most popular posts.

[monsterinsights_popular_posts_widget theme="beta"]

The theme=“beta” portion refers to how your popular posts will display. If you want to see how the different themes look, then go to Insights » Popular Posts and click on ‘Popular Posts Widget’.
In the ‘Choose Theme’ section, you can view each of the themes and their names.
Choose popular posts theme
You can also add a headline above your popular posts following the same steps as above.
Add a Contact Form to Your WordPress 404 Page
After that, you can add a contact form directly to your 404 page. This lets your visitors reach out to you if they couldn’t find what they were looking for in the links above.
The best way to add a contact form to your site is using the WPForms plugin. It’s the best contact form plugin for WordPress used by over 4 million websites.
For more details, see our step by step guide on how to create a contact form in WordPress.
Once the plugin is activated and set up, you can simply drag the ‘Contact Form’ block over to your page.
Add contact form block
Then, all you have to do is select your contact form from the drop down list.
You need to create your contact form first before you can add it to your 404 page.
Select contact form drop down
You can also add a ‘Headline’ or ‘Text’ block above your contact form.
Follow the same steps as above to add those blocks.
Contact form headline block
Once you’re done making changes, make sure you click ‘Save’ in the upper right corner of the page.
If you want to publish your page live, then select the drop down arrow next to ‘Save’ and click ‘Publish’.
Save changes and make page live
You can also change the logo and navigation menu by clicking on them and making changes with the panel on the left, then following the same editing process as above.
Feel free to continue customizing your page, adding new blocks, and testing different layouts to see what your visitors prefer.
404 page template final
If you’re a WooCommerce store owner, then you can customize your 404 page by displaying popular products to help get more sales.
To make your new 404 page active, navigate back to SeedProd » Pages and then switch the ‘404 Page’ toggle to ‘Active’.
Make 404 page active
Now, your visitors will see your high converting 404 page, instead of the default option.
Pro tip: you can track the performance of your WordPress 404 page to see how it’s converting and which changes are the most useful. For more details, see our beginner’s guide on how to install Google Analytics in WordPress.
This method is not as beginner friendly because you will have to add code and modify WordPress theme files.
If you haven’t done this before, then please see our beginner’s guide to pasting snippets from the web into WordPress.
First, you need to create a new file in your WordPress theme folder and name it 404.php. If your theme already has a 404.php file, then you’ll need to edit that file instead.
To edit this file, you need to connect to your WordPress hosting account with an FTP client, or their file manager tool.
FTP 404.php file
After you’re connected to your website, you can see your 404.php file in your WordPress theme’s folder.
Note: before you customize your WordPress theme, we recommend backing up your WordPress site. For more details, see our guide on how to backup and restore your WordPress site.
Display Most Popular Posts on 404 Page
First thing you need to do is install and activate the free WordPress Popular Posts plugin. It’s one of the best popular posts plugins for WordPress.
For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you need to add this template tag into your 404.php file where you want to display the popular posts.
Display Most Commented Posts on 404 Page
To add the most commented posts to your WordPress 404 page we’ll be using the same plugin you activated above.
Simply add the following template tag where you want to display your most commented posts.
You can also check out our guide on how to display most commented posts in WordPress.
Display Recent Posts on 404 Page
There are multiple ways to display recent posts in WordPress.
The easiest way is to add this template tag in your 404 template to display your recent posts.
Display Random Posts on 404 Page
If you want to display a random list of posts in WordPress, then you can simply add this code in your 404 template where you want to display a random list of posts from your site.
Add Monthly Archives with Compact Archives
If you have a lot of content on your website, then one great way to organize this is by showing your monthly archives.
Here at WPBeginner, we display our monthly archives on our 404 page using the Compact Archives plugin. This plugin is developed and maintained by our team.
For more details, see our guide on how to create compact archives in WordPress.
Once the plugin is activated and set up, simply add the following code to your 404.php file.
When a user lands on your 404 page they’ll see your compact post archives.
Here’s how it displays on our 404 page.
Compact Archives WPBeginner
A Sample 404 Template for WordPress
Here is a sample 404.php file based on the default WordPress theme Twenty Twenty-One’s 404 page template.
Compare this 404 template with the default template in Twenty Twenty-One.
You will notice that right after the search form we have added our custom code to display popular, most commented, and recent posts.
After that we added custom CSS to the WordPress theme stylesheet to divide it into columns.
For more details, see our guide on how to easily add custom CSS to your WordPress site.
This is the end result after adding the custom 404 page code above.
Custom 404 page example
We hope this article helped you improve your 404 page template in WordPress. You may also want to see the best WordPress 404 error page design examples and our expert picks of the best web push notification software to grow your website traffic.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
How to Fix the Error Establishing a Database Connection in WordPress
How to Start Your Own Podcast (Step by Step)
How to Properly Move Your Blog from WordPress.com to WordPress.org
How to Install Google Analytics in WordPress for Beginners
Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.
Thank you sir. This is what I was searching for long time. Great Post.
Hi,
I just read about the 404 page, but I am not code literate. Your article seems complicated and the popular posts does not float my boat.
What would is a simple widget that I can use to display a single list of my main tabs on the 404 page under the search.
Do you have a widget to send readers back to my main blog page or my other main 9 tabs?
Thank you very much
Joe Wocoski
This code is showing headings of post but i want to show content of posts also .Thanks in advance
Try updating your permalink structure by visiting Settings -> Permalinks. Simply click on save changes button without making any changes to your permalink structure.
Hello there, very nice article, thanks ! However something simply does not work. When calling on 404.php page (once plug-in activated), it just does not show. Anyway idea why this is happening?
Thanks for this usefull post, i want to know how i can bend my first post from header just like a curve with shadow?
Thank you for this awesome article. I was wondering how can i add my category to this page and as well images. Thanks.
Thanks! I’d used wp.com for 2 years before moving to selfhosting. It was exciting to take out all the dates on my articles, but then I started realizing my most popular page by far was the 404! I did the work to use the redirect plugin (also great for posts with rotten original headlines), but haven’t done it for all 400+.
The email alert will be a relief and the most recent/popular/etc posts idea is great. :-)
Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let’s have a personal and meaningful conversation.







Get fresh content from WPBeginner
WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!
Copyright © 2009 — 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.
Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.

source


Related posts

Leave a Comment

4 + 12 =