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.
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!
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.
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
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:
Or you can put the code into your home.php or front_page.php file without the conditional tag.
This is fabulous, I’ll be trying this to add 3 more widgets to the corporate theme. (Good luck to me!)
So it worked Carolyn? Good stuff!
Sadly, no. I posted in the forums so hopefully it’ll be resolved. I’m thinking my CSS is off..
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.
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!
Probably something really simple Carolyn.
I tried this before and it took a few goes to get it working perfectly.