Wordpress · Wordpress Setup

WordPress Thesis – How to Create your 404 Error Page

Wordpress Killer Thesis ThemeThesis Tutorial – I want to reduce my bounce rate on my website so the first step I’m looking into is – How to create an effective 404 Error Page.  I’ve put this off for quite a while because I was afraid it would be a huge task.  I’m not the most super creative nor super technical person in the world, so creating a brand new 404 page is a little daunting.

So yesterday, I decided to give it a shot.  Amazingly, it only took me 5 minutes to get this baby up and running.  I’m extremely amazed at how easy it was to customize my 404 Error Page in Wordpress Thesis theme. I went with a format for my error page to include:

  • Contact
  • Popular Posts
  • Recently Updated Posts

So this Thesis Tutorial will guide you through how I created my 404 Error Page.  Here is a high level overview of what I did and Wordpress Plugins that I used to help me create the 404 page.  It seems like a lot of steps, but it’s super easy.

  1. How the 404 Error Page Looks Prior to changes
  2. Look for the 404.php file, not there!
  3. Backup Thesis custom_functions.php file
  4. Install Plugin – Thesis OpenHook
  5. Install Plugin – WordPress Popular Posts
  6. Install Plugin – Recently Updated Posts
  7. Customize the Thesis hook thesis_hook_404_title
  8. Find the PHP codes for Popular Posts and Recently Updated Posts
  9. Customize the Thesis hook thesis_hook_404_content
  10. How the 404 Error Page Looks After changes

1.   How the 404 Error Page Looks Prior to changes

If you go to your website URL and type garbage after it, you will see a 404 error page.  For Example, go to http://www.cmsmind.com/thispagedoesn’texistandwillgeta404errorpage.  Replace my URL with your own.  If you are using WordPress Thesis, you will see:

You 404’d it. Gnarly, dude.

Surfin’ ain’t easy, and right now, you’re lost at sea. But don’t worry;

simply pick an option from the list below, and you’ll be back out

riding the waves of the Internet in no time.

  • Hit the “back” button on your browser. It’s perfect for situations like this!
  • Head on over to the home page.
  • Punt.

 2. Look for the 404.php file, not there!

The first step i’ve read everywhere is to look for a 404.php file in your Wordpress Themes directory.  I looked in the Thesis Theme directory and I couldn’t find it!  But I realized later that Thesis is not like any regular theme.  You do not have to create a separate file, you can add your 404 error page customization in your custom_functions.php file.

I’m pretty wary of editing the custom_functions.php file because if you enter in any invalid coding, the whole site will be down.  So I installed the WordPress plugin Thesis OpenHook to help.

3.  Backup Thesis custom_functions.php file

Thesis - Custom Functions File
Thesis - Custom Functions File

Take a backup of your custom_functions.php file.  This is a very important file and if you mess this file up, your whole Thesis website will be down.  I’m not kidding, I’ve had to use ftp to replace this file with my backup many times.

  • Login to your FTP manager
  • Go to your WordPress Thesis Theme custom directory
  • Drag a copy of the custom_function.php file to your desktop.

4.  Install WordPress plugin – Thesis OpenHook

Thesis OpenHook Activate Plugin
Thesis OpenHook Activate Plugin

I recommend to install the free WordPress plugin – Thesis Openhook.   This is great for the php dummies like myself.  This plugin will help you add HTML into the many thesis hooks and at least if you make any errors, it will not cause major disruptions in your WordPress website.

  • Login to your WordPress Administrator Panel
  • Click on Plugins, Add New
  • Search for “Thesis Openhook”
  • Click on ‘Install’
  • Click on Plugins, Installed Plugins
  • Find Thesis Openhoook and click on ‘Activate’

5. Install Plugin – WordPress Popular Posts

Wordpress Thesis ThemeI want to display the top 10 most popular posts in the past week on the 404 error page.   You need to install another free plugin called ‘WordPress Popular Posts’

  • Follow the above steps to install and activate a plugin
  • Search for the plugin name ‘WordPress Popular Posts’ by Héctor Cabrera

6.  Install WordPress Plugin – Recently Updated Posts

