Customise the error 404 page?

Hi,

I have just started using beans and it is great but I cant see to work out how to modify the 404 error page using the functions file.

Can someone shed some light on what I should do?

Thanks Nick

Hey Nick,

You could either add a 404.php to your child-theme root (make sure it has the beans_load_document(); at the bottom) or use the WP conditional, if( is_404() ) in your main functions.php:

// Setup global
add_action( 'beans_before_load_document', 'beans_child_global_setup' );

function beans_child_global_setup() {

  if ( is_404() ) {
    beans_remove_markup( 'beans_main_grid' );
    beans_remove_markup( 'beans_primary' );
  }

}

or add the function below to your 404.php:

// Setup 404
add_action( 'beans_before_load_document', 'beans_child_404_setup' );

function beans_child_404_setup() {

    beans_remove_markup( 'beans_main_grid' );
    beans_remove_markup( 'beans_primary' );

}

Hope that helps 🙂

Thanks for the quick reply and code 🙂

You're welcome 🙂 Hope it helps!

Hey guys,

Just a quick added note, if you choose to go for using a 404.php file in your child theme, you don't need to wrap your markup modifications in a beans_before_load_document callback function, your entire file would look as follow:

<?php

// Remove markups.
beans_remove_markup( 'beans_main_grid' );
beans_remove_markup( 'beans_primary' );

// Load document which is always needed at the bottom of template files.
beans_load_document();

Happy coding,

Hi guys,

This is my solution to costumize the 404 error page in Beans.

I was inspired by the 404 page customisation on Banks, a child theme of Beans: http://demo.themebutler.com/banks/

I thought it was good to share, This is my code:

// Modify the 404 page markup
beans_add_smart_action( 'beans_before_load_document', 'fabiographic_404_setup_document' );
function fabiographic_404_setup_document() {
    // Post
    beans_remove_attribute( 'beans_no_post_article_content', 'class', 'uk-alert uk-alert-warning' );
    beans_modify_markup( 'beans_no_post_article_content', 'h2' );
    beans_remove_markup( 'beans_search_form' );
    beans_remove_markup( 'beans_search_form_input' );
    beans_remove_markup( 'beans_search_form_input_icon' );
}
// Update the 404 page title
beans_add_smart_action( 'beans_no_post_article_title_text_output', 'fabiographic_404_post_title' );
function fabiographic_404_post_title() {
 return beans_output( 'fabiographic_no_post_article_title_text', __( '404', 'fabiographic' ) );

}
// Update the 404 page content
beans_add_smart_action( 'beans_no_post_article_content_text_output', 'fabiographic_404_post_content' );
function fabiographic_404_post_content() {
  return beans_output( 'fabiographic_no_post_article_content_text', __( 'Page not found <br/><br/> <a href="http://www.fabiographic.com">CLICK HERE</a>', 'fabiographic' ) );
}
// Load Beans document.
beans_load_document();
?>

In this case, I wanted to remove the search form, and redirect the user at my homepage.

I hope it will be useful for someone.

Fabio

Thanks for sharing Fabio 😉