Custom 404 Error Pages with Orchard CMS

I received an email from an Orchard Web Developer asking how to create a custom 404 Error Page with Orchard CMS. This task is very similar to another developer request recently on how to display a Google SiteMap File ( site.xml file ) with Orchard CMS. As with the Google SiteMap File, this isn't really an Orchard CMS question, but more of an ASP.NET MVC and Web.Config challenge. Although there are many ways to solve this challenge, in this case I will be creating a simple custom 404 HTML Error Page in a website directory and setting customErrors within the web application's Web.config file to point to the custom 404 Error Page. This solution works not just in Orchard CMS, but can pretty much be applied to any ASP.NET MVC Web Application. When finished reading this Orchard Tutorial, check out my other Orchard Tutorials.

Custom 404 Error Page in Orchard CMS

My goal is to display a custom 404 Error Page in Orchard CMS when a visitor navigates to a resource not located on the Orchard Website. I'll just create a directory in the Orchard CMS Website, called Static, and put all the custom error pages in this directory. To keep it simple, I'll just stick with an un-managed HTML Error Page, called 404.html, as well as add a Web.config file in this directory that allows all the pages in this directory to be displayed.

Here is the Static Folder in our Orchard Website that holds the Custom 404 Error Page and Web.config:

Web.config in Orchard CMS to Display Static Files

Just like I discussed in the Orchard Tutorial on how to display a Google SiteMap File ( site.xml file ) with Orchard CMS, we need to place a Web.config file in the Static Directory that tells ASP.NET MVC / Orchard to display the static files in this directory, because by default Orchard will display a HTTP 404 Resource Not Found Error. Here is a snapshot of the Web.Config file:

This Web.config file isn't much different than the Web.config you will find in your Orchard Website Theme's Styles and Scripts Folder. The IIS6 httpHandlers and IIS7 handlers areas essentially tell ASP.NET to provide read access to any file in the directory. I don't need Script access, but if you do, you will want to modify the type of access you require accordingly. Again, check your Orchard Website Theme's Styles and Scripts Directories for an example.

CustomErrors in Orchard CMS Web.config

Orchard Web Developers will need to modify the customErrors section of the Orchard Web.config file to display a custom 404 Error Page. Again, this customErrrors section is not specific to Orchard CMS. It is an ASP.NET feature to allow you to set custom error pages for your ASP.NET Websites.

Http 404 Error Page in Orchard Website

Here is an example of a Custom HTTP 404 Error Page for Orchard Theme Machine following the above instructions. You can, of course, style the 404 Error Page based on the Orchard Theme used for your Orchard Website.

Conclusion

Serving static content, like custom 404 Error Pages, is pretty simple using Orchard CMS based on features in ASP.NET. Again, don't forget to read a similar Orchard Tutorial on how to display a Google SiteMap File ( site.xml file ) with Orchard CMS.

I am an Orchard Web Developer for Hire!