Add 2 Responsive Widgets Side by Side in Genesis

Apr 3, 2013

—

Brad Dalton

Some child themes already include 2 widgets side by side but they’re in a fixed location.

What if you want to change the location or your theme doesn’t include sub widgets?

You can add them anywhere there’s a hook using PHP and CSS code in your child themes files.

In this tutorial, i’ll show you how to add 2 responsive sub widgets, side by side in any Genesis child theme.

The widgets will be equal in width however you can easily change these values in the CSS code.

Register & Hook In 2 Widgets

Paste this code at the end of your child themes functions.php file.

You can change the hook and conditional tag based on your own needs.

Style Your Widgets

Add this sample code to your child themes style.css file.

You can easily change the values to adjust the width and other properties in this code.

This CSS code has been taken from the StudioPress Outreach theme and modified.

Customization

You’ll probably want to change the values for the padding, background and width of each widget which is easily done.

If you get stuck, the StudioPress community forum provides excellent support for custom CSS & PHP coding.

Otherwise, install the Firefox addon named Firebug and inspect each element so you can test your changes in real time before you change the code in your child theme.

Comments

10 responses to “Add 2 Responsive Widgets Side by Side in Genesis”

april

September 17, 2014

Hi! This worked perfectly for me. Thank you so much. One question… how would I move these widgets to be under the primary nav instead of above footer?

Thanks again!

Log in to Reply
1. Brad Dalton
  
  September 17, 2014
  
  Change the hook to genesis_afterheader
  
  You could also use this code with the one-half class rather than one-third and genesis_after_header hook.
  
  Log in to Reply
danijel

October 12, 2013

Hi,

tnx for the very useful info – I’ve tried to understand how to put two separate widgets in the same “row”, and here is one of the solutions.

However – I want to use it just on the homepage, so I suppose /** Add the sub widget section */ goes into home.php, instead into functions.php?

I’ve done it, but it seems that sub-widget-left goes into a ‘wrap’ container, and sub-widget-right into a ‘sub-widget-left’ container?

Am I doing sth wrong?

tnx,

Danijel

Log in to Reply
1. Brad Dalton
  
  October 12, 2013
  
  That’s right. Once its in functions you can add a conditional tag after the function to control where your widgets are displayed.
  
  So the functions code would start like this:
  [code]
  add_action( ‘genesis_before_footer’, ‘wpsites_sub_widget’, 5 );
  function wpsites_sub_widget() {
  if (is_front_page() )
  [/code]
  
  Or you can put the code into your home.php or front_page.php file without the conditional tag.
  
  Log in to Reply
Carolyn

May 23, 2013

This is fabulous, I’ll be trying this to add 3 more widgets to the corporate theme. (Good luck to me!)

Log in to Reply
1. Brad Dalton
  
  May 23, 2013
  
  So it worked Carolyn? Good stuff!
  
  Log in to Reply
  1. Carolyn Y
    
    May 26, 2013
    
    Sadly, no. I posted in the forums so hopefully it’ll be resolved. I’m thinking my CSS is off..
    
    Log in to Reply
    1. Brad Dalton
      
      May 27, 2013
      
      What i would do is use the PHP and CSS from another child theme that offers exactly what you want and uses the same width. That should work.
      
      Log in to Reply
      1. Carolyn Y
        
        May 27, 2013
        
        Good advice, I’ll check the rest of the themes out. And I just realized I can two widgets in on widget area, so I may just do that.
        But knowing me, I’ll want to figure out why it’s not working!
      2. Brad Dalton
        
        May 28, 2013
        
        Probably something really simple Carolyn.
        
        I tried this before and it took a few goes to get it working perfectly.