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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Adding/Duplicating Home Page Widgets in Genesis

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:

  1. Your functions.php file
  2. Your home.php file
  3. 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.

Reader Interactions

Comments

  1. Melissa says

    December 5, 2014 at 7:36 am

    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.

    Log in to Reply
    • Brad Dalton says

      December 5, 2014 at 8:40 am

      Are you a member Melissa?

      Log in to Reply
  2. Andy says

    July 7, 2014 at 7:16 am

    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

    Log in to Reply
    • Brad Dalton says

      July 7, 2014 at 7:20 am

      Hi Andy

      You need custom code for that.

      Log in to Reply
  3. Eric Kuhn says

    November 16, 2013 at 7:08 pm

    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:
    http://wpsites.net/web-design/add-featured-widgets-inline-anywhere-in-genesis/

    Log in to Reply
    • Brad Dalton says

      November 17, 2013 at 4:11 am

      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/

      Log in to Reply
      • Eric Kuhn says

        November 17, 2013 at 7:56 pm

        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?

        Log in to Reply
        • Brad Dalton says

          November 18, 2013 at 4:40 am

          There’s a bit more involved than just copying one file but its not difficult if you know what you’re doing

          Log in to Reply
  4. BGR says

    October 22, 2013 at 8:55 pm

    I tried this.

    http://wpsites.net/web-design/adding-duplicating-home-page-widgets-genesis/

    Log in to Reply
    • BGR says

      October 22, 2013 at 8:56 pm

      as prescribed.

      Log in to Reply
  5. BGR says

    October 22, 2013 at 5:56 pm

    This produced a white screen for me in application to Eleven40 Pro

    Log in to Reply
    • Brad Dalton says

      October 22, 2013 at 8:29 pm

      Bill

      Which snippet and where did you put it exactly?

      Log in to Reply
  6. Roy says

    October 17, 2013 at 4:24 pm

    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

    Log in to Reply
  7. Roy says

    October 16, 2013 at 7:32 pm

    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.

    Log in to Reply
    • Brad Dalton says

      October 17, 2013 at 2:56 am

      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.

      Log in to Reply
      • Roy says

        October 17, 2013 at 3:01 am

        Will the code in this post work ?

        Log in to Reply
  8. vinoth kanna says

    August 14, 2013 at 6:14 pm

    Brad,

    Nice work.

    Thank you for the tutorial.

    Log in to Reply
  9. George says

    August 11, 2013 at 11:48 am

    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?

    Log in to Reply
    • Brad Dalton says

      August 11, 2013 at 12:08 pm

      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.

      Log in to Reply
    • vinoth kanna says

      August 14, 2013 at 6:13 pm

      George, try to add padding.

      example:

      /* Home Top 2
      ———————————————————— */

      #home-top-2 {
      border-bottom: 1px solid #d5d5d5;
      padding: 25px 0;
      overflow: hidden;
      }

      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