• 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

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. Colin Gold says

    December 23, 2013 at 12:44 am

    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
    • Brad Dalton says

      December 23, 2013 at 3:35 am

      You also need to create the front page template and upload it to your child theme.

      Log in to Reply
  2. scot says

    November 30, 2013 at 1:07 am

    The first widget breaks my expose pro theme.

    Log in to Reply
    • Brad Dalton says

      November 30, 2013 at 12:31 pm

      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 );
      Log in to Reply
      • Scot says

        November 30, 2013 at 2:25 pm

        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
        • Brad Dalton says

          November 30, 2013 at 2:38 pm

          Good stuff. Glad you worked it out Scot.

          Log in to Reply
          • scot says

            November 30, 2013 at 2:40 pm

            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

          • Brad Dalton says

            November 30, 2013 at 3:21 pm

            O.k Let me a take a look and get back to you Scot.

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
 

Loading Comments...
 

You must be logged in to post a comment.