For the ‘Recently updated post’, I installed a different free plugin which  I can customize if I want to add/remove pages, # of posts to display etc.  This plugin is called “Recently Updated Posts”

  • Follow the above steps to install and activate a plugin
  • Search for the plugin name ‘Recently Updated Posts’ by Hannes Hofmann

7.   Customize the Thesis hook thesis_hook_404_title

Thesis Openhook - Customize 404 Error Page Title
Thesis Openhook - Customize 404 Error Page Title

Now begins the steps of actually configuring your 404 error page.  The thesis_hook_404_title is the title of the page.  This is the text where it says “You 404’d it. Gnarly, dude.”

  • Login to your WordPress Administrator Page
  • Click on Appearance, Thesis Openhook
  • Search for ‘404 Title’
  • Enter in your own title, for mine I entered
  • title = CmsMind.com – There’s Nothing Here!
  • Click on the check box to ‘Remove Thesis default 404 title’.
  • Click on the ‘Little Save Button’

8.  Find the PHP codes for Popular Posts and Recently Updated Posts

In step 5 and 6 you installed these two plugins.   You can use them in sidebars, as shortcodes or even grab the PHP and add them into your 404 Error page.    You can customize how you want to display your content via the attributes available to the plugin.

a.  Get the PHP Code for Popular Posts:

Wordpress Popular Posts 30 Attributes
Wordpress Popular Posts 30 Attributes

There are about 30 different attributes you can use to customize the look of the Popular Post.  If you want to see them, you can find it under:

  • WordPress Admin, Settings, WordPress Popular Posts, What attributes does WordPress Popular Posts shortcode [ wpp ] have?
  • I want to show the weekly top 10 posts ordered by views, the standard PHP code would be:

<?php if (function_exists(‘wpp_get_mostpopular’)) wpp_get_mostpopular(“range=weekly&order_by=views”); ?>

b.  Get the PHP code for Most Recently Updated Posts:

  • I want to show the 10 posts that were most recently updated.  I don’t want to show pages, or posts that are new or protected.
  • The basic PHP that you can add is   <?php hh_recently_updated_posts();?>
  • I added more attributes to the PHP to show what I wanted, so the PHP code became:

<?php hh_recently_updated_posts($num = 10, $skip = 0, $skipUnmodifiedPosts = true, $includePages = false, $hideProtectedPosts = true); ?>

9.  Customize the Thesis hook thesis_hook_404_content

Thesis Openhook - 404 Content Error Page
Thesis Openhook - 404 Content Error Page

Now you will customize the content of your 404 Error Page.  Basically all the text that comes after in your current 404 error page.   All the text from “Surfin’ ain’t easy…..Punt”.  You will use the Thesis hook  thesis_hook_404_content to do this.  First you will need to get the php code for the popular and recently updated posts.

We’re sorry but there is nothing here. The page that you requested or URL typed in to get here cannot be found.  You can use the search box on the right side to search for it again.  If you think the page should be around somewhere let me know.<br>
<P>
<P>
<h2>Want to read something else?</h2>
<P>
Here is a list of the Weekly Top 10 <b>Most Popular</b> articles at <a href=”http://www.cmsmind.com”>CmsMind.com</a>
<?php if (function_exists(‘wpp_get_mostpopular’)) wpp_get_mostpopular(“range=weekly&order_by=views”); ?>
<P>
Here is a list of 10 articles <b>Most Recently Updated</b> at <a href=”http://www.cmsmind.com”>CmsMind.com</a>
<?php hh_recently_updated_posts($num = 10, $skip = 0, $skipUnmodifiedPosts = true, $includePages = false,
$hideProtectedPosts = true); ?>

  • Click on the check box to ‘Execute PHP on this hook’.
  • Click on the check box to ‘Remove Thesis default 404 content’.
  • Click on the ‘Little Save Button’

10.  How the 404 Error Page Looks After Changes

Now visit your website URL and type garbage after it.  You will see a different 404 error page.  For Example, go to http://www.cmsmind.com/thispagedoesn’texistandwillgeta404errorpage.  Replace my URL with your own.  It looks more intelligent and provides visitors with more options to read or search for other material.

I hope this Thesis Tutorial was helpful to you.  If I missed anything let me know.   Click here to see more details about WordPress Thesis Theme.

Thesis Theme BannerThanks,

Elaine

Leave a Reply

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

Captcha Captcha Reload