TechnologyWebsite BuildersWordPress Hosting

How to Edit a 404 Page in WordPress (Customization Guide) | WP Buffs

Each content material creator and web site admin know that small particulars matter a lot, and there’s no second impression on the Web. A lovely shade scheme, glorious animation impact, or a sexy 404 web page are particulars that make or break the person expertise. 

A 404 web page is the technical expression describing conditions when a web page isn’t discovered. For instance, it is perhaps as a result of the person mistypes an URL in the browser tab or that webpage is not on-line. 

Within the following paragraphs, you’ll learn the way to edit a 404 web page in WordPress. A beautiful 404 web page is the very best resolution to overcome an embarrassing second. As a substitute of disappointing web site guests, a superb 404 web page will contribute to a higher picture of your model. 

What a 404 Page Is 

You click on on a hyperlink or sort in an URL tackle in the browser tab. Subsequent, the browser begins requesting information from the server internet hosting the web site you need to go to. That is a fundamental rationalization of Web searching. The data trade between browser and server implies, amongst many others, a few standing codes. As well as, there are statuses to describe the webpage redirection, the consumer or server errors, or informational functions. 


All of the standing codes with kind 4XX regard consumer errors. For instance, 403 Forbidden is when the server understands the browser’s request however refuses to present the information. By far, the 404 web page is essentially the most well-known standing code. You get a 404 web page once you click on on a damaged hyperlink, sort in a mistaken URL driving to an inexistent webpage, or if the useful resource you requested for hasn’t ever existed. 

Even important websites, like big journal information or closely visited shops, may comprise a 404 Page error. After all, it’s unavoidable, however it’s best to understand how to go over the embarrassing scenario. Therefore, it will assist for those who did all the pieces attainable to create a handsome 404 error web page on your web site. 

The Anatomy of a Good 404 Page 

Image of's 404 Page Design as an example of how to edit a 404 page in’s 404 Page Design

Some web sites earn a backlink and public recognition by mentioning in lists that includes cool 404 pages. Web site guests respect a good design or a humorous message on a 404 web page. This could persuade you that a handsome 404 error web page is a precedence on your on-line companies. Here’s what a good 404 web page ought to embrace: 


●     The error message – Customers ought to notice a problem from the second they land on a 404 web page. Make it express so that everybody understands. 

●     Hyperlinks to your content material – You don’t need customers to abandon your web site. Present them hyperlinks to related content material. Be it your finest content material or one thing associated to the lacking web page, it’s completely up to you. What issues is holding them in your web site. 

●     Apologies – Let folks know that you’re sorry for his or her inconvenience. Use humor if attainable – it’s the very best technique to encourage them to give your web site a second probability. 

●     Good design – Individuals are disillusioned after they land on a 404 web page and have a tendency to overreact. A shocking piece of design, in addition to participating content material, could change their thoughts. Do your finest to craft a superb 404 web page. 


How to Edit a 404 Page in WordPress 

Fortunately, we’ve varied choices to edit a 404 web page in WordPress. Probably the most skilled customers could go for enhancing the 404.php file. That is the file chargeable for displaying the 404-error web page. Net admins preferring utilizing a page builder like Elementor could create a 404 web page. Lastly, a few plugins to make 404 pages can be found for these missing coding expertise. Let’s dissect all of the methods to create and edit a 404 web page in WordPress. 

Edit a 404 Page Via an FTP Shopper 

rule of thumb is to carry out a backup copy of your web site earlier than enhancing the code. Don’t ever skip this step – in most instances, you received’t want a web site backup, however dangerous issues occur when unprepared. So do this backup to relaxation assured! 

Let’s suppose that you simply carried out a full web site backup and you’re prepared to dive deeper into the matter. Use the FTP consumer of your alternative and join to the location localhost. Seek for a file known as 404.php file – it’s the file chargeable for displaying the 404-error webpage. Often, WordPress themes have a devoted 404.php file, however some may miss this file. Double-check in case your theme code contains a 404.php file. In case your theme doesn’t have a 404.php file, you should have to construct one. Create a new file and replica the next strains of code: 

