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.
Functions.php
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.
Home.php
Here’s the code for the home top:
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 -->';
}Here’s the code for the home middle left and right:
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 -->';
}And here’s the code for the home bottom:
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 -->';
}
}Next step is to duplicate the CSS code in the News child themes style.css file and change the selectors to match the new widgets.
Style.css
/* 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;
}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.
Here’s another example which shows you how to duplicate home page widgets and replace the home top widget in the News child theme so its the same as the home middle left and right widgets.
Leave a Reply
You must be logged in to post a comment.