How to Customize the 404 Page with GeneratePress

I am learning so much about SEO these days and I started wondering how a custom 404 page could help improve the user experience.

I started searching articles about how to customize the 404 page in GeneratePress and I discovered that you can do that easily with elements.

To use elements, you need to have GeneratePress Premium on your WordPress site.

In addition to elements, you can use add code snippets to remove the default search form and other data included by default in it.

Let’s explore all that you need to fully customize your 404 page with the help of GeneratePress Elements and the code snippets plugin

---

Elements in GeneratePress to have a Custom 404 Page

These are the steps to add content to your 404 page

1. Go to Appearance then to Elements
2. Add a new Element
3. Choose “block” from the Element Type Options
4. Write the title that you want
5. Build your page using GenerateBlocks or any other plugins
6. When you finish, go to the display rules section
7. For the location, choose “404 Template”
8. In the block element setting choose “Hook” for the element type
9. For the hook name Choose “after_main_content”

You can play with this section and build a nice 404 page doing what you do with the rest of the pages of your site

Remove 404 Page Title in GeneratePress

If you don’t have any plans for the 404-page title, you can use this code snippet and get rid of it

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

Code Snippet to Remove Default Text from 404 Page

This is a code snippet to remove the text before the search form

//Remove 404 Custom Text

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

Code Snippet to Remove Search Form from 404 Page

This is a code snippet to remove the search form from the body of the page

//Remove 404 Search Form

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 '';
    }
}

No Code Snippets to Customize the 404 Page on GeneratePress

If you don’t find any uses for the content section now that you have removed the default text and search form, you can get rid of everything and use your custom 404 template as a content template.

This is what you have to choose as “element type”

Remember to choose “404 template” for location on display rules.

You also have to apply full width to the template so your 404 doesn’t look like crap on big screens, you can do that by using the “Layout Element”

1. Add New Element
2. Choose Layout
3. Create
4. Go to the Content Tab
5. In Content Area, tick the ” Full Width (no padding)” option
6. Now go to the “Display Rules” tab and choose “404 Template” for the location
7. Done

Source: GeneratePress Forum

I tested all code snippets using the Code Snippets Plugin and it works like a charm

By the way, use the Code Snippets Plugin, don’t add code to the functions.php unless you have activated the child theme because those codes will be gone whenever you update your theme

Give credit to Marquis M who made this contribution to the GeneratePress Forum

Wanna Read More?

These are some posts that you might find helpful if you have a WordPress site

1. Protect your WordPress Site with Cloudflare Firewall Rules
2. SG Security: SiteGround Security Plugin
3. WordPress Security without Plugins
4. How to Optimize GeneratePress for Core Web Vitals [100% Solved]
5. How to Use Flying Scripts to Speed up Your WordPress Site
6. How to Improve the Page Speed of Your Adsense Sites
7. How to Use Cloudflare Full Page Caching With WordPress