Adding home page widgets to inner pages on Genesis

Sometimes there are themes we love to use as baselines for development, as they have awesome features and built-in widgets.

And sometimes we want to reuse the widgets appearing on the home page on those inner pages. How do we do that?

One of our clients' base-theme is the Smart Passive Income Pro Theme by Genesis, which doesn't support a banner and widget on the inner pages as it does on the home page, but that's what they wanted: a banner + widget, same as the home page, on all the inner pages.

Adding a banner on its own is simple, but what if you want to replicate the banner + widget combo that the home page uses? What if you're dealing with a front-page.phpand functions.php page?

Let's start by opening our functions.php file, and in this case, the front-page.php file, as we will be changing both.

The original front-page.php registers a custom set of widgets, exclusively to be executed on the home page, as the whole page is widgetized.

The register code is standard, and is initially declared inline like this on the front-page.php

genesis_register_sidebar( array(
	'id'          => 'front-page-1',
	'name'        => __( 'Front Page 1', 'smart-passive-income-pro' ),
	'description' => __( 'The first section on the front page.', 'smart-passive-income-pro' ),
));
genesis_register_sidebar( array(
	'id'          => 'front-page-2',
	'name'        => __( 'Main Banner', 'smart-passive-income-pro' ),
	'description' => __( 'Main Baner widget. The second section on the front page.', 'smart-passive-income-pro' ),
));
genesis_register_sidebar( array(
	'id'          => 'front-page-main-body',
	'name'        => __( 'Front Page Main Body', 'smart-passive-income-pro' ),
	'description' => __( 'The main segment of the home page.', 'smart-passive-income-pro' ),
));
genesis_register_sidebar( array(
	'id'          => 'front-page-main-sidebar',
	'name'        => __( 'Front Page Main Sidebar', 'smart-passive-income-pro' ),
	'description' => __( 'The sidebar of the homepage.', 'smart-passive-income-pro' ),
));
genesis_register_sidebar( array(
	'id'          => 'front-page-3-a',
	'name'        => __( 'Front Page 3 - Top', 'smart-passive-income-pro' ),
	'description' => __( 'The top half of the third section on the front page.', 'smart-passive-income-pro' ),
));
genesis_register_sidebar( array(
	'id'          => 'front-page-3-b',
	'name'        => __( 'Front Page 3 - Bottom', 'smart-passive-income-pro' ),
	'description' => __( 'The bottom half of the third section on the front page.', 'smart-passive-income-pro' ),
));
genesis_register_sidebar( array(
	'id'          => 'front-page-4',
	'name'        => __( 'Front Page 4', 'smart-passive-income-pro' ),
	'description' => __( 'The fourth section on the front page.', 'smart-passive-income-pro' ),
));
genesis_register_sidebar( array(
	'id'          => 'front-page-5',
	'name'        => __( 'Front Page 5', 'smart-passive-income-pro' ),
	'description' => __( 'Campaigns links.', 'smart-passive-income-pro' ),
));

And here is the code that displays all the home page widgets on front-page.php

It declares the widgets inside a custom loop.

Meaning that once the function is called, all the standard genesis page elements will be scrapped in lieu of the widget content. (The original loop is disabled in a call above this declaration.)

function spi_home_widget_loop() {
 
	echo '<h2 class="screen-reader-text">' . __( 'Main Content', 'smart-passive-income-pro' ) . '</h2>';
 
	genesis_widget_area( 'front-page-1', array(
		'before' => '<div class="flexible-widgets front-page-1' . spi_widget_area_class( 'front-page-1' ) . ' widget-area"><div class="wrap">',
		'after'  => '</div></div>',
	) );
        
  genesis_widget_area( 'front-page-2', array(
          'before' => '<div class="flexible-widgets front-page-2 image' . spi_widget_area_class( 'front-page-2' ) . ' widget-area"><div class="wrap">',
          'after' => '</div></div>',
  } );
	
	genesis_widget_area( 'front-page-3-a', array(
		'before' => '<div class="flexible-widgets front-page-3 front-page-3-a color' . spi_widget_area_class( 'front-page-3-a' ) . ' widget-area"><div class="wrap">',
		'after'  => '</div></div>',
	) );
 
	genesis_widget_area( 'front-page-3-b', array(
		'before' => '<div class="flexible-widgets front-page-3 front-page-3-b color' . spi_widget_area_class( 'front-page-3-b' ) . ' widget-area"><div class="wrap">',
		'after'  => '</div></div>',
	) );
	
	genesis_widget_area( 'front-page-1', array(
		'before' => '<div class="flexible-widgets front-page-1 color' . spi_widget_area_class( 'front-page-1' ) . ' widget-area"><div class="wrap">',
		'after'  => '</div></div>',
	) );
 
	genesis_widget_area( 'front-page-4', array(
		'before' => '<div class="flexible-widgets front-page-4' . spi_widget_area_class( 'front-page-4' ) . ' widget-area"><div class="wrap">',
		'after'  => '</div></div>',
	) );
}

Now with these being declared and called on the front-page.php, the content of these widgets will not visible on the other pages…

So the first thing we have to do is:
**Move the registration and declaration of those widgets we wish to appear everywhere to our functions.php file**

In our case, the widgets we want to use on the inner pages would be the 2nd set of declarations, namely:

// used to register
genesis_register_sidebar( array(
	'id'          => 'front-page-2',
	'name'        => __( 'Main Banner', 'smart-passive-income-pro' ),
	'description' => __( 'Main Baner widget. The second section on the front page.', 'smart-passive-income-pro' ),
));
// used to display
genesis_widget_area( 'front-page-2', array(
		'before' => '<div class="flexible-widgets front-page-2 image' . spi_widget_area_class( 'front-page-2' ) . ' widget-area"><div class="wrap">',
		'after'  => '</div></div>',
	) );

These are the only sections I want to grab, as they are the only ones that will be universal across the site. But you can obviously do this with others.

So we can remove that code from the declaration on the front-page.php and go to our functions.php page to rethink HOW we will display it.

Why? Because we are NOT going to do what the home page does and remove the original loop.

We just want the banner to show up before the main content. This means two things:

We will leave the original loop on functions.php alone and craft a new action to help us display it the way we want.
We will remove the call to the banner from the front-page.php, else it will show up there twice (because functions.php affects all pages)

Declare a new action on the functions.php file to display our banner + widget combo

In our case, we can use the simple genesis hook of genesis_before_content and this will put our banner content below the header and above the content.

So after registering it, we can call that functions and expect to see the banner + widget combo on all our pages.

genesis_register_sidebar( array(
	'id'          => 'front-page-2',
	'name'        => __( 'Main Banner', 'smart-passive-income-pro' ),
	'description' => __( 'Main Baner widget. The second section on the front page.', 'smart-passive-income-pro' ),
));
add_action( 'genesis_before_content', 'banner_widget');
function banner_widget() {
	genesis_widget_area( 'front-page-2', array(
		'before' => '<div class="flexible-widgets front-page-2 image' . spi_widget_area_class( 'front-page-2' ) . ' widget-area"><div class="wrap">',
		'after'  => '</div></div>',
	) );  
	}
}

Simple!

Let us know how this works for you.

Adding home page widgets to inner pages on Genesis

So the first thing we have to do is:Move the registration and declaration of those widgets we wish to appear everywhere to our functions.php file

Why? Because we are NOT going to do what the home page does and remove the original loop.

Declare a new action on the functions.php file to display our banner + widget combo

Get Support

So the first thing we have to do is:
**Move the registration and declaration of those widgets we wish to appear everywhere to our functions.php file**