Genesis add widget area on home page or posts

In this post I will share the code snippet that registers a widget. I will also demo 3 use cases with examples that are very common. In the WordPress back-end code world widget areas are referred to as sidebar or dynamic sidebar. Just know that they are one and the same.

The examples I will demo are:

• One how to place a widget on all the pages in the header.
• Two how to place a widget area on general post and pages.
• Three on the home page and how to place it on the home page while removing the original content from the home page.

Genesis add widget area on home page or posts

Step 0. Register Widget Area

No matter where you will eventually display the widget area first you need to create it so the following code is the same in all cases. The first step is to register it in your themes functions.phpfile. I will name my region top-banner.

Once we have the region registered we need to print it out somewhere, here is where I give you a couple of options.

Option 1. Print it out on all pages.

Print it out on every page above the content. In order for that to happen just continue in the functions.php file with hooking into genesis_before_contentand rendering the widget area with genesis_widget_area function.

Option 1, here is the code for it:

<?php
// in your theme's functions.php
/**
 * STEP 0. Common for all options
 * Register Top - Banner Widget Area
 */
genesis_register_sidebar( array(
	'id'          => 'top-banner',
  	'name'        => __( 'Top - Banner', 'your_textdomain' ),
	'description' => __( 'Banner area at the top of the page.', 'your_textdomain' ),
) );




/**
 * OPTION 1: Print it out on all pages
 * put your own initials instead of PREFIX
 */

add_action('genesis_before_content','PREFIX_add_top_header_region');
function PREFIX_add_top_header_region()  {
	genesis_widget_area( 'top-banner', array(
		'before' => '<div class="top-banner">',
		'after'  => '</div>',
	) );
}

Option 2. Print it out on Posts and Pages, excluding home page, archive pages etc.

Similar to the previous example still in the functions.php file put the following lines of code. Note the only difference is that we have a a conditional before the region render function.

Bonus: If you want to get tricky you can change this code with different if statements, to print it on different sections of your website. Take a look at the Conditional Tags documentation for WordPress.

Option 2, here is the code for it:

<?php 
// in functions.php

/**
 * OPTION 2: Print it out on all pages
 * put your own initials instead of PREFIX
 */

add_action('genesis_before_content','PREFIX_add_top_header_region');
function PREFIX_add_top_header_region()  {
        // If Post or Page
        if ( is_single() || is_page() ){
            genesis_widget_area( 'top-banner', array(
                'before' => '<div class="top-banner">',
                'after'  => '</div>',
            ) );
        }
}

Option 3. Home page only and hide other content on the home page.

We want to do more stuff here so instead of jamming everything into the functions.php file we can create a page template for the home page, naming it the right way it automatically will get loaded by WordPress.

So just create front-page.phpfile and paste the code in there.

This is what we’ll do.

• We will hook into genesis_meta to remove the original Home Page content by removing the genesis_do_loop from the genesis_loop.
• Instead we will hook our widget area in here
• Optional: we can notify Genesis to use the full with version of the page
• Optional: we can add an extra CSS body class so it’s easier to theme.

Option 3, here is the code for it:

<?php
/**
 * This is your front-page.php
 * This file adds the front page.
 *
 * @package PREFIX
 * @author  YOU
 * @license GPL-2.0+
 * @link    https://www.lehelmatyus.com/genesis-add-widget-area-on-home-page-or-posts
 */

 
add_action( 'genesis_meta', 'PREFIX_home_genesis_meta' );
/**
 * Add widget support for the front page. If no widgets active, display the default loop.
 *
 * @since 1.0.0
 */
function PREFIX_home_genesis_meta() {

	if ( is_active_sidebar( 'top-banner' ) ) {

        // OPTIONAL: Remove the Original front page content
        remove_action( 'genesis_loop', 'genesis_do_loop' );
        
        // Add your front page widget
        add_action( 'genesis_loop', 'PREFIX_home_sections' );
        
        // Bonus (optional): Notify Genesis you want to use the full width content  template
        add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
        
        // Bonus (optional): While you are here also add a CSS class to the home page
		add_filter( 'body_class', 'PREFIX_add_home_body_class' );
	

	}

}

// Widget areas to output on the front page.
function PREFIX_home_sections() {

	genesis_widget_area( 'top-banner', array(
		'before' => '<div class="top-banner widget-area">',
		'after'  => '</div>',
	) );

}

// Add body class to home page While you are here so you can theme it easily.
function PREFIX_add_home_body_class( $classes ) {
	$classes[] = 'PREFIX-home';
	return $classes;
}

// continue the Loop
// Run the Genesis loop.
genesis();

Finally: Drop some widgets into your fancy widget area in the admin interface under Appearance > Widgets and see the magic happen.

Cheers!