January 2, 2018

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?

Smart Passive Income Pro
Source: Studio Press

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.phpthe 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:

  1. We will leave the original loop on functions.php alone and craft a new action to help us display it the way we want.
  2. 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.

Get Support


Get Sagely

Sign up for regularly broadcasted emails on
running your online business and thriving

during the craziest times most of us have ever lived.

Related Articles

April 9, 2019

If you already have a great PDF giveaway for your subscribers, you've probably set up your autoresponder to fire off a link to the free resource upon subscription. It's easy peasy, and everyone is ...

Read More

March 30, 2019

There is a glitch we found when developing a membership site using WP eMember and using the fantastic commenting system wpDiscuz: the comments on protected pages were not being hidden by WP eMember even ...

Read More

Want Results?