Using a Custom 404 Page with the Headway Wordpress Plugin

4 years, 1 month ago

Headway is a Wordpress plugin that lets you Drag & Drop yourself to a custom theme. At first, it isn't obvious how to setup a custom 404 page, but if you're an experienced Headway user, just set your layout's content block to a custom query. And as with all posts on PHP, this post exists to help the other poor souls that have to exist in PHP world, not to endorse the continued existence of PHP or Wordpress.

Create a 404 Page

From the Wordpress admin, go to Pages -> Add New. Name the page Custom 404 and add the content you desire. Here's Headway's default content:

<h1>Whoops! Page Not Found</h1>

Don't fret, you didn't do anything wrong. It appears that the page you are looking for does not exist or has been moved elsewhere.
If you keep ending up here, please head back to our <a href="http://www.yourdomain.com">homepage</a> or try the search form below.
<form method="get" id="searchform" action="http://www.yourdomain.com/"><label for="s" class="assistive-text">Search</label> <input type="text" class="field" name="s" id="s" value="Type to search, then press enter" onclick="if(this.value=='Type to search, then press enter')this.value='';" onblur="if(this.value=='')this.value='Type to search, then press enter';" /><input type="submit" class="submit" name="submit" id="searchsubmit" value="Search" /></form>

Make sure to hide any social bars, remove site indexing, etc.

Set the Contents of Headway's 404 Page

Now you'll need to jump to Headway's design editor. Using the top admin bar, go to Headway -> Visual Editor -> Design. You can also do this from the Grid editor.

Click the Currently Editing dropdown menu and select Edit for the 404 Layout:

You should see the default 404 content in the center of the page. Right click the content and select Open Block Options:

This should pop open a menu at the bottom of your browser. Choose the Mode sub-menu and change the Query Mode to Custom Query:

Switch over to the Query Filters sub-menu and change the Fetch Page Content dropdown menu to the Custom 404 page:

Finally, make sure the full page is shown by switching to the Display sub-menu and ensuring Entry Content Display is set to Show Full Entries and that the Show Entry option is checked:

Now just mash Save in the upper-right and that's it! Check out a broken link and you should see your custom 404 page. Except if you copied it from above, it'll look just like your normal 404 page. So make some customizations and check again.

Hangups

This didn't work perfectly for me initially, it actually turned every page in the site into the Custom 404 page...

This was happening because there was no Headway template for the 404 page, so the changes were being made on the content block for the site's main template instead of the 404 template.

To solve this, open up the 404 template in Headway's Grid mode instead of Design mode and create a 404 layout template by cloning your main template. You'll need to take the new layout's content block out of mirror mode before you can put it in custom query mode.

• Tags:
• PHP
• Wordpress
• Headway

• ← Build a Bootstrap Theme from a Vim Color Scheme
• Declarative Specification of a User Profile with the Nix Package Manager →