Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
WordPress 5 Cookbook

You're reading from   WordPress 5 Cookbook Actionable solutions to common problems when building websites with WordPress

Arrow left icon
Product type Paperback
Published in Mar 2020
Publisher Packt
ISBN-13 9781838986506
Length 660 pages
Edition 1st Edition
Languages
Arrow right icon
Author (1):
Arrow left icon
Rakhitha Nimesh Ratnayake Rakhitha Nimesh Ratnayake
Author Profile Icon Rakhitha Nimesh Ratnayake
Rakhitha Nimesh Ratnayake
Arrow right icon
View More author details
Toc

Table of Contents (16) Chapters Close

Preface 1. Setting Up WordPress and Customizing Settings 2. Customizing Theme Design and Layout FREE CHAPTER 3. Using Plugins and Widgets 4. Publishing Site Content with the Gutenberg Editor 5. Managing Users and Permissions 6. Setting up a Blogging and Editorial Workflow 7. WordPress as an Application Framework 8. Improving Usability and Interactivity 9. Building E-Commerce Sites with WooComerce 10. Troubleshooting WordPress 11. Handling Performance and Maintenance 12. Improving Site Security 13. Promoting and Monetizing the Site 14. Other Books You May Enjoy Appendix

Creating a custom 404 error page

We get a 404 page not found error whenever the server is unable to provide the content for a requested URL. This might be due to the server being down, a mistyped URL, or because content has been removed from the site. WordPress provides a built-in 404 page with a very simple message called Nothing Found, along with a form to search the site.

Many websites use custom well-designed 404 pages to attract more visitors by converting the error into something useful. In this recipe, we are going to create a custom 404 page with custom content for our theme.

Getting ready

You should have the Twenty Twenty Child theme activated on your site. Open the code editor and make sure you have access to the theme files in your local or external WordPress installation.

How to do it...

Follow these steps to create a custom 404 template for the child theme:

  1. Open the browser and type in a non-existent URL for your site. If your site is www.yoursite.com, you can type in a random value such as www.yoursite.com/dewf687f6e8w to see the 404 page shown in the following screenshot:
  1. Go to wp-content/themes/twentytwenty and copy the 404.php file.
  2. Paste the file inside the wp-content/themes/twentytwentychild folder.
  3. Open the 404.php file in wp-content/themes/twentytwentychild folder. You will see the following code section:
<div class="intro-text"><p><?php _e( 'The page you were looking for could not be found. It might have been removed, renamed, or did not exist in the first place.', 'twentytwenty' ); ?></p></div>

<?php
get_search_form(
array(
'label' => __( '404 not found', 'twentytwenty' ),
)
);
?>
  1. We can customize this section to create a better looking 404 page with necessary information.
  1. Replace the message inside the intro-text<div> element, like so:
<div class="intro-text"><p><?php _e( 'The page you were looking for could not be found. It might have been removed, renamed, or did not exist in the first place.Maybe try a search or view our posts?', 'twentytwenty' ); ?></p></div>
  1. Next, copy the following code from the post-grid.php file we created in the previous recipe and add it after the intro-textdiv element to display a post grid inside the 404 template:
<?php 
$post_list = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=> 3 )); ?>

<?php if ( $post_list->have_posts() ) : ?>
<div id="list-post-panel">
<ul>
<?php while ( $post_list->have_posts() ) : $post_list->the_post();
$image = get_the_post_thumbnail_url( get_the_ID()); ?>
<li>
<div class="post-list-featured-image"><img src="<?php echo $image;
?>" /></div>
<div class="post-list-title"><a href="<?php the_permalink(); ?>"><?php the_title();
?></a></div>
</li>
<?php endwhile; ?>
</ul>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
  1. Save the content of the 404.php file.
  2. Visit the URL in step 1 again.

Now, you will see the modified 404.php page, as shown in the following screenshot:

As you can see, we have changed the message to ask the user to search the site or view available posts. So, the visitor will think about using these features and staying on the site without leaving after seeing the error.

How it works...

Once the user accesses an invalid URL, WordPress will look for a valid 404 template. The 404 template is generated by the 404.php file of the theme, so it will be a theme-specific page.

If a valid 404.php file is not available in the theme, WordPress will load the default 404 content within the core with a basic message and search form.

In this scenario, we have created a 404.php file in the child theme using the 404.php file of the parent theme. Now, WordPress will look for the 404.php file within the child theme, instead of the parent theme. In the custom 404 template, we removed the original header of the Twenty Twenty template and changed the message to the following:

<?php _e( 'The page you were looking for could not be found. It might have been removed, renamed, or did not exist in the first place.Maybe try a search or view our posts?', 'twentytwenty' ); ?>

Then, we used the code from the previous recipe to display the post list on a 404 page. However, the following code only limits the post list to three entries as this is a 404 page and too much information can discourage the user to browse the site:

<?php $post_list = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=> 3 )); ?>

The other parts of the code are exactly same as they are for the post-grid.php file.

There's more...

The purpose of designing a custom 404 page with additional content is to motivate the user to keep using the site when they feel frustrated after receiving an error. This error can be due to their mistakes in requesting an invalid URL or the requested content not being available at that time. In any case, we have to make sure to effectively use a 404 page to keep the users on our site. Modern sites are using creative designs and valuable content in 404 pages to attract users. Let's look at some of the things we can do in 404 page designs:

  • Inform the user about the error: We should add a message informing the users that an error has occurred and possible reasons for the error. Also, it's good practice to apologize, even with a simple Sorry statement.
  • Inform the user about the next step to take: Including a search form asking to search the site, providing links to commonly used parts of the site, or asking them to contact you can be valuable for the user to move forward and stay on the site.
  • Show a glimpse of the most important site content: This is actually an advantage for the site owner as they can provide the content that they want the user to see. This could be the most popular posts on a blog or popular products in a store.
  • Show something funny or creative: Regardless of whether a visitor requested an invalid URL or whether the site generated the error for the URL that existed previously, the visitor is going to be a bit annoyed. So, including a funny or creative video, image, or design can help change the mood of the visitor and motivate them to use the site.

You should use one or more of these techniques and build a productive 404 error page that helps the users as well as benefit you as the site owner.

You have been reading a chapter from
WordPress 5 Cookbook
Published in: Mar 2020
Publisher: Packt
ISBN-13: 9781838986506
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image