Green Alligator Shoes
I do now. And I thought I’d show you how I customized the error page for a WordPress-based website, which uses the Thesis Theme. Phew, that is a mouthful.
What is a 404 Page?
404 is a fancy schmancy way of saying “error page” in techie geek speak. We can call it an error page if it makes you feel better, but you might impress (or bore?) people at cocktail parties if you say “404.” Can you say it in French? If you can, it will sound so much better. Please let us know in the comments. But, I digress.
When I searched for information to help me create my page, I only found tutorials explaining how to create an error page for a regular ol’ WordPress site. Although I found a few that taught me how to develop a page for the Thesis framework, I noticed that they left out some steps.
I am going to walk you through every step of the process. And because I like you—you are here reading my blog after all—I will include pretty pictures to illustrate each step.
How to Create Your Error Page Step by Step
If you already have installed the Thesis Open Hook plugin, skip to number five below.
1. First, you will need to install the Thesis Open Hook plugin. (Want know more about Thesis hooks?) The easy way to do this is to locate the plugin from your WordPress control panel.
2. After you log into your blog, visit your plugin section and click the “add new” button.
3. Enter “Thesis Open Hook” without quotes into the search box and click “search plugins.”
4. Once the plugin appears, select install and wait for it to install. It should not take long.
Install Thesis Open Hook Plugin
5. After your sparkly new plugin is installed, locate “Thesis Open Hook Plugin” in your blog’s left-hand navigation bar. (You’ll still be logged into your blog, so I mean the left-hand navigation you see when logged into WordPress.) Go to the Appearance –> Thesis Open Hook, or see the screenshot below.
5.a. Click on Thesis Open Hook:
Find Open Hook in Your WordPress Blog
6. After you click on the left-hand naviation link, you’ll see a page like this and a menu hovering in the lower right corner. See that little tiny thing in the lower right of the image below? That is what you need to find.
Thesis Open Hook
7. Select thesis_hook_404_title on the menu. Once you click this, you’ll be able to see and edit the 404 error page’s content in addition to the title.
Thesis Open Hook Menu
8. Write a title for your 404 error page content. I choose to avoid using “404″ and instead wrote “That Page Isn’t Here, and I’m Going to Help You!” When I reach an error page, I want someone to help me get where I want to go. Using techie terminology your visitor has to think about doesn’t help your website visitor and will probably make them click somewhere else. I used “I” in my title because it’s more personal than “we.” What you choose to use will depend on whether you are a large business or a one-person consultancy. If you’re a designer, you’ll want something that wows people. If you’re a comedian, you’ll want to be funny.
8.a.Select the Remove Thesis Default 404 Title box to make sure your unique title replaces the default.
Thesis Open Hook 404 Title and Content Box Screenshot
9. Write content and use it in the content box. You can use HTML to bold, italicize, or add paragraphs or lists to your text. You can add images here too, which I recommend. Search Flckr Creative Commons for images you can use. Be sure to check licenses for the photos before posting—and give credit to the photgrapher.
Thesis Open Hook 404 Content Box
9.a.Select the Remove Thesis Default 404 Content box to make sure your new content is used instead of the default.
Here’s what my final page looks like. As you can see, I offered links to the home page and the blog. I added in a photograph of milk and cookies, because I find that food relaxing. Hopefully, anyone who picks a dead link will appreciate my attempt at levity as well as the links to help them find the right place on my website.
Customized 404 Error Page
Please share your new 404 error page in the comments.
If you need inspiration, here are links to creative 404 pages. I am including a link to another tutorial about customizing 404 pages:
{ 2 comments… read them below or add one }
thanks. I’ve followed the steps above to change the 404 error message, but I think there is a formatting issue. I can’t see the 404 title (perhaps is behind my nav menu) and I would like to format the paragraph of the 404 content to that it has some padding on the right hand side.
your help would be appreciated!
You might be able to use CSS to format the paragraph padding. I’m not sure about the title. I’d have to see your code.