Wordpress 404 Page Template

Posted onby admin

Every theme comes with its own 404 page, to customize the 404 page in your theme; you should begin by opening the file 404.php in a text editor and try by editing the message on the 404 page then save and test it. For the purpose of this tutorial we are going to use WordPress default theme 2014 and edit the 404 page to suit our custom design. Reset Your WordPress Permalinks. One of the most common causes of the WordPress 404 error is.

[See our new Ultimate guide to WordPress 404 pages]

What is the 404 template?

If a user visits a non existent page in WordPress, they are delivered the 404.php file from the active theme. This is a template file that lives within all themes and is used when a 404 error is returned.

Wordpress

Most theme authors include a message in the template indicating that the page the user is trying to find cannot be found. Many also include a search form to enable to user to search the site for the content they were looking for.

However, the contents of this template are not editable from within the WordPress backend like other pages and posts. The website owner is stuck with what the theme author has decided should go on the page.

How to make the 404.php template content editable using the block editor

In order to make the content of this template editable there are a few steps you need to follow.

Create a new 404 page in the WordPress admin

Wordpress

A new page needs to be created in the WordPress admin which will be used to edit its content.

To do this we can simply navigate to Pages > Add New. Then you need to make sure that the title of the page is called “404” only. This is to make sure that we can reference the page with this title in the code later on.

Now you can add whatever content you like to this page using the WordPress block editor. This content will be rendered below the “404 not found” title when the page is served to users.

It is probably worth marking this page as no-index too, so that it does not show in search results.

Modify the 404.php file in your theme

This requires editing the code in your themes 404.php file. If you are running a commercial theme then I would highly recommend that you create a child theme first before making changes to the themes template files.

In your themes 404.php file you can replace the current contents with the following.

View the code on Gist.

As you can see in the code above, we firstly get the post object for the page which has the title “404“. If this returns a post object, we know that we have a page titled 404 and therefore we then get the blocks that have been added to that page using the parse_blocks() function.

We then check to see if any blocks have been added to the 404 page. If blocks are present, we create a variable to store our block output in before looping through each block and rendering each blocks output into the content variable using the render_block() function.

Some important notes to think about

It is important to note here that your sites 404 page will NOT be cached by your host. This is because when served it does not return a 200 status code and this the server does not cache its contents.

Additionally your sites 404 page is used not only for pages that don’t exist but also for requests to static files and images that may no longer exist.

Therefore there is potential for a 404 page with lots of content on to be a bottle neck for speed and using a lot of server resources. We have not really found this to be a great problem but it is something worth noting a checking.

You can mitigate some of this using a HTML fragment caching solution such as this one explained very well by Mark Jaquith.

Thanks to Tim Nash for pointing out the concerns around caching and performance with this feature.

How to Improve Your 404 Page Template in WordPress

404 errors are not good for user experience. We showed you how to get email alerts for 404 errors on your site so that you can quickly fix them. In this article, we will show you how to improve your 404 page template in WordPress, so you can create a more useful 404 page that actually help users.

How Most WordPress 404 Page Looks Like?

404 page is often the most neglected page on most sites. Often a lot of WordPress themes 404 page looks like this:

This 404 page in WordPress is handled by a template file called 404.php.

If your configuration is really messed up, then the 404 page would look like this:

Neither of the above 404 pages are really useful.When a user lands on a 404 page, they’re already frustrated. Why? Because they can’t find what they were looking for.

You need to help the user find the right page. You can help make this experience better by properly conveying the error, and give them a proper course of action (i.e What to do next).

This can be done by showing them other sections of your sites they can visit, give them a way to contact you, etc.

How to Create a Custom 404 Page in WordPress?

First thing we need to do is start by creating a custom 404 page template. This can be done by editing the 404.php file in your WordPress theme. If you are editing your theme directly, then we would urge you to at least backup your WordPress theme. To make your 404 page more useful, we are going to show you how to add useful elements such as popular posts, most commented posts, recent posts, date archives, list of all categories, etc.This will allow new users to have a quick glance at what you have to offer.

Display Most Popular Posts on 404 Page

First thing you need to do is install and activate the WordPress Popular Posts plugin on your website. Upon activation, you need to add this template tag into your 404.php file where you want to display the popular posts. <?php wpp_get_mostpopular(); ?>

Display Most Commented Posts on 404 Page

The most commented posts section also relies on the popular posts plugin we activated in the last step. Simply add this template tag where you want to display your most commented posts.

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

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

Custom 404 Page Wordpress

Wordpress

Wordpress 404 Page Template Free

Install and activate this plugin the Compact Archives plugin. After activating the plugin, add the following code in your 404.php file:

Edit 404 Page Wordpress

It will display your monthly archives like this: