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

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

Do you wish to boost your 404 web page theme in WordPress?

Improving the default WordPress 404 web page can assist produce a far better customer experience, decrease bounce price, and also rise pageviews.

In this post, we’ll reveal you exactly how to tailor your 404 web page theme in WordPress, detailed.

Why Improve Your 404 Web Page Theme in WordPress?

The majority of site visitors that arrive on the default WordPress 404 web page will certainly leave your WordPress web site promptly.

This will certainly boost your bounce price, produce an inadequate customer experience, and also can also adversely affect your internet search engine positions.

By boosting your WordPress 404 web page, you can send out site visitors to prominent messages, rise pageviews and also decrease bounce price, and also transform one-time site visitors right into long-lasting visitors and also clients.

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

 

When a site visitor remains on your website much longer, they’re more probable to purchase, find out more messages, join your e-mail checklist, and also extra.

And also, it can boost your WordPress Search Engine Optimization, so you’ll obtain even more internet search engine website traffic.

Note: it’s important to produce a custom-made 404 web page, however you must additionally track what 404 Links site visitors make use of to see your web site and after that established correct redirects to boost search engine optimization positions.

For even more information, see our overview on exactly how to conveniently track 404 web pages and also reroute them in WordPress.

With that said claimed, allow’s have a look at exactly how you can boost your 404 web page theme in WordPress.

Technique 1. Produce a Custom-made 404 Web Page in WordPress Without Code

The most effective and also most beginner pleasant means of boosting your 404 web page theme is utilizing the SeedProd web page contractor plugin.

SeedProd is the very best touchdown web page contractor for WordPress. It allows you produce, modify, and also tailor your WordPress web pages without creating any type of code.

With this plugin, you can conveniently produce a custom-made 404 web page utilizing the consisted of 404 web page themes.

Very first point you require to do is set up the SeedProd plugin. For even more information, see our detailed overview on exactly how to set up a WordPress plugin.

Note: there is a complimentary variation of SeedProd readily available, however we’ll be utilizing the Pro variation given that it has the 404 web page themes we require.

Upon activation, you require to browse to SeedProd » Setups and also enter your permit trick. You can discover this details on your account web page on the SeedProd web site.

 

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

Afterwards, most likely to SeedProd » Pages and also click ‘Establish a 404 Web page’ switch in the ‘404 Web page’ meta box.

This will certainly bring you to a web page where you can pick your 404 web page theme.

 

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

There are lots of expertly created 404 web page themes you can select to assist you begin promptly.

To pick a theme, float over it and also click the ‘Checkmark’ symbol. For this tutorial, we’ll be utilizing the ‘Oh No 404 Web page’ theme, however you can make use of any type of theme you such as.

 

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

After choosing a theme, you’ll be required to the drag and also decrease contractor, where you can begin personalizing your 404 web page.

You’ll discover blocks and also areas you can contribute to your 404 web page on the left side of the display. The ideal side of the web page is the real-time sneak peek. Every component on the web page can be modified and also tailored.

 

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

Very first point, we’re mosting likely to include message and also inform customers what to do following. As opposed to just arriving at a 404 web page and also leaving, you can guide your site visitors in the direction of beneficial material and also the following activities to take.

To do this, drag the ‘Text’ block over to your web page, and also click it to transform the message.

 

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

Next off, we will certainly transform the web page switch web link and also rather web link to among one of the most beneficial items of material.

This can be a message on your WordPress blog site that’s one of the most prominent or one that brings you one of the most income.

Initially, drag over the ‘Heading’ block and also include your brand-new heading.

 

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

After that, drag over one more ‘Text’ block and also get in some message that explains your post.

Afterwards, click the switch to raise the switch editor display.

 

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

Below you can tailor the message, shade, dimension, and also extra.

Include Your A Lot Of Popular Posts to Your WordPress 404 Web Page

Next off, you can include your most prominent posts. Given that these posts are verified to be prominent, there’s a great chance your site visitors will certainly discover something they such as.

The simplest means to do this is by utilizing the MonsterInsights plugin. It’s the very best analytics option for WordPress made use of by over 3 million sites.

With this plugin, you can just include prominent messages anywhere on your WordPress web site.

For even more information, see our overview on exactly how to present prominent messages by sights in WordPress.

As soon as the plugin is triggered and also established, all you need to do is include a solitary shortcode to your web page.

To do this, just drag the ‘Shortcode’ block over to your web page.

 

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

After that, get in the adhering to shortcode to present your most prominent messages.

[monsterinsights_popular_posts_widget theme="beta"]

The motif=“beta” part describes exactly how your prominent messages will certainly present. If you wish to see exactly how the various motifs look, after that most likely to Insights » Popular Posts and also click ‘Popular Posts Widget’.

In the ‘Select Motif’ area, you can see each of the motifs and also their names.

 

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

You can additionally include a heading over your prominent messages adhering to the exact same actions as above.

Include a Call Kind to Your WordPress 404 Web Page

Afterwards, you can include a call type straight to your 404 web page. This allows your site visitors connect to you if they couldn’t discover what they were searching for in the web links over.

The most effective means to include a call type to your website is utilizing the WPForms plugin. It’s the very best get in touch with type plugin for WordPress made use of by over 4 million sites.

