WordPress 404 page in Ultimatum Theme


If you don’t want to serve visitors to your site the standard WordPress 404 page, this is how to customize what they see using settings in Ultimatum Theme. With this framework, there is no ‘themed’ 404 page, instead you are expected to make your own, and you should. So, what is a 404 page? Well, a user requests a page from your website but your database cannot find it and so WordPress shows this error message page.

Error 404 - New LayoutError 404 - Add Row To LayoutError 404 - Drag Text Widget

So, over to Ultimatum Theme. You should already be familiar with layouts in your child theme, so let’s go straight to the child theme layouts panel in your backend admin. Select the child theme name => Templates => Layouts (of the template that you are using if you have more than one template) => Add New. I have called my new layout Error 404. It is a Full layout, and I then save. The next screenshot shows how to add a new row to the layout, in this case I chose a 100% row. The third screenshot above shows the resulting layout, with the header and footer already dragged and dropped into place, and the WordPress Text Widget about to be dropped into place.

Error 404 - Text Widget ContentsError 404 - Assign LayoutError 404 - Layout Done

The first screenshot above shows the content of text widget (see below for the sample code). Once this has been saved you can click the ‘Back to Layouts Screen’ button. The final thing we need to to is assign this layout to the WordPress core 404 page. So, click the ‘assign Layouts’ button and select the Error 404 layout and Post/Page Type set as Core => 404. The resulting layout panel will look like the third screenshot above; that’s the layout done.

<h2 class="entry-title">Oops! This is not the page you wanted</h2>
<div class="entry-content">
<div class="error-details"><p>Sorry, an error has occurred: requested page has not been found!</p></div>
<div class="error-actions">
<p><a class="btn btn-primary btn-lg btn-icon" href="http://www.mysitename.com/"><i class="fa fa-home fa-lg"></i>Take Me Home</a>
<a class="btn btn-default btn-lg btn-icon" href="http://www.mysitename.com/contact/"><i class="fa fa-envelope fa-lg"></i>Contact Support</a></p>

We also need a small bit of custom css (don’t we always!). Note that as my theme uses Bootstrap, I have taken advantage of some Bootstrap css selectors as well. This post shows you how to do this in Ultimatum, if you don’t already know how. This is the new css to copy and paste:

.ut-layout-404 .entry-title {padding: 40px 15px 0;text-align: center;}
.ut-layout-404 .entry-content {padding: 0 15px 40px;text-align: center;}
.ut-layout-404 .error-actions {margin-top:15px;margin-bottom:15px;}
.ut-layout-404 .error-actions .btn {margin-right:10px; display:inline-block;}
.ut-layout-404 .btn .fa {margin-right:10px;}

Error 404 - Finished Page

You may need to preview the page and use the code inspector to see what class name Ultimatum Theme gives the <body> tag for your layout (there are quite a few classes used, but a quick look will reveal it for you, in my example above the class name Ultimatum used was ut-layout-error-404). The finished page can be seen above.

I hope you managed to follow this short tutorial. Bye for now.

Categories: Ultimatum.