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.
Leave a Reply
You must be logged in to post a comment.