• 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

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

  • Inline Widgets Using Bootstrap Column Class CSS in Genesis

Reader Interactions

Comments

  1. april says

    September 17, 2014 at 7:52 pm

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

      September 17, 2014 at 9:02 pm

      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
  2. danijel says

    October 12, 2013 at 7:26 am

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

      October 12, 2013 at 7:43 am

      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.

      Log in to Reply
  3. Carolyn says

    May 23, 2013 at 5:26 pm

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

      May 23, 2013 at 11:17 pm

      So it worked Carolyn? Good stuff!

      Log in to Reply
      • Carolyn Y says

        May 26, 2013 at 8:50 pm

        Sadly, no. I posted in the forums so hopefully it’ll be resolved. I’m thinking my CSS is off..

        Log in to Reply
        • Brad Dalton says

          May 27, 2013 at 3:37 am

          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
          • Carolyn Y says

            May 27, 2013 at 5:26 pm

            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!

          • Brad Dalton says

            May 28, 2013 at 3:08 am

            Probably something really simple Carolyn.

            I tried this before and it took a few goes to get it working perfectly.

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