A Smarter Custom 404 Page With Redirects – Forty Four Pro

I start with a bit of background on 404 pages.

To skip to the plugin review, click here. There’s a giveaway at the end, so keep reading!

What exactly is a 404 page?

All websites have an error page that is shown when a page is requested on a site that doesn’t exist.

This is known as a 404 page.

404 pages should:

• Inform the user that there has been an error and what the cause might be
• Provide some useful information on what to do next – e.g.
  • a link to the home page
  • a site map with links
  • a search facility

The BBC’s 404 page is a good example.

Why would I need redirects?

If you delete a page on your site, or rename it and change the URL, then it will show a 404 error if the original page is accessed.

e.g. www.mybusiness.com/services/ changes to www.mybusiness.com/our-services/.

Too many 404 errors on a site are frustrating for the user. They may think the site doesn’t work.

They’re also bad for SEO. Imagine deleting or renaming a popular page with many backlinks and sending the user to a 404 page. You could lose a lot of traffic.

So the answer is redirecting the user to another page.

Redirects are often done as 301 redirects, which tells the browser that the web page (or resource) has moved permanently to a new home.

Redirects should go to relevant pages, not just blanketly to the home page.

How does WordPress handle 404 errors?

404 pages are handled by the 404.php file in a theme.

Why would I need a custom 404 page on my site?

Because  404 pages in some themes are quite plain and uninformative! And downright boring.

Here is what Divi’s 404 page says:

Twenty Fourteen’s isn’t much better, though it does have a search box:

Responsive theme is better still, but still not pretty.

Meet Forty Four plugin

How would you like to have a 404 page like this? Much better!

Forty Four plugin is available for free from the WordPress.org repository.

It uses the freemium model – you can test out the basic version for free, and you pay for extra features.

How does Forty Four work?

To get started, install the plugin and go to Appearance > 404.

The basic plugin allows you to customize a 404 page similar to the screenshot above.

As long as the plugin is active, this 404 page overrides your default 404 page.

You have control over:

• whether the 404 title is shown
• the other text displayed – with text-shadow as an option
• the font and link colours
• the choice of background image, or a background colour if you prefer (note that the background takes up the full width and height of the page)
• the search border colour

Here’s the same page after some customization.

I removed the 404 at the top, changed the text, swapped the background image for a blue background and changed the link colour to pale yellow.

The free plugin also logs the 404 errors generated.

Note that most of these error URLs are temporary ones generated by the plugin when you test the 404 page, and can be safely deleted.

To add a redirect to a URL, you click on the Add/Edit Redirect link and you’ll get a popup like this.

You have the choice of a 301, 302 or 307 redirect – I would recommend you go with 301.

After you’ve set this up, the old page should redirect to the new.

The redirect feature means you don’t need a separate redirection plugin.

What features does Forty Four Pro have?

Forty Four Pro expands on the original, with additional customizations:

Choice of layout

There are 3 layouts available, with the main content centred, left or right aligned.

Logo upload

You can upload a logo to the page, and also reduce its size if you so wish.

Hide search form

I don’t know why you’d want to do this, but you can if you want.

Choose the font

There’s a large selection of Google Fonts to pick from, so you can choose one that matches your theme.

Set font size

There’s the option to set the size in pixels of the title and paragraph text here.

It might need a little experimentation to get this right.

Add and customize a menu

This option lets you select a menu to add to your page. It shows up at the top as a hamburger icon.

You need to select a menu created in Appearance > Menus first.

Colour choice is up to you (pick light colours for the links – the menu background is black!)

Extra log information

There’s some extra info in the logs, including the referring keyword used to access the URL, which might be useful.

Add custom scripts

Another feature I like; a dialog box to add your own scripts and styles, letting you tweak the look of your page further.

I was picky about the appearance, so I did some custom coding – see below.

Cost

The Pro plugin costs from $14-64 for a license with 1 year’s support and updates.

My custom 404 page

Here are the 404 page options I chose with Forty Four Pro. The background image of the lost girl came from Pixabay.

And here is the result:

I wanted to change a few things, like centre the logo, and make the “Go Home” link clearer, especially on mobile.

This is the custom code I added:

<style type="text/css">
body.error404 header {
    padding: 30px 120px 0px;
}

body.error404 header #logo {
     float: none;
    max-height: 140px;
    text-align: center;
}

body.error404 a, body.error404 p a, body.error404 p.gohome a {
    font-weight: bold;
}

body.error404 p.gohome {
    font-size: 0.9em;
    background: white;
    opacity: 0.6;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    width: 30%;
    margin-left: auto;
    margin-right: auto;
}

body.error404 p.gohome a {
    text-decoration: underline;
}

body.error404 p.gohome a:hover {
    border-bottom: none;
}
</style>

Here is my final page, with custom CSS.

Desktop view:

Mobile view:

Clearly, careful selection of background image makes a big difference when viewing on different devices.

(Remember to make your background a large size for larger screens. Smaller images will stretch.)

Likes, bugs and feature requests for Forty Four Pro

Likes

It’s easy to set up and use.

The plugin is really lightweight. It has just enough options built in, but not too many.

The logo upload is a big plus, branding your page clearly.

You can customise the CSS to get the right look for your site.

Bugs

The redirect options modal window doesn’t display correctly, with some content spilling out.

I had some issues with access logs not being created and redirects not taking effect – but perhaps that was down to me trying to access pages when logged in to WordPress.

Feature requests

My main wish is to be able to change the “404” text rather than just hide it.

I’d like another layout option with the logo in the centre as I did in my custom CSS.

Add system fonts like Arial and Times New Roman to the list of fonts – some themes still use them!!

A couple of small user experience issues:

I think the Publish button should change to Update after you’ve saved your 404 page for the first time.

A confirmation message “Page updated” or “Changes saved” would be helpful too when you save changes to your page, custom scripts or redirects. It’s not clear that the updates have been saved otherwise. 🙂

Verdict & Giveaway

I really like this plugin. It’s simple and user-friendly, and it makes a big improvement to standard 404 pages. The redirects are a bonus.

Disclaimer: I was sent a review copy of the Pro plugin, but did not get paid for this post.

I have 2 free personal licenses of Forty Four Pro to give away.

Just leave a comment on the post saying why you want to win. The first two to comment are the winners.

Category: WordPress