Recently i wrote a post about copying home page widgets and duplicating them on a specific Genesis child themes home page.
This was easy enough because the PHP and CSS was exactly the same except for changes made to the unique widget i.d’s.
But how about adding home page widgets from another child theme?
I was asked a question from a web designer about how to do this after she tried and broke the code.
This code uses the Genesis theme framework hooks which you can change or remove depending on which parent theme you are using.
Lets take a look at how to add 4 custom widget areas from the News theme to the Blissful theme.
We’ll add:
- Home top widget
- Home featured left and right widgets
- Home bottom widget
Copy Home.php File
First step is to copy the home.php file from the News theme and change all instances of news to Blissful or the child theme you are adding the widgets to.
The reason the News child theme is a good choice is because its the same content width as Blissful so the CSS shouldn’t need much editing.
Here’s the entire code inside the new home.php file.
<?php
add_action( 'genesis_meta', 'blissful_home_genesis_meta' );
/**
* Add widget support for homepage. If no widgets active, display the default loop.
*
*/
function blissful_home_genesis_meta() {
if ( is_active_sidebar( 'home-top' ) || is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) || is_active_sidebar( 'home-bottom' ) ) {
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'news_home_loop_helper' );
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_content_sidebar' );
add_filter( 'body_class', 'add_body_class' );
function add_body_class( $classes ) {
$classes[] = 'blissful';
return $classes;
}
}
}
function news_home_loop_helper() {
if ( is_active_sidebar( 'home-top' ) ) {
echo '<div id="home-top"><div class="border wrap">';
dynamic_sidebar( 'home-top' );
echo '</div><!-- end .border wrap --></div><!-- end #home-top -->';
}
if ( is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) ) {
echo '<div id="home-middle"><div class="border wrap">';
echo '<div class="home-middle-left">';
dynamic_sidebar( 'home-middle-left' );
echo '</div><!-- end .home-middle-left -->';
echo '<div class="home-middle-right">';
dynamic_sidebar( 'home-middle-right' );
echo '</div><!-- end .home-middle-right -->';
echo '</div><!-- end .border wrap --></div><!-- end #home-middle -->';
}
if ( is_active_sidebar( 'home-bottom' ) ) {
echo '<div id="home-bottom"><div class="border wrap">';
dynamic_sidebar( 'home-bottom' );
echo '</div><!-- end .border wrap --></div><!-- end #home-bottom -->';
}
}
genesis();Functions.php File
Next step is to add support for all 4 custom widget areas to your child themes functions.php file.
genesis_register_sidebar( array(
'id' => 'home-top',
'name' => __( 'Home Top', 'blissful' ),
'description' => __( 'This is the home top section.', 'blissful' ),
) );
genesis_register_sidebar( array(
'id' => 'home-middle-left',
'name' => __( 'Home Middle Left', 'blissful' ),
'description' => __( 'This is the home middle left section.', 'blissful' ),
) );
genesis_register_sidebar( array(
'id' => 'home-middle-right',
'name' => __( 'Home Middle Right', 'blissful' ),
'description' => __( 'This is the home middle right section.', 'blissful' ),
) );
genesis_register_sidebar( array(
'id' => 'home-bottom',
'name' => __( 'Home Bottom', 'blissful' ),
'description' => __( 'This is the home bottom section.', 'blissful' ),
) );Next step is to create new image sizes for the featured widgets.
/** Add new image sizes */
add_image_size( 'mini-thumbnail', 75, 75, TRUE );
add_image_size( 'small-thumbnail', 110, 110, TRUE );
add_image_size( 'home-middle-left', 280, 165, TRUE );
add_image_size( 'home-middle-right', 50, 50, TRUE );
add_image_size( 'home-tabs', 150, 220, TRUE );You might also like to add support for structural wraps as this isn’t included in the Blissful theme so check to see depending in your theme.
/** Add support for structural wraps */
add_theme_support( 'genesis-structural-wraps', array( 'header', 'nav', 'subnav', 'inner', 'footer-widgets', 'footer' ) );Style.css File
And to finish off, you’ll need to add the CSS
/* Home Top
------------------------------------------------------------ */
#home-top {
border-bottom: 1px solid #d5d5d5;
overflow: hidden;
}
#home-top .border {
border-bottom: 4px solid #eee;
overflow: hidden;
}
#home-top .wrap {
overflow: hidden;
padding: 20px 25px 15px;
}
#home-top .ui-tabs ul.ui-tabs-nav {
border-bottom: 1px dotted #ddd;
margin: 10px 0;
padding: 0 0 13px;
}
#home-top .ui-tabs ul.ui-tabs-nav li a {
background-color: #f5f5f5;
font-weight: bold;
}
#home-top .ui-tabs ul.ui-tabs-nav li a:hover,
#home-top .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a {
background-color: #00a7ed;
color: #fff;
}
#home-top .ui-tabs .post {
background-color: #fff;
margin: 0;
padding: 0;
}
/* Home Middle
------------------------------------------------------------ */
#home-middle {
border-bottom: 1px solid #d5d5d5;
overflow: hidden;
}
#home-middle .border {
border-bottom: 4px solid #eee;
overflow: hidden;
}
#home-middle .wrap {
overflow: hidden;
padding: 25px 25px 15px;
}
.home-middle-left {
float: left;
width: 290px;
}
.home-middle-right {
float: right;
width: 285px;
}
.home-middle-left-2 {
float: left;
width: 290px;
}
.home-middle-right-2 {
float: right;
width: 285px;
}
/* Home Bottom
------------------------------------------------------------ */
#home-bottom {
overflow: hidden;
}
#home-bottom .wrap {
overflow: hidden;
padding: 20px 25px 15px;
}So hows it looking now?
Depending on which theme you are customizing, you may need to edit the width for the home middle left and right widgets.
As this is very much theme specific, you’ll need to work this part out your self but its not much of a challenge really.
So there you have it.
A heap of code but its mostly copying and pasting without any need to edit, write or learn PHP programming.
6 replies on “Add Custom Home Page Widgets”
Hi Brad
I do not know how to wrap the three widgets that are beside each other (at the top of the page under the banner image) with a div so that I can contain them within a div to add clearfix and manipulate margins consistently.
And what would be the best way to have the title of the widget sit on top of the image?
Thanks
Nate
Hello Nate
Did you want to hire me to fix this problem or did you want me to login and work out a quote for you?
A quote would be great thanks.
Please send me the full login details with username, password and login url using the contact form on my site. Thanks
Hi Brad,
Thank you for writing this post. It was extremely helpful. I’m using the Balance theme and only opted to add the middle-left, middle-right and home bottom widgets.
My home-middle-right is not floating right. I’ve done a copy paste, I can’t see how this is happening. All of the CSS is working and I believe the home.php and function.php is correct, as I’m receiving no errors.
Do you have any suggestions?
You may need to change widths for: