Do you want to improve your 404 page template in WordPress?
By replacing the default WordPress 404 page with your own design, you can show interesting content and information to visitors. This can improve the user experience and keep people on your site for longer.
In this article, we’ll show you how to customize your 404 page template in WordPress.
Why Improve Your 404 Page Template in WordPress?
Most WordPress themes come with a basic 404 template, including the default WordPress themes. For example, in the following image, you can see ThemeIsle Hestia‘s 404 page.
Most of these default templates are simple and don’t show any content from your site. This means anyone who lands on your 404 page is more likely to leave your WordPress website, which will increase your bounce rate.
This is bad news for your WordPress SEO, and may affect where your site appears in the search engine rankings.
With that being said, it’s a good idea to create a 404 page with your own content and branding. For example, at WPBeginner we show a custom image and encourage visitors to contact us, so we can fix the 404 error.
The sidebar also has links to our social media profiles and even some information about an ebook download.
A custom 404 page is also a chance to promote the most popular posts or products from your online store.
If you’re looking for inspiration, then we’ve collected the best 404 error page design examples for you to look at.
Note: Even if you design an engaging and helpful page, you’ll still want to fix 404 errors. For step-by-step instructions, see our guide on how to track your 404 pages and redirect them.
With that said, let’s take a look at how you can improve your 404 page template in WordPress.
Video Tutorial
Subscribe to WPBeginner
https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com
If you’d prefer written instructions, just keep reading. You can also use the quick links below to jump straight to the method you want to use.
- Method 1. Create a Custom 404 Page in WordPress With No Code (Recommended)
- Method 2. Create a Custom 404 Page in WordPress Using Code (Advanced)
Method 1. Create a Custom 404 Page in WordPress With No Code (Recommended)
The best way to improve your site’s 404 page is by using SeedProd.
SeedProd is the best landing page builder for WordPress. It lets you create, edit, and customize your WordPress pages without writing any code.
SeedProd comes with more than 180 ready-made templates, including plenty of 404 designs. This means you can create a professionally-designed 404 page within minutes.
The 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 that allows you to create beautiful maintenance and coming soon pages. However, we’ll be using the premium plugin since it lets you replace your theme’s built-in 404 template.
After activating the plugin, SeedProd will ask for your license key.
You can find this information under your account on the SeedProd website. After entering the license, click on the ‘Verify Key’ button.
Once you’ve done that, go to SeedProd » Landing Pages. In the ‘404 Page’ section, click on ‘Set up a 404 Page.’
You can now choose a template for your 404 page.
To preview a design, simply hover your mouse over it and then click on the magnifying glass.
When you find a design that you like, just click on ‘Choose This Template.’
We’re using ‘Oh No 404 Page’ in all our images, but you can use any design you want.
After selecting a template, you’ll be taken to the drag-and-drop builder, where you can start customizing the 404 page.
On the left side of the screen, you’ll find blocks and sections that you can add to your design. The right side of the page shows a live preview.
Most 404 templates already have some blocks, which are a core part of all SeedProd designs.
To customize any of these blocks, simply click to select the block in your layout. You can then make changes using the settings in the left-hand menu.
To add a new block to your design, simply find the block in the left-hand menu. Then, drag it onto your layout. You can now customize the block following the process described above.
To start, you’ll typically want to add your website logo to the 404 page, so visitors know they’re still on your site.
To replace the SeedProd logo with your own branding, simply click to select the placeholder logo in your layout. Then, hover your mouse over the image in the left-hand menu.
When it appears, click on the ‘Select Image’ button.
This launches the WordPress media library, where you can select any image or upload a new file from your computer.
Many 404 templates also show your site’s main navigation menu. If you have multiple menus, then you may prefer to show a different menu instead.
To make this change, simply click on the ‘Nav Menu’ block in your template. You can then open the ‘Menu’ dropdown and choose any menu from the list.
For more information, please see our guide on how to add custom navigation menus in WordPress themes.
When a visitor lands on your 404 page, they may be confused about how they got here and what to do next. With that being said, it’s a good idea to add some text explaining that the content can’t be found, and suggesting some actions to take next.
To do this, add a ‘Headline’ and a ‘Text’ block to your design. You can then type your message into the text editor in the left-hand menu.
For example, in the following image, we have created a headline that explains the page cannot be found, and a ‘Text’ block that suggests reading some posts or using the contact form.
Next, we’re going to change the ‘Back To Home’ button so it encourages people to check out a specific post instead of simply returning to the homepage.
For example, you might promote the most popular post on your WordPress blog or the page that helps you make the most money online blogging.
To customize the button, simply click to select it in the page layout. In the ‘Link’ field, type in the URL that you want to use instead.
Since the button no longer links to the homepage, you’ll want to replace the ‘Back To Home’ label. Simply go ahead and type a new message into the ‘Button Text’ box.
Once you’ve done that, click on the ‘Advanced’ tab. Here, you can change the button’s color, size, and more.
This is all you need to create a simple custom 404 page. However, there is a lot of other content and features that can improve the visitor experience, keep people engaged, and even help you get more conversions.
With that being said, let’s look at some advanced features you can add to your 404 page.
Add Your Most Popular Posts to Your WordPress 404 Page
To start, you may want to show a list of your most popular posts. Since these articles are popular, there’s a good chance visitors will find something they like.
You can create this list automatically using the MonsterInsights plugin. It’s the best analytics solution for WordPress used by over 3 million websites.
MonsterInsights can see which posts get the most visitors and add them to your 404 page. For more details, see our guide on how to display popular posts by views in WordPress.
After activating MonsterInsights, you can display your most popular posts by adding shortcode in WordPress. In SeedProd’s left-hand menu, simply find the ‘Shortcode’ block and drop it onto your layout.
Now, copy the following shortcode:
| 1 | [monsterinsights_popular_posts_widget theme="beta"] |
After that, click to select the Shortcode block in the SeedProd editor. You can now paste the code into the left-hand menu.
By default, SeedProd doesn’t show a preview of your most popular posts inside the page editor, so you’ll need to click on the ‘Preview’ button in the upper-right corner to see the shortcode in action.
If you do want to see the popular posts list inside the SeedProd editor, then simply click on the ‘Show Shortcode Preview’ switch.
In the above shortcode, we’re using theme=“beta” for our list, but MonsterInsights has a few different themes you can use.
To see the different themes, go to Insights » Popular Posts in the WordPress dashboard and then click on ‘Popular Posts Widget’.
You can now click on the different themes to see a preview.
When you find a design you want to use, simply update the shortcode in SeedProd. For example, if you want to use the ‘Alpha’ theme then you would need to type in:
| 1 | [monsterinsights_popular_posts_widget theme="alpha"] |
Show Your Most Popular WooCommerce Products
If you have an online marketplace or store, then you may want to show your best selling WooCommerce products on the 404 page.
In the left-hand menu, find the Best Selling Products block and drag it onto your layout.
SeedProd will show some products automatically. However, you can fine-tune this block by selecting it in the editor and then using the settings in the left-hand menu.
For example, you can change the number of columns in the block, add pagination, allow shoppers to filter the best-selling products, and more.
For more information, see our guide on how to display popular WooCommerce products.
Despite the name, you can use this block to show other types of products. For example, you might show products that are on sale or your top-rated items.
To take a look at the different options, open the ‘Type’ dropdown menu and then choose an option from the list.
Add a Contact Form to Your WordPress 404 Page
You may also want to add a contact form so visitors can reach out if they can’t find what they’re looking for. This form also gives people an easy way to report 404 errors, so you can fix these broken links and improve the experience for future visitors.
For more information, please see our complete guide on how to fix broken links in WordPress.
The best way to add a contact form to your site is by using the WPForms plugin. It’s the best contact form plugin for WordPress and comes with a drag-and-drop form builder.
For more details, see our step-by-step guide on how to create a contact form in WordPress.
Once you’ve created a contact form, you can add it to your 404 page using the ‘Contact Form’ block. Simply find the block in the left-hand menu and drag it onto your design.
Then, open the ‘Select a Form’ dropdown and choose your contact form from the list.
The page editor will now show a preview of the contact form.
You might want to add some text introducing your contact form or encouraging visitors to get in touch.
To do this, simply add a ‘Headline’ or ‘Text’ block above your contact form and then type in the text that you want to use.
How to Publish the 404 Page
When you’re happy with how the 404 page looks, it’s time to publish it.
Simply click the dropdown arrow next to ‘Save’ and then select ‘Save as Template.’
When asked, go ahead and type in a name for the template. This is just for your reference so you can use anything you want.
After that, click on ‘Save Template.’
In the next popup, click on ‘Return to Page Editor.’ You can then click on the ‘X’ button in the upper-right corner to close the SeedProd page editor.
At this point, you may see a popup asking whether you want to publish your 404 design. If you’re happy to go ahead, then click on ‘Yes, Activate.’
If you don’t want to publish the template right now, then click on ‘No, Close’ instead.
After that, you can publish the design at any point by going to SeedProd » Pages. Here, click on the switch in the ‘404 Page’ section so it shows ‘Active.’
To see your 404 page in action, just add /404 to the end of your domain name.
After publishing your custom 404 page, it’s a good idea to track how people are engaging with that page. This allows you to see what’s working and what isn’t working, so you can fine-tune your 404 design to get more conversions and engagement.
To learn more, see our beginner’s guide on how to install Google Analytics in WordPress.
Method 2. Create a Custom 404 Page in WordPress Using Code (Advanced)
If you don’t want to use a page builder plugin, then you can create a custom 404 page using code. However, just be aware that any mistakes in your code can cause common WordPress errors, or even break your site.
With that in mind, this method isn’t recommended for beginners. It’s also a good idea to back up your site before using this method, just in case you encounter any problems.
To get started, you’ll need an FTP client such as FileZilla, or you can use the file manager supplied by your WordPress hosting provider.
If this is your first time using FTP, then you can see our complete guide on how to connect to your site using FTP.
After connecting to the server, go to /wp-content/themes/ and then open the folder for your current WordPress theme.
If this folder already has a 404.php file, then you can go ahead and open that file in any text editor, such as Notepad.
If your theme doesn’t have a 404.php file, then you’ll need to create one. After that, go ahead and open the file in a text editor app.
You’re now ready to create a custom 404 page using code. You can create all sorts of designs, but here’s some simple examples to help you get started.
Display Most Popular Posts on 404 Page
A list of your most popular posts can encourage visitors to check out your site’s best content.
You can create this list using WordPress Popular Posts. It’s one of the best popular posts plugins for WordPress and comes with template tags that you can add to your 404.php file.
The first thing you need to do is install and activate the WordPress Popular Posts plugins. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, you can add a list of popular posts to your 404 page using the following template tag:
| 1 | <?php wpp_get_mostpopular(); ?> |
Hosted with ❤️ by WPCode
Display Most Commented Posts on 404 Page
This plugin can also display the posts that have the most comments.
In your 404.php file, simply find the area where you want to show your most commented posts, and then add the following template tag:
| 1 | <?php wpp_get_mostpopular("range=all&order_by=comments"); ?> |
Hosted with ❤️ by WPCode
You can also check out our guide on how to display most commented posts in WordPress.
Display Recent Posts on 404 Page
Another option is to show your site’s most recent posts. This can be particularly effective if you post time-sensitive blogs, for example if you run a news aggregator website.
There are several different ways to display recent posts in WordPress, but the easiest way is adding a template tag to your 404.php file:
| 1 | <?php wp_get_archives( array( 'type'=> 'postbypost', 'limit'=> 10, 'format'=> 'custom', 'before'=> '', 'after'=> '<br />') ); ?> |
Hosted with ❤️ by WPCode
Display Random Posts on 404 Page
Do you want to show a random list of posts on your custom 404 page?
Then simply add this code to your 404.php file:
| 12345678 | <ul><?php$posts= get_posts('orderby=rand&numberposts=5'); foreach($postsas$post) { ?> <li><a href="<?php the_permalink(); ?>"title="<?php the_title(); ?>"><?php the_title(); ?></a> </li> <?php } ?></ul> |
Hosted with ❤️ by WPCode
Add Monthly Archives with Compact Archives
If you have lots of content, then it may be impossible to show all those posts on your custom 404 page.
One option is to organize your content into monthly archives. Visitors can then click to explore content from different months and years.
Here at WPBeginner, we display our monthly archives on the 404 page using Compact Archives. This helps visitors browse all our content, without overwhelming them with a long list of posts.
For more details, see our guide on how to create compact archives in WordPress.
After activating the Compact Archives plugin, add the following code to your 404.php file:
| 1234 | <p><strong>By Date</strong></p><ul><?php compact_archive($style='block'); ?></ul> |
Hosted with ❤️ by WPCode
Now, when a user lands on your 404 page they’ll see your compact post archives.