How To Create A 404 Page In Umbraco 7

An important task on any website build is to create a good looking 404 page and configure it.  Luckily, Umbraco does this out of the box very easily with some slight configuration.

First, if you try running your Umbraco website and typing any old rubbish as the Url, you should see this error page.

umbraco_404

Obviously, that is pretty ugly and you wouldn’t want to use that in production.  First, you will want to create the page in Umbraco so the content can be updated, and secondly, you don’t want your website looking like dog shit,

In this guide, I’m going to use a generic content page as my 404 page.  In the real world you may use a standard content page for your 404 design, or you could create your own 404 document types and templates.

umbraco_404_creating

First, open your Umbraco back-end, go to the Content section, create a new page and call it 404, add any content you want and hit the ‘Save and Publish’ button.  Next, go to the ‘Properties’ tab for the page and go to the PageId section.

umbraco_404_getting_page_id

Now in Visual Studio, open up the ‘Congif’ folder, ‘umbracoSettings.config’ file.  The first thing you should see is a section called 404.

umbraco_404_configuring_settings_config

In the 404 config element, add the page id we created from earlier, in my case this would look like this:

<error404>1070</error404>

Now that I’m only using this as a single language instance, if you look at the commented out examples in the config you should see an example with a culture tag, like this ‘culture=”en-US”.  To set a default in a multi-lingual website, you would add a culture=”default” in your 404 element.  For any other language simply add in the culture you want.

Now we have Umbraco set-up when you try and load a made up page you should see your error page displayed:

umbraco_404_finished

That’s all there is to it.

My Umbraco 404 Page Is Still Not Displaying

If you are still having issues, fear not as you may have one bit of configuration left. With IIS 7.5+ you may need to add an additional line into the sites web.config before it will work.  Simply, add in your section, like so:

<system.webServer>
<httpErrors existingResponse="PassThrough"/>
</system.webServer>

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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