• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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.

Related Tutorials

  • Genesis Front Page Template With Custom Sidebar

Reader Interactions

Comments

  1. Nate says

    February 25, 2014 at 3:42 am

    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

    Log in to Reply
    • Brad Dalton says

      February 25, 2014 at 4:28 am

      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?

      Log in to Reply
      • Nate says

        February 25, 2014 at 5:17 am

        A quote would be great thanks.

        Log in to Reply
        • Brad Dalton says

          February 25, 2014 at 5:21 am

          Please send me the full login details with username, password and login url using the contact form on my site. Thanks

          Log in to Reply
  2. Erin says

    October 3, 2013 at 1:38 am

    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?

    Log in to Reply
    • Brad Dalton says

      October 3, 2013 at 2:10 am

      You may need to change widths for:

      .home-middle-left {
      	float: left;
      	width: 290px;
      }
      
      .home-middle-right {
      	float: right;
      	width: 285px;
      }
      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags