Turning a WordPress error into an opportunity with a custom 404 page

Customize WP 404 pageUnfortunately, the vast majority of website designers and operators view the 404 error, which occurs when a page is not found, as a dead end.

This page is often given a simple message that just states merely, “Sorry! There’s nothing here.” With WordPress, however, there absolutely can be something there when a user navigates to a page that is no longer there, has moved, or has been deleted.

The unique setup of pages and templates within the Dashboard allows this page to be as dynamic as any other page within the WordPress ecosystem.

Don’t let a drab and unhelpful 404 page be the end of a user’s journey through your website. Instead, turn it into an opportunity for further reading, redirection to the content a user may have been looking for, or a suggestion of where to go when the website’s navigation offers no obvious answers.

It’s time to create a 404 error page using the WordPress Dashboard

Installing a WordPress theme can be a hodgepodge effort, where some pages are included and others were left out of the template for reasons of expedience or other considerations. The 404 error page seems to be one which is not consistently included in every WordPress theme, and some custom design authors even leave it out of their own, self-designed website interfaces. That means that a good number of users will have to create their own 404 error page before they can add content and redirect users to a site’s best features.

Creating a 404 error page is generally done using FTP to create the initial PHP file that will contain basic theme code. It can then be edited using built-in tools contained within the WordPress Dashboard itself. To create a 404 error page for a theme that simply does not have one at all, open up an FTP client and navigate to the theme’s main directory. This can typically be found by navigating through the following site path:

/public_html/wp-content/themes/YOUR-THEME


Contained within this folder is a list of files that pertains to every custom page and template a theme brings to the table. What might be noticeably missing among this list of templates is a file titled “404.php.” If that’s indeed the case, go ahead open a text editing program. Leave the document blank for now, but save it as “404.php.” Upload it to your theme’s main folder.


Putting content on a 404 error page

WordPress treats this new 404 error page template just like it treats any other page within its ecosystem, meaning it can use the company’s PHP includes and WordPress tags to include other templates, display content, and keep a user engaged. These tags and content can be added using either FTP or the WordPress “Theme Editor” panel available within the software’s Dashboard.

With a traditional FTP client:

  1. Keep the self-created (and blank) “404.php” file open.
  2. Paste PHP include tags for the header and footer, if relevant.
  3. Paste in any WordPress tags that display entries, categories, author information, sidebar content, or anything else that should be included on this new page. Do this between the header and footer PHP include tag.
  4. Save the file to the server and test the page’s appearance and functions in a web browser.

Using the WordPress Dashboard:

  1. Navigate to the Dashboard homepage.
  2. Click the “Appearance” category in the Dashboard’s sidebar.
  3. Once this has been expanded, click on the “Theme Editor” link.
  4. In the Theme Editor panel that appears, a list of templates will be displayed to the right of a text entry field. Click the “404 Template” link, which references the 404.php file created earlier.
  5. Perform any edits to this template using the text editing box displayed within the Theme Editor. The same WordPress tags and PHP include codes can be used in this box.
  6. Click “Update File” to save any changes, and then test the page’s look and feel in a web browser.

One of the great advantages of using the WordPress Theme Editor is that it offers users the ability to look up critical functions to a page’s display and usefulness. Users can access a drop-down menu that lists several key WordPress functions and tags and, upon selecting one, click the “Lookup” button. This will take them to the WordPress documentation, explaining what the function is and how to call it.

For the 404 error page, users will at least want to know how to include the header and footer within their 404 page. They may also be interested in content tags and the WordPress sidebar code, depending how they intend to structure the error page and what content they plan to display to users who have arrived at a dead end.


Other sources of template and tag information

It’s important to remember that the WordPress 404 error page is not treated like a typical “page” within the software’s Dashboard. Instead, it’s treated as a traditional template file that can display any dynamic WordPress content assigned to it through the use of variables. This means a 404 page can be easily made to display the latest posts in a blog, or an archival list of months and years. It can also display entry category and tag lists, and author biography, and other content stored within the actual WordPress database itself.

Even the most seasoned theme authors can’t recall every WordPress template tag on command, and so they may want to reference the very helpful WordPress Codex when creating their 404 error page. This resource is free to all users of the software and helps to supplement the “common functions” lookup feature that is included a a drop-down menu on every Template Editor page within the Dashboard.

Of course, it might also be wise to directly copy content from the “index.php” or “page.php” files, filling in with new variables or static content where applicable.


Content to include on a dynamic and functional WordPress 404 error page

