[Resolved] custom 404 page

[Paul]

Hi, Is it possible to have a custom 404 page with the template I’m using?

[David]

Hi there,

simplest method is to use this plugin:

https://en-gb.wordpress.org/plugins/404page/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

OK – Good to know, I’m on a plugin diet.

[David]

Options:

1. Use a child theme and make a copy of the 404.php template and recode….
2. Create a Header Element for your 404 and we can use some CSS to ‘hide’ the default content
3. Or the plugin.

The plugin does do all the grunt work that you need to cover if you go with the (1) child theme route

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

Let’s give option 2 a try.

[David]

So create a new Element, add whatever content backgrounds etc.

https://docs.generatepress.com/article/header-element-overview/

Then add this CSS to hide the standard 404 content:

.error404 #page {
    display: none;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

This seems like a good fit – is it possible for me to add a search box in the custom header? Pretty much looking to have the template layout withing the new custom header. Thanks.

[Leo]

You can create a hook element and use this to add a search form;
<?php get_search_form(); ?>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

I was able to try that out, ideally I’d like the search box to be under the text that’s there https://www.trademarkinteriors.com/404 how would I accomplish that?

[David]

Tom provides a shortcode function here:

https://generatepress.com/forums/topic/search-field-in-404-page/#post-787184

Once that snippet is added to your site
https://docs.generatepress.com/article/adding-php/

You can add the [search_form] shortcode to the header element

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

BEAUTIFUL! Thanks!!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ravi Dixit]

Hey, David!

I’ve followed your instructions and created a block element and select the location as a 404 templates to have a custom 404-page body. I also tried this CSS you suggested:

.error404 #page {
    display: none;
}

But it is hiding the entire page content including the block I created.

How can I remove these items from the page: https://prnt.sc/260b1qe

[Ying]

I’ve followed your instructions and created a block element

David was suggesting using a header element, not a block element. If you are using a block element, make sure you choose page hero as the element type.

[Ravi Dixit]

Okay, I selected the page hero as the element type then how to hide those items from page?

[Author]

Posts