Add Custom Home Page Widgets

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.

Never Miss a Tip from Brad Dalton

Get my latest web design tutorials, elegant coding solutions & useful tips.

5 Reasons Mad Mimi Works Better

mad-mimi
  1. Sends From Your Email Address - More personal & higher open rate
  2. Cheapest - $42 for list of 10,000 emails, unlimited sends
  3. Ease of Use - The easiest system to create & setup campaigns
  4. RSS to E-Mail - Auto send list of latest posts
  5. Auto Send Any Number of Days - enables you to offer multiple newsletters at different frequencies.

Click here to create a free account.

Comments

  1. Nate says

    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

  2. Erin says

    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?

    • Brad Dalton says

      You may need to change widths for:

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

Leave a Reply

Your feedback is always appreciated.

Your feedback is always welcome & appreciated however WP Sites does not reply to anonymous comment authors or approve loaded questions. Members get answers to unlimited questions.