WP SITES

2752

Original WordPress Tutorials & 6000+ Guaranteed Code

Snippets

Add 2 Responsive Widgets Side by Side in Genesis

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.

Related Tutorials

Reader Interactions

Comments

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

  2. 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:

      add_action( 'genesis_before_footer', 'wpsites_sub_widget', 5 );
function wpsites_sub_widget() {
if (is_front_page() )

      Or you can put the code into your home.php or front_page.php file without the conditional tag.

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

Leave a Reply