404 Page template

* The template for displaying 404 pages (Not Discovered)
* @bundle WordPress
* @subpackage Twenty_Thirteen
* @since Twenty 13 1.0
get_header(); ?>
<div id=”main” class=”content-area”>
<div id=”content material” class=”site-content” position=”important”>
<header class=”page-header”>
<h1 class=”page-title”><?php _e( ‘Not Discovered’, ‘twentythirteen’ ); ?></h1>
<div class=”page-wrapper”>
<div class=”page-content”>
<h2><?php _e( ‘That is considerably embarrassing, isn’t it?’, ‘twentythirteen’ ); ?></h2>
<p><?php _e( ‘It seems to be like nothing was discovered at this location. Perhaps attempt a search?’, ‘twentythirteen’ ); ?></p>
<?php get_search_form(); ?>
</div><!– .page-content –>
</div><!– .page-wrapper –>
</div><!– #content material –>
</div><!– #main –>
<?php get_footer(); ?>

Supply: Creating an Error 404 Page on WordPress Codex

That is the code behind the 404 Page of Twenty 13 theme – it’s a fundamental web page appropriate for enhancing and use on your venture. After all, you may take a take a look at different default WordPress themes and verify their 404 pages. The 404 web page of the Twenty 13 theme calls the header and the footer of your web site, so the web page is in line with the model of your web site. Irrespective of how your web site seems to be, the 404-error web page can have a related design. Nonetheless, you could have to adapt the content material displayed on this web page. At this stage, the expertise of your content material creator steps in.  

Optionally, you might edit the 404.php file to show the content material printed in your web site. The choices are infinite, so let’s see some potential modalities of enhancing the 404 Page error. 

  • Show the titles of the most recent seven posts- All you could have to do is to paste this snippet of code into the 404.php file: 

<?php wp_get_archives( array( ‘sort’ => ‘postbypost’, ‘restrict’ => 7, ‘format’ => ‘customized’, ‘earlier than’ => ‘<span class=”my-post-title”>’, ‘after’ => ‘</span>, ‘ ) ); ?>

  • Show the titles of random seven posts Paste the following code to show seven random posts: 

