Register a Widget area for Front page or Home in Genesis

Widgets. Widgets in WordPress is really an important function to add contents and manage them easily.

The Good thing about Widgets is, We can control the widgets to work/show for specific post and pages only using conditional tags.

The conditional Widget can be used to showcase some products, Welcome Section, Slider, Image or Background section or anything you want to add.

But, for new users, it is kinda confusing and time taking work when you do not know where to start from.

Genesis makes easy to register widgets areas using Genesis hooks. In this post, we are registering widgets and displaying it on front page and post page using Genesis hooks and conditional tags in WordPress.

If you are not familiar with coding or functions.php file. Do check out Blox. Blox is an excellent plugin to register and show widgets and contents without messing with codes. 🙂

Widgets in Genesis

There are two steps involved in a widget to work in Genesis child theme.

1. Register a Widget
2. Hook and display the Widget

The widgets in Genesis registered using genesis_register_sidebar and display using genesis_widget_area with the help of WordPress hooks and Genesis Hooks.

I have written a short guide about registering a widget in Genesis and display it.

Please do remember that I am including both steps in single snippet so you can easily understand which snippet will work for you. 🙂

The snippet will go on functions.php of the child theme. Here, the default hook is “genesis_before_loop” do change it as per your need.

Show Widget on Home Page.

The Home is generally the post page. It depends on your reading setting. This snippet will show widget on the post page.

//* 1. Register widget area and display the widget "WHen Your homepage displays Your latest posts"
genesis_register_sidebar( array(
    'id'          => 'home-post',
    'name'        => __( ' FRONT Home POsT', '$text_domain' ),
    'description' => __( 'FRONT Home POst Widget Only', '$text_domain' ),
) );

//* Hook Widget before loop Only and Display it
add_action( 'genesis_before_loop', 'front_post_widget' );
function front_post_widget() {
    if ( is_home() && !is_paged() && is_active_sidebar('home-post') ) {
      genesis_widget_area( 'home-post', array(
        'before' => '<div class="home-post" class="widget-area">',
        'after'	 => '</div>',
      ) );
    }
}

This will be shown if your homepage displays your latest posts or you have setup static page like example.com/blog/ for post page but remember that if you are using a custom home page but no post page then this will not work. You should try the 2nd one.

I have included additional tag ‘!is_paged()’ to prevent widget to load on paging.

1. Show Widget on Front Page

The Widget will be shown on the front page (example.com) no matter if you are using custom pages or your latest posts.

//* 1. Widget areas for FRONT Page when  Homepage displays Your latest posts or static page set to "Homepage:Home"
  genesis_register_sidebar( array(
    'id'          => 'front-page',
    'name'        => __( 'Front Page only', '$text_domain' ),
    'description' => __( 'Displays on Front Page Only', '$text_domain' ),
  ) );

  //* Hook Widget Before Loop on Front Page Only
add_action( 'genesis_before_content', 'front_page_widget' );
function front_page_widget() {
    if ( is_front_page() ) {
    
      genesis_widget_area( 'front-page', array(
        'before' => '<div class="front-page" class="widget-area">',
        'after'	 => '</div>',
      ) );
    }
}

2. Show Widget on Post Page

The Widget will be shown on the custom post page (example.com/blog)

//* 2. Widget areas for Post Page when "Posts page: Blog"
genesis_register_sidebar( array(
    'id'          => 'post-page',
    'name'        => __( 'Post Page only', '$text_domain' ),
    'description' => __( 'Displays on Post Page Only', '$text_domain' ),
) );

//* Hook Widget Before Loop on Posts Page Only
add_action( 'genesis_before_content', 'post_page_widget' );
function post_page_widget() {
    if ( is_home() && !is_paged() ) {//* Don't show on /page/2*
    
      genesis_widget_area( 'post-page', array(
        'before' => '<div class="post-page" class="widget-area">',
        'after'	 => '</div>',
      ) );
    }
}

You can use the default one too, snippet at the beginning. That will work for Post page.

3. Show Widget on Both Front Page and Post Page

The Widget will be shown on both, the front page (example.com) and custom post page (example.com/blog)

//* 3. Widget areas for Both Front and Post page
genesis_register_sidebar( array(
    'id'          => 'front-and-post',
    'name'        => __( 'Both Home+PostPages', '$text_domain' ),
    'description' => __( 'Displays on Both Page Home and Post Blog', '$text_domain' ),
) );

//* Hook Widget Before Loop on Both Front and Post page
add_action( 'genesis_before_content', 'front_and_post_page_widget' );
function front_and_post_page_widget() {
    if (is_front_page() || is_home() && !is_paged() ) {//not will show if user is on pagination /page/2
    
      genesis_widget_area( 'front-and-post', array(
        'before' => '<div class="front-and-post" class="widget-area">',
        'after'	 => '</div>',
      ) );
    }
}

Do try to explore Genesis hooks and Genesis Visual Hook. and if you are still confused between frontpage, homepage, and postpage, read the post Conditional Tags in WordPress and Genesis Framework and child theme Setup where i have talked about Reading setting in WordPress.

Let me know if you have any issue showing your widgets.