For even more information, see our detailed overview on exactly how to produce a call type in WordPress.

As soon as the plugin is triggered and also established, you can just drag the ‘Call Kind’ block over to your web page.

 

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

After that, all you need to do is pick your get in touch with type from the fall checklist.

You require to produce your get in touch with type initially prior to you can include it to your 404 web page.

 

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

You can additionally include a ‘Heading’ or ‘Text’ block over your get in touch with type.

Comply with the exact same actions as above to include those blocks.

 

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

As soon as you’re done making modifications, make certain you click ‘Conserve’ in the top right edge of the web page.

If you wish to release your web page live, after that pick the fall arrowhead alongside ‘Conserve’ and also click ‘Release’.

 

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

You can additionally transform the logo design and also navigating food selection by clicking them and also making modifications with the panel left wing, after that adhering to the exact same editing and enhancing procedure as above.

Do not hesitate to proceed personalizing your web page, including brand-new blocks, and also screening various designs to see what your site visitors like.

 

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

If you’re a WooCommerce shopkeeper, after that you can tailor your 404 web page by showing prominent items to assist obtain even more sales.

To make your brand-new 404 web page energetic, browse back to SeedProd » Pages and after that change the ‘404 Web page’ toggle to ‘Energetic’.

 

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

Currently, your site visitors will certainly see your high transforming 404 web page, as opposed to the default choice.

Pro pointer: you can track the efficiency of your WordPress 404 web page to see exactly how it’s transforming and also which modifications are one of the most valuable. For even more information, see our newbie’s overview on exactly how to set up Google Analytics in WordPress.

Technique 2. Produce a Custom-made 404 Web Page in WordPress By Including Code

This technique is not as newbie pleasant since you will certainly need to include code and also customize WordPress motif data.

If you haven’t done this previously, after that please see our newbie’s overview to pasting fragments from the internet right into WordPress.

Initially, you require to produce a brand-new documents in your WordPress motif folder and also name it 404.php. If your motif currently has a 404.php documents, after that you’ll require to modify that documents rather.

To modify this documents, you require to attach to your WordPress holding account with an FTP customer, or their documents supervisor device.

 

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

After you’re linked to your web site, you can see your 404.php documents in your WordPress motif’s folder.

Note: prior to you tailor your WordPress motif, we advise supporting your WordPress website. For even more information, see our overview on exactly how to backup and also recover your WordPress website.

Present A Lot Of Popular Posts on 404 Web Page

Very first point you require to do is set up and also turn on the complimentary WordPress Popular Posts plugin. It’s one of the very best prominent messages plugins for WordPress.

For even more information, see our detailed overview on exactly how to set up a WordPress plugin.

Upon activation, you require to include this theme tag right into your 404.php documents where you wish to present the prominent messages.

<?php wpp_get_mostpopular(); ?>

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.

<?php wpp_get_mostpopular("range=all&order_by=comments"); ?>

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.

<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>

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.

<ul>
<?php 
$posts = get_posts('orderby=rand&numberposts=5'); 
   foreach($posts as $post) { ?>
        <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
        </li>
   <?php } ?>
</ul>

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.

<p><strong>By Date</strong></p>
<ul>
<?php compact_archive($style="block"); ?>
</ul>

When a user lands on your 404 page they’ll see your compact post archives.

Here’s how it displays on our 404 page.

 

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

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.

<?php
/**
 * The template for displaying 404 pages (not found)
 *
 * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

get_header();
?>

	<header class="page-header alignwide">
		<h1 class="page-title"><?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?></h1>
	</header><!-- .page-header -->

	<div class="error-404 not-found default-max-width">
		<div class="page-content">
			<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentytwentyone' ); ?></p>
			<?php get_search_form(); ?>
			
			<h4>While you're here, check out some of our popular content:</h4>
 
<div class="col1">
<div class="col-header">          
<strong>Popular</strong>
</div>
<?php wpp_get_mostpopular(); ?>
</div>
 
<div class="col2">
<div class="col-header">          
<strong>Comments</strong>
</div>
 <?php wpp_get_mostpopular("range=all&order_by=comments"); ?>
</div>
 
<div class="col3">
<div class="col-header">          
<strong>Recent</strong>
</div>
 <?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 5, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>
</div>
			
		</div><!-- .page-content -->
	</div><!-- .error-404 -->

<?php
get_footer();

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.

.col1, .col2, .col3 { 
width:30%;
float:left;
padding:0px 10px 10px 10px;
margin:0px;
}
.col3:after{
clear:both;
}
.col-header { 
background:#28303D;
color:#D1E3DD;
margin:0px;
padding:1px;
text-align:center;
}

This is the end result after adding the custom 404 page code above.

 

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

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.

Share On:

Facebook
Twitter
LinkedIn
Pinterest

Leave a Reply

Your email address will not be published.

Get Fresh Content Everyday

Ultimate Guides To Start With

Starting A
Blog

WordPress
Performance

WordpPress
Security

WordPress
SEO

WordPress
Errors

Building an
Online Store

Get The Latest Updates

Subscribe To Our Weekly Newsletter

No spam, notifications only about new posts, updates.