Concrete 5: wysiwyg editable, visitor-friendly, custom 404 page.

I was just in the situation where I had moved a website over to a completely new design and had moved the website from an old Joomla installation into a new Concrete5 one.

This was a product / brochure website rather than an e-commerce website and all of the product listings were changing as well.  Every product on the site would be completely new.

Normally when moving a website we’d look at which pages were the same and redirect them through to the new ones.  In this case they didn’t match.  This meant that until the new pages are indexed visitors will be taken to a 404 page when they click on outdated links from the search engines.

This is hardly very visitor-friendly and considered a big no-no from a usability point of view.

Not only this but the basic Concrete5 404 page is (I’m afraid to say) a little nasty and not conducive to keeping prospective customers on your website.

It is easy enough to change though – and this is how we do it.

Step 1

Copy the file root/concrete/single_pages/page_not_found.php

to your website’s root single_pages directory i.e
root/single_pages/

(in doing this we are creating our own version of the file that overrides the default Concrete5 version – thus we do not alter any files from the base installation).

Step 2

as this is a system page – next we need to let Concrete5 know to use the new file:

Edit /root/config/site_theme_paths.php

add the line:

$v->setThemeByPath(‘page_not_found’, “yourtheme”);

replace yourtheme with the handle of your theme as it is shown in the Concrete5 admin area.  In this case my theme is called wfh so I copied in

$v->setThemeByPath(‘page_not_found’, “wfh”);

The website should now be using your copied page.  Now, we just need to make it look better.

Step 3

In this case I wanted the 404 page to be as user-friendly as possible.  I wanted to have the site navigation on it so that visitors can easily get back into the site taxonomy and I wanted it to look like part of the site.

In my theme directory I copied my default.php and renamed the copy to page_not_found.php

copy  /root/themes/default.php -> /root/themes/page_not_found.php

This is now our third file with this name and this will be used for the presentation and to hook it into our website structure.

Step 4

Remove the main content area in your new page_not_found.php (/root/themes/page_not_found.php)

in my case the corresponding code is:

      <?php
                        $a = new Area(‘content’);
                        $a->display($c);
                     ?>

and replace it with:

   <?php
                print $innerContent;
                ?>
           <?php  if (isset($error) && $error != ”) { ?>
   <?php 
   if ($error instanceof Exception) {
      $_error[] = $error->getMessage();
   } else if ($error instanceof ValidationErrorHelper) {
      $_error = $error->getList();
   } else if (is_array($error)) {
      $_error = $error;
   } else if (is_string($error)) {
      $_error[] = $error;
   }
 
      ?>
      <ul>
      <?php  foreach($_error as $e) { ?><li><?php echo $e?></li><?php  } ?>
      </ul>
   <?php 
} ?> 

This code autoimatically calls the file /root/single_pages/page_not_found.php for the page not found message. 

Step 5

The beauty of this method is that we can now log into the admin side of our C5 website and change the page.

Go to Single Pages and edit our page_not_found single page as though it were a normal page in our website using the WYSIWYG gui to add a nicer message and maybe even add an autonav just like the main part of the site so the visitor has somewhere to go within the site.

We can edit this whenever we like or if we do not edit the site we can pass it over to our web design client who will have wysiwyg control over their 404 page and put any message they like on there.

Step 6

Test that all is ok by going to a page on our website that does not exist to see that we get our new page not found page.

Check the headers of this page to make sure it is giving a 404 message.  Googling ‘check server headers’ will bring up a number of tools you can use.

Just key in the url of your non-existent page and make sure the result shows:

HTTP/1.0 404 Not Found….

In the server response.  And that’s it.  A much more user-friendly 404 error page that will keep customers and that the website editor has control over.