Flexible Responsive Widgets Template for Genesis

Nov 20, 2013

—

Brad Dalton

This page template enables you to display an unlimited number of widgets in any order in any StudioPress child theme.

The template includes widgets which extend the full width of the site container as well as 50%.

Here’s a very basic example:

There’s 3 simple steps you need to follow:

Create a new file named page_widgets.php and add the PHP code below to the file.
Add PHP code to register 3 widgets areas to your child themes functions.php file.
Add optional CSS to your child themes style.css file which also includes a small amount of CSS for Mobile Responsiveness.

Here’s the PHP code for the first 2 steps:

And here’s the CSS.

.middle-widgets .widget {
	float: left;
	padding: 2% 4% 2% 4%;
	width: 50%;
}

.widgets-template .site-container {
background: #fff;
}

.top-widget {
background-color: LavenderBlush;
}

.middle-widgets {
background-color: AliceBlue;
}

.bottom-widget {
background-color: LightGoldenRodYellow;
}

.widgets-template .site-inner {
clear: both;
padding-top: 0px;
padding-top: 0rem;
}

.widgets-template .site-inner, .wrap {
margin: 0;
max-width: 100%;
}

.top-widget,
.bottom-widget {
padding: 2% 4%;
}

@media only screen and (max-width: 767px) {
	
	.middle-widgets .widget {
	padding: 2% 4%;
	width: 100%;
   }

}

Here’s what the template looks like if you don’t want to display your widget content full width of the site container:

In the above example, you only need to use this CSS:

.middle-widgets .widget {
	float: left;
	padding: 2% 4% 2% 4%;
	width: 50%;
}

.widgets-template .site-container {
background: #fff;
}

.top-widget,
.bottom-widget {
padding: 2% 4%;
}

@media only screen and (max-width: 767px) {
	
	.middle-widgets .widget {
	padding: 2% 4%;
	width: 100%;
   }

}

Change Display of Widgets

If you want to display 2, 4, 6 or more widgets in columns of 2 side by side, you can simply remove any widgets from the Top Widget area and they will display inline.

Here’s an example of what it looks like with 4 widgets in 2 columns:

Using Genesis Featured Posts Widgets

Here’s what the middle widgets look like when using this CSS with the Genesis Featured Posts widgets.

.middle-widgets .widget {
	float: left;
	padding: 2% 4% 2% 4%;
	width: 50%;
}

.widgets-template .site-container {
background: #fff;
}

.top-widget,
.bottom-widget {
padding: 2% 4%;
}

.widgets-template .entry-image {
padding-right: 20px;
padding-bottom: 20px;
}

Display Multiple Author Profiles

You can also use this template to display multiple authors using the Genesis Profile widgets and linking them to specific pages of needed.

No Extra CSS code required:

And here’s an example when using the full width of the container:

All code has been tested on the Genesis Sample child theme and the widget areas are responsive.

Style Each Widget Area Differently

You may find this post useful if you want to style each widget area differently

Comments

8 responses to “Flexible Responsive Widgets Template for Genesis”

Colin Gold

December 23, 2013

Hi Brad,

Thanks for the code. Im currently using Eleven 40 theme and have followed the instruction above. I can see the new widget areas appear however when I add anything to them nothing shows on the home page. Is there any steps that I may have missed?

Thanks Colin
Colin

Log in to Reply
1. Brad Dalton
  
  December 23, 2013
  
  You also need to create the front page template and upload it to your child theme.
  
  Log in to Reply
scot

November 30, 2013

The first widget breaks my expose pro theme.

Log in to Reply
1. Brad Dalton
  
  November 30, 2013
  
  Hello Scot. Works perfectly on the Expose Pro theme as you can see in this screenshot.
  
  Please add a real head shot to your Gravatar.com account rather than a logo. Thanks.
  
  I also added this CSS code to change the size and color of the widget titles:
  [code]
  .widgets-template .widgettitle {
  color: #333;
  font-size: 2.6rem;
  text-align: center;
  text-transform: uppercase;
  }
  [/code]
  
  I also removed this PHP code from the template file which effects the header but not the widgets:
  [code]
  remove_action( ‘genesis_header’, ‘genesis_header_markup_open’, 5 );
  remove_action( ‘genesis_header’, ‘genesis_do_header’ );
  remove_action( ‘genesis_header’, ‘genesis_header_markup_close’, 15 );
  [/code]
  
  Log in to Reply
  1. Scot
    
    November 30, 2013
    
    By removing the code in the header fixed the logo issue.
    Took me a little bit to get the css and mobile css working right. I was able to solve this last night.
    
    I used your coding to create a homepage for the expose pro theme and was able to get my widget area working just right.
    
    Thanks for the advice on my gravatar.
    -Scot
    
    Log in to Reply
    1. Brad Dalton
      
      November 30, 2013
      
      Good stuff. Glad you worked it out Scot.
      
      Log in to Reply
      1. scot
        
        November 30, 2013
        
        I sent you my link via your Facebook page message. I still have some small things to fix, but overall I’m happy with the theme.
        
        Thanks
        -Scot
      2. Brad Dalton
        
        November 30, 2013
        
        O.k Let me a take a look and get back to you Scot.