askdesign
1/8/2016 - 12:59 AM

Adding/Duplicating Home Page Widgets in Genesis

Brad Dalton

/* Home Top 2
------------------------------------------------------------ */

#home-top-2 {
	border-bottom: 1px solid #d5d5d5;
	overflow: hidden;
}

#home-top-2 .border {
	border-bottom: 4px solid #eee;
	overflow: hidden;
}

#home-top-2 .wrap {
	overflow: hidden;
	padding: 20px 25px 15px;
}

#home-top-2 .ui-tabs ul.ui-tabs-nav {
	border-bottom: 1px dotted #ddd;
	margin: 10px 0;
	padding: 0 0 13px;
}

#home-top-2 .ui-tabs ul.ui-tabs-nav li a {
	background-color: #f5f5f5;
	font-weight: bold;
}

#home-top-2 .ui-tabs ul.ui-tabs-nav li a:hover,
#home-top-2 .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a {
	background-color: #00a7ed;
	color: #fff;
}

#home-top-2 .ui-tabs .post {
	background-color: #fff;
	margin: 0;
	padding: 0;
}


/* Home Middle 2
------------------------------------------------------------ */

#home-middle-2 {
	border-bottom: 1px solid #d5d5d5;
	overflow: hidden;
}

#home-middle-2 .border {
	border-bottom: 4px solid #eee;
	overflow: hidden;
}

#home-middle-2 .wrap {
	overflow: hidden;
	padding: 25px 25px 15px;
}

.home-middle-left-2 {
	float: left;
	width: 290px;
}

.home-middle-right-2 {
	float: right;
	width: 285px;
}


/* Home Bottom 2
------------------------------------------------------------ */

#home-bottom-2 {
	overflow: hidden;
}

#home-bottom-2 .wrap {
	overflow: hidden;
	padding: 20px 25px 15px;
}
if ( is_active_sidebar( 'home-top-2' ) ) {
	
		echo '<div id="home-top-2"><div class="border wrap">';
		dynamic_sidebar( 'home-top-2' );
		echo '</div><!-- end .border wrap --></div><!-- end #home-top-2 -->';
		
	}

if ( is_active_sidebar( 'home-middle-left-2' ) || is_active_sidebar( 'home-middle-right-2' ) ) {
	
		echo '<div id="home-middle-2"><div class="border wrap">';

			echo '<div class="home-middle-left-2">';
			dynamic_sidebar( 'home-middle-left-2' );
			echo '</div><!-- end .home-middle-left-2 -->';

			echo '<div class="home-middle-right-2">';
			dynamic_sidebar( 'home-middle-right-2' );
			echo '</div><!-- end .home-middle-right-2 -->';
		
		echo '</div><!-- end .border wrap --></div><!-- end #home-middle-2 -->';
		
	}
	
	if ( is_active_sidebar( 'home-bottom-2' ) ) {
	
		echo '<div id="home-bottom-2"><div class="border wrap">';
		dynamic_sidebar( 'home-bottom-2' );
		echo '</div><!-- end .border wrap --></div><!-- end #home-bottom-2 -->';
		
	}

}

// Copy the existing code for registering the home page widgets and change the unique widget i.d’s.

// In this example, you can see a 2 has been added to all i.d’s which you’ll need to do in the home.php file and the style.css file also.

/** Register second widget areas */
genesis_register_sidebar( array(
	'id'			=> 'home-top-2',
	'name'			=> __( 'Second Home Top', 'news' ),
	'description'	=> __( 'This is the second home top section.', 'news' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'home-middle-left-2',
	'name'			=> __( 'Second Home Middle Left', 'news' ),
	'description'	=> __( 'This is the second home middle left section.', 'news' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'home-middle-right-2',
	'name'			=> __( 'Second Home Middle Right', 'news' ),
	'description'	=> __( 'This is the second home middle right section.', 'news' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'home-bottom-2',
	'name'			=> __( 'Second Home Bottom', 'news' ),
	'description'	=> __( 'This is the second home bottom section.', 'news' ),
) );

// Its also a good idea to change the name and description for each widget as this will be displayed in your widgets page.

Next step is to duplicate the code for these widgets in the home.php file.
http://wpsites.net/web-design/adding-duplicating-home-page-widgets-genesis/

Everyone loves widgets so much they want more of them.

Especially on the homepage as that’s the most visited page of any website.

Even though you can easily add more than one widget to each home page widget area, you still might want to create more.

The easiest way to do this is to duplicate the existing code in your Genesis child theme.

You’ll need to duplicate code in 3 files:

    Your functions.php file
    Your home.php file
    Your style.css file

Lets look at an example of adding more widgets to a Genesis home page by duplicating the existing code from these files.

For this tutorial, we’ll use the News child theme as an example.

It’s a fair chunk of code but its easy to change if you paste into a new file using your text editor and make the changes there.