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.
Hi, Brad. I am learning a lot from your tutorials. I am trying to merge the Beautiful Pro front page widgets with Genesis Sample. I’ve got that done successfully, but something seems to be missing. They’re not showing up after saving them in the widget.
Are you a member Melissa?
Hi there,
I am using enterprise pro, if i want to add extra widget (home bottom 2) but instead of 3 box, i want it full width, can you please help me how to do it? thanks
Hi Andy
You need custom code for that.
I haven’t tried this yet, but is this best resource if I am trying to add a few custom widget areas to the Home page in Eleven40 Pro theme? Eleven40 Pro comes with a home.php file, but its set up to just show the latest blog posts. I want to have widget areas in a dedicated page for home.
I also found this on your site and didn’t know which one to use:
Hello Eric
I would use the home.php or front-page.php from an existing child theme which has the widgets setup the way you like.
Its very easy to create a template file with widgets.http://wpsites.net/web-design/add-agency-pro-themes-front-page-to-genesis-sample-theme/
So if I already own the Agency Pro theme, but using the Eleven40 Pro theme. I can copy the front-page.php file (from Agency Pro) and paste it over the home.php file, to have the same widget areas as the Agency Pro?
There’s a bit more involved than just copying one file but its not difficult if you know what you’re doing
I tried this.
as prescribed.
This produced a white screen for me in application to Eleven40 Pro
Bill
Which snippet and where did you put it exactly?
I got the registration completed, however challenged on where to insert in the home.php. Everywhere I try, I get the actual syntax showing on my page.
Any help would be appreciated.
Roy
I want to add the series of three widgets that are in the Executive Theme:
Home Left
Home Middle
Home Right
Under the slider section and before the posts on my current site, which is Amped theme.
Are the instructions above good for that change too ?
Thank you.
You would need to tweak the CSS code because the width may be different.
You could also take the code from the Executive theme and use that.
Will the code in this post work ?
Brad,
Nice work.
Thank you for the tutorial.
Quick questions. In my middle widget (enterprise theme) the third widget is not lining up. You can see it here: any thoughts why? Or code changes?
Hi George
Because the CSS needs tweaking.
You would need to modify the values to get it right.
I’m available for this type of work.
George, try to add padding.
example:
/* Home Top 2
———————————————————— */
#home-top-2 {
border-bottom: 1px solid #d5d5d5;
padding: 25px 0;
overflow: hidden;
}