How to build a custom 404 page with GeneratePress

Custom 404 Page

If you use GeneratePress  3 (plus pro) with wordpress and want to create a custom 404 page there are a couple of things you need to do to get this working for you.

I use GenerateBlocks (plus pro) from the guys that make GeneratePress as well, and love it – simple and effective.

GeneratePress has a default 404 page that contains the following:

• Title
• Text
• Search

You used to need to use the GeneratePress custom PHP filters to either change the messaging or turn these off and create your own custom page but this is no longer necessary with the new action: generate_do_template_part.

I’ll give both versions just in case anyone need them.

New Way

In the wordpress admin section navigate to menu items “Appearance” > “Elements” .

Select “Add New Element” – then choose element type: Block and create.

Once the page opens select the the location of ‘404 template’ under ‘Display Rules’.

On the right you will now need to hook this in to the template and to do this we will need to use the new custom action.

Select “Custom Hook” and then enter the custom hook name: generate_do_template_part.

This will replace the standard template loop item with whatever you have in designed in the main body of your new Block Element.

The old way

First up you’ll need to add some custom code to either your functions.php or use a plugin to house all your little code changes to the site.

I use the Toolset suite of plugins (Paid) that has this functionality, but I also use the plugin “Code Snippets” which is really good.

Code Snippets

If you are going to use the functions.php file I would suggest creating a child theme as its will be easier moving forward with any other customisations you may have.

Title filter

add_filter( 'generate_404_title','generate_custom_404_title' );
function generate_custom_404_title()
{
return '';
}


Body text filter

add_filter( 'generate_404_text','generate_custom_404_text' );
function generate_custom_404_text()
{
return '';
}


Remove the search

add_filter( 'get_search_form','my_remove_search_form' );
function my_remove_search_form()
{
$template = $GLOBALS['template'];
$template_file = substr($template, strrpos($template, '/') + 1);
if ($template_file === '404.php') {
return '';
}
}


Add the above code to either your custom code tool or your fucntions.php file, save and test a 404 page… you should see a blank canvas apart from maybe the header and footer if you have these setup.

After you have added the above code you can follow the instructions from the new method, however this time you will use another hook action.

before_main_content is what I used to use for this.

Then design the page as you see fit and save.

Conclusion

That’s about it, all very easy and you can create custom 404 pages in GeneratePress with ease now and if you think about how you can now use the new generate_do_template_part to alter other templates loop sections if you see the need.