• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / WordPress / A Smarter Custom 404 Page With Redirects – Forty Four Pro

A Smarter Custom 404 Page With Redirects – Forty Four Pro

Posted: June 17, 2016 Updated: January 4, 2018 by Claire Brotherton
9 Comments

Forty Four Pro with custom CSS - desktop view

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.

BBC 404 page

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:

Divi 404 page

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

Twenty Fourteen 404 page

Responsive theme is better still, but still not pretty.

Responsive 404 page

Meet Forty Four plugin

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

Forty Four default settings

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.

Forty Four blue background

The free plugin also logs the 404 errors generated.

Forty Four Logs page

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.

Forty Four redirect modal

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!)

Forty Four Pro menu
The menu opened

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.

Forty Four Pro options page

And here is the result:

Forty Four Pro custom layout

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:

Forty Four Pro with custom CSS - desktop view

Mobile view:

Forty Four Pro with custom CSS - 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.

Related

Category: WordPress

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Jitendra Mahato says

    September 14, 2017 at 10:51 am

    hi… i want to know that how to redirect the 404 page to a custom page without plugin.I want to do that in my blog. Thank you. Hoping your answer. Can you provide me the code.

    Reply
    • Claire Brotherton says

      September 18, 2017 at 9:38 pm

      Hi Jitendra

      I’m not sure how you would redirect a 404 page since the URL could be different each time.

      Your best bet would be to make a custom 404 page. Here’s one tutorial on how to do that: How to Create a Custom WordPress 404 Error Page.

      Hope that helps,

      Claire

      Reply
  2. Nirajan says

    February 21, 2018 at 5:51 am

    hi Claire … i want to know that how to redirect the 404 page to a custom page without plugin.I want to do that in my blog. Thank you. Hoping your answer. Can you provide me the code.

    Reply
    • Claire Brotherton says

      February 25, 2018 at 4:07 pm

      Hi Nirajan

      You could try the code mentioned here: Simply redirect a 404 to a custom page.

      Reply
      • Nirajan says

        March 7, 2018 at 9:58 am

        Thanks Claire

        Reply
  3. Nepal says

    September 17, 2018 at 2:43 pm

    What is the best WordPress Plugin for redirect 404 pages ?

    Reply
    • Claire Brotherton says

      September 18, 2018 at 7:58 pm

      Hi,

      It looks like the free Forty Four plugin https://wordpress.org/plugins/forty-four/ has not been updated in a while.

      You could try one of these:

      • 404 to 301: https://wordpress.org/plugins/404-to-301/
      • 404page – your smart custom 404 error page: https://wordpress.org/plugins/404page/
      Reply
      • Claire Brotherton says

        September 18, 2018 at 8:00 pm

        Actually, it looks as if 404page doesn’t do redirects, so I would either use 404 to 301, or the Redirection plugin: https://wordpress.org/plugins/redirection/

        Reply
  4. Nelomasi says

    September 10, 2019 at 11:37 am

    Great plugins to redirect 404 pages. Thank you for these plugins.

    Reply

Leave a Reply Cancel reply

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

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map