$rand_posts = get_posts( array(
‘posts_per_page’ => 5,
‘orderby’ => ‘rand’
) );
if ( $rand_posts ) {
foreach ( $rand_posts as $submit ) :
setup_postdata( $submit );
<li><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></li>

Add your brand or a humorous picture (cats and canine all the time work) to make viewers smile and offer you a second probability. Subsequent, check the 404 web page after you end the enhancing work. To show your 404-page, sort in your web site tackle in the browser bar and add a random string of letters after it; the end result ought to look one thing like If it’s not working, it’s as a result of the server can’t discover your customized 404.php file. On this situation, it’s best to go to the location .htaccess file and paste the next line of code: 

ErrorDocument 404 /index.php?error=404

Necessary: For those who edit a new or a just lately launched web site, it may not have the .htaccess file. It’s not a large drawback -change your web site’s permalinks and save your operation. Then, revert to your most well-liked permalinks format instantly after that. On this method, you should have generated the .htaccess file.  

Edit a 404 Page Via Theme Editor (Not Advisable) 

Image of how to edit a 404 page in WordPress using the theme editor.Enhancing a 404 web page via the theme editor

A big variety of articles associated to enhancing a 404 web page in WordPress point out the theme editor as a viable resolution. It’s not! Though it’s handy and simple to edit the location code instantly from the WordPress admin dashboard, it’s hazardous and should find yourself a fiasco. Not to point out, it’s not skilled in any respect to edit the location whereas it’s on-line and accessible to everybody. In addition to, your enhancing disappears when you replace the theme (until you utilize a youngster theme). 

Edit a 404 Page Via Page Builders 

This technique is protected, easy, and efficient. You’re in all probability conversant in web page builders like Elementor, Divi Builder, Beaver Builder, SeedProd, or Themify Builder. Which you select isn’t related, so long as you could have a good grasp on it. These builders allow you to create a superb 404 web page with out writing a single line of code. That is the very best resolution if you’re anxious about pasting code snippets into your web site recordsdata. 

Test the weblog and the documentation of your favourite web page builder, and, most certainly, you can see a tutorial explaining how to create a 404 web page. As well as, some web page builders have devoted templates for 404 pages. Select a template and personalize it to match your model. 

404 Page WordPress Plugins 

You don’t have many options to create a 404 web page with a devoted plugin. Nonetheless, a few plugins deserve your consideration. Their capital benefit is that you simply don’t have to write code to create and edit 404 pages. The plugins are easy, efficient, and light-weight. 


404page plugin in the WP Repository404page plugin in the WP Repository

You could be tempted to consider that you’ve to be a coder to create a good 404 error web page. Thanks to this plugin, everybody can conceive a sexy 404 error web page. In addition to, the 404page plugin isn’t as advanced as web page builders are. You focus in your closing product – a good 404 error web page. 

Set up and activate the plugin. Subsequent, create a 404 web page the identical as you do the remainder of the pages in your web site. Out of your WordPress admin dashboard, go to Look > 404 Error Page and select the web page you could have simply constructed to be your web site customized 404 error web page. 

This plugin doesn’t enable redirecting webpages; it simply tells the search bots that the webpage is lacking. 404page is a private venture of a developer, so there isn’t any company behind this plugin. Take note of that the plugin has 100,000 energetic installs and an nearly excellent score – 4.9 stars out of 5. Below these circumstances, the plugin developer deserves our appreciation! 

All 404 Redirect to Homepage & Broken Images Redirection 

All 404 Redirect plugin in the WP Repository All 404 Redirect plugin in the WP Repository

The title of the plugin isn’t fairly spectacular, but it surely’s extremely suggestive. The plugin handles the 404 Page errors otherwise than the earlier different. As a substitute of delighting guests with a well-designed 404 web page, this plugin redirects all 404 errors to the homepage or different webpage. The largest benefit of this plugin is that you’ve management over the damaged hyperlinks in your web site. Moreover, you might use this plugin to redirect customers. For instance, as a substitute of letting folks go to an un-updated weblog submit, use this plugin to drive them to the up to date model.     

Colorlib 404 Customizer  

Colorlib 404 Customizer plugin in the WP Repository Colorlib 404 Customizer plugin in the WP Repository

This plugin is straightforward to use and genuinely helps you create participating 404 pages. It comes with professionally crafted 404 templates you could customise to fit your wants. Colorlib 404 Customizer plugin permits inserting social media buttons, altering the background shade or picture, and configuring the textual content headings. Extra superior customers can add customized CSS code. The plugin is open-source, so you may contribute to bettering the plugin. 

Use a web page builder or do it via your theme.

For those who use a web page builder already, you’ll have already got the choice for customizing your 404 via it. Just about each web page builder permits you to edit your 404 web page. Right here’s a record of plugins we’re assured that you are able to do it in:

● Breezy

● Elementor 

● Beaver Builder

● Divi Builder

● Web site Origin

In case you are utilizing a theme corresponding to OceanWP, GeneratePress, or Astra, you are able to do it via their theme choices. You’ll get a completed glorious wanting 404 web page for those who import demo content material. The one draw back of importing demo content material and utilizing pre-built designs is that your web site will roughly look exactly just like the Demo. Take, for instance, this website and the Astra demo. Everyone who has regarded via Astra’s library of starter websites will shortly acknowledge that the web site homeowners haven’t created it themselves. This may hurt how a lot customers belief your web site.

On the brilliant aspect, Astra, OceanWP, and the opposite themes with 500.000+ customers prolong their starter web site library extra each month. 

Over to You 

You now have a clear concept about how to edit a 404 web page in WordPress. There are lots of options to do it, and it’s best to choose the one appropriate on your expertise and desires. What issues is having an thrilling 404 error web page to delight your viewers. The tactic and instruments you utilize to design and implement that 404 web page don’t concern your prospects. You don’t have any excuse to lack a superb 404 error web page! Go to the drafting board and begin constructing a customized error web page! 

Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *