Sleep Anarchyhttp://sleepanarchy.com/%2F2014-09-24T17:10:15+00:00Using a Custom 404 Page with the Headway Wordpress Plugin2014-09-24T17:10:15+00:00Pavan/author/pavan/http://sleepanarchy.com/custom-404-page-headway-wordpress/<!---
Using a Custom 404 Page with the Headway Wordpress Plugin
http://sleepanarchy.com
-->
<p><a href="http://headwaythemes.com/">Headway</a> is a <a href="http://wordpress.org/">Wordpress</a> plugin that lets you Drag &amp; 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.</p>
<h2>Create a 404 Page</h2>
<p>From the Wordpress admin, go to <code>Pages -&gt; Add New</code>. Name the page <code>Custom
404</code> and add the content you desire. Here's Headway's default content:</p>
<div class="codehilite"><pre><span></span><span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>Whoops! Page Not Found<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
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 <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://www.yourdomain.com"</span><span class="p">&gt;</span>homepage<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> or try the search form below.
<span class="p">&lt;</span><span class="nt">form</span> <span class="na">method</span><span class="o">=</span><span class="s">"get"</span> <span class="na">id</span><span class="o">=</span><span class="s">"searchform"</span> <span class="na">action</span><span class="o">=</span><span class="s">"http://www.yourdomain.com/"</span><span class="p">&gt;&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"s"</span> <span class="na">class</span><span class="o">=</span><span class="s">"assistive-text"</span><span class="p">&gt;</span>Search<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">class</span><span class="o">=</span><span class="s">"field"</span> <span class="na">name</span><span class="o">=</span><span class="s">"s"</span> <span class="na">id</span><span class="o">=</span><span class="s">"s"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Type to search, then press enter"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"if(this.value=='Type to search, then press enter')this.value='';"</span> <span class="na">onblur</span><span class="o">=</span><span class="s">"if(this.value=='')this.value='Type to search, then press enter';"</span> <span class="p">/&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">class</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">name</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">id</span><span class="o">=</span><span class="s">"searchsubmit"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Search"</span> <span class="p">/&gt;&lt;/</span><span class="nt">form</span><span class="p">&gt;</span>
</pre></div>
<p>Make sure to hide any social bars, remove site indexing, etc.</p>
<h2>Set the Contents of Headway's 404 Page</h2>
<p>Now you'll need to jump to Headway's design editor. Using the top admin bar, go
to <code>Headway -&gt; Visual Editor -&gt; Design</code>. You can also do this from the <code>Grid</code>
editor.</p>
<p>Click the <code>Currently Editing</code> dropdown menu and select <code>Edit</code> for the <code>404
Layout</code>:</p>
<p><img alt="Edit the 404 Layout in Headway's Design Editor" src="/static/media/uploads/blog/headway_404/edit_404_layout.png"></p>
<p>You should see the default 404 content in the center of the page.
Right click the content and select <code>Open Block Options</code>:</p>
<p><img alt="Right click the content and select Open Block Options" src="/static/media/uploads/blog/headway_404/open_block_options.png"></p>
<p>This should pop open a menu at the bottom of your browser. Choose the <code>Mode</code>
sub-menu and change the <code>Query Mode</code> to <code>Custom Query</code>:</p>
<p><img alt="Change Query Mode to Custom Query" src="/static/media/uploads/blog/headway_404/custom_query_mode.png"></p>
<p>Switch over to the <code>Query Filters</code> sub-menu and change the <code>Fetch Page Content</code>
dropdown menu to the <code>Custom 404</code> page:</p>
<p><img alt="Change Fetch Page Content to our Custom 404 Page" src="/static/media/uploads/blog/headway_404/fetch_page_content.png"></p>
<p>Finally, make sure the full page is shown by switching to the <code>Display</code>
sub-menu and ensuring <code>Entry Content Display</code> is set to <code>Show Full Entries</code> and
that the <code>Show Entry</code> option is checked:</p>
<p><img alt="Check Show Entry and change Entry Content Display to Show Full Entries" src="/static/media/uploads/blog/headway_404/set_entry_display.png"></p>
<p>Now just mash <code>Save</code> 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.</p>
<h3>Hangups</h3>
<p>This didn't work perfectly for me initially, it actually turned every page in
the site into the Custom 404 page...</p>
<p>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.</p>
<p>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.</p>