WP SITES

2752

Original WordPress Tutorials & 6000+ Guaranteed Code

Snippets

Flexible Responsive Widgets Template for Genesis

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:

Widgets Template

There’s 3 simple steps you need to follow:

  1. Create a new file named page_widgets.php and add the PHP code below to the file.
  2. Add PHP code to register 3 widgets areas to your child themes functions.php file.
  3. 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:

Full Content Width

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:

Widgets Template

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;
}

genesis featured posts widget

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:

Author Archive Page

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

Widgets Template

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

Reader Interactions

Comments

  1. 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

    • Hello Scot. Works perfectly on the Expose Pro theme as you can see in this screenshot.

      Widgets Template Expose Pro Theme

      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:

      .widgets-template .widgettitle {
    color: #333;
    font-size: 2.6rem;
    text-align: center;
    text-transform: uppercase;
}

      I also removed this PHP code from the template file which effects the header but not the widgets:

      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 );

      • 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

Leave a Reply