The reason WordPress has been so successful in recruiting more than 60 million users to its industry-leading content management software is because it offers the ability to place dynamically-generated content on virtually any page within the WordPress purview. The 404 error page is no different, and this allows it to be constructed in a way that displays real site content rather than just an error message.

Users creating a WordPress 404 error page should be mindful of a few things when determining what a user will see on this veritable “dead end” error notification.

  • A user should always be informed that the link they clicked simply does not exist and they’ve ended up at an error page. Even if this new template is designed to include dynamic content form the site’s authors, it’s important to admit the error. This is often because a user will expect to arrive at a certain page (for example, an outdated link to an author biography). If they are instead greeted by a list of categories, with no explanation, they’re just as likely to leave a site entirely as they would be without a 404 page being displayed at all. Admit the error, apologize for it, and then guide them to a new resource.
  • A site’s best content is just itching to be displayed on a 404 error page. Consider all of the times you’ve made a mistake that annoyed a friend or family member: Almost certainly, your goal was to deflect this mistake by doing something impressive immediately afterward. A website should do the same thing, generating a 404 page that admits the error and the reminds a reader that they’re here for great content. It should then display a sort of “greatest hits” to this reader. It’s a great way to almost lose them, and then pull them right back in for a few more minutes of active reading and browsing.
  • Standard site headers and footers should always be included on a 404 error page, as consistency is the key to a great and intuitive web design. There’s no reason to give an entirely new look and structure to the 404 page displayed to users. In fact, this page is naturally a time of great uncertainty for the reader who encounters it. Adding to that uncertainty with a non-standard design will send them elsewhere very quickly.
  • If it’s appropriate, add a little humor to the page. Apologizing and redirecting is great, but a little self-deprecating humor makes a page more humanized and approachable. Those are the two keys to success that every WordPress developer should be aiming for, anyway.


Avoiding the 404 error in the first place: the importance of permalinks and double-checking

Even a well-designed 404 error page should be a last resort for the average WordPress site owner, as it’s really not good to subject users to this type of dead-end destination that begs them to turn around and read one more article. In the interest of making a beautiful, custom-designed 404 page a rare occurrence, adhere to some basic practices of web development.

First and foremost, establish a site’s permalink structure from the first day of its operation. This means logging into the WordPress Dashboard, clicking the “Settings” heading in the sidebar, and click on “Permalinks.” Several standard permalink structure options will be presented, or a user can custom develop their own structure. Either way, pick something that is easy to use and will stick with the site for a long time. One small change will make every single entry page, or custom-created user page, the site controls.

Secondly, always double-check links which are hard-coded into blog entries and any pages generated by the WordPress software. The most common cause of a 404 error is a simple typo or an erroneously typed link somewhere in the site’s content. When writing new site content, copy and paste the link instead of typing it from memory and the problem will be solved on its own.

Finally, try not to have a constantly rotating list of pages that are frequently changed and deleted. The ease with which a user can create a new page in the “Pages” control panel almost makes it seem as if these pages are disposable, but changing their URL, name, or deleting them entirely will send users to an error page. Remember that every page you create might be bookmarked, navigated to by memory, or linked to by old entries. This sets readers up for failure over time if page are constantly undergoing permalink changes and deletions.


Enjoy better traffic and long on-site visitations with your 404 error page

A customized WordPress 404 error page is the key to retaining visitors for a longer duration and improving your WordPress site’s performance in web searches and traffic-tracking tools like Google Analytics. These longer visits count for something: They increase a site’s authority and indicate to search engines and ranking websites that the site’s content is of a higher value than its competitors’ content.

Above and beyond that, though, a custom 404 error page is easy to create using either the FTP upload method or the included Theme Editor in the WordPress Dashboard. There’s really no reason not to create one; the enhanced usability it gives to your WordPress website will benefit users’ peace of mind as much as it benefits a site’s search engine performance, and it’s a great excuse to remind even the most loyal (and misdirected) reader of the site’s best content and publications over the course of its time on the internet.


Do you use a custom 404 page on your WordPress site? What have you found works best for content on a 404 page? Let us know in the comments!

Vladislav Davidzon is the principal of a US-based online marketing consultancy, developing integrative solutions through high impact search engine optimized WordPress websites for socially responsible customers of all sizes around the world. For more details visit Vladislav Davidzon & Associates.

700 Photoshop Resources – only $49!

Source


This entry was posted in Blog. Bookmark the permalink.