• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Split Widgets 50/50 Side by Side in 2 Columns

In this tutorial, i’ll provide the PHP & CSS code you can use to add 2 widgets, side by side.

Update : Here’s a newer solution which uses CSS Grid now supported by all major browsers.

The code actually creates 3 widgets:

  • 1 which is the width of your content area
  • 2 which are split 50/50

split widgets

The code includes the new Genesis 2.0 HTML 5 loop hooks so you’ll need to change the hook if you’re still running your site using the old XHTML markup.

The code has been tested on the Genesis 2.0 Sample child theme and may need tweaking for other themes.

All PHP should be copied from the view raw link below the Gist and pasted in your child themes functions.php file. There’s also 2 different PHP code blocks to choose from, both tested and work.

I’ve also added minimal CSS because i know we all like to style our sites differently.

Note: This code displays your widgets on archive pages as well as single posts and pages. Use the 2nd code block for single posts only.

You’ll also notice the CSS includes styling for the Genesis eNews subscribe widget.

You will need to grab the section i.d for your specific eNews widget and replace the i.d number in the CSS code.

Read more about styling specific widgets individually.

Add Widgets After Single Posts Only

You could also use this code to display the 2 widgets after single posts only and not on archive pages.

Here’s what the widgets look like after adding the code to the Minimum Pro theme:

minimum pro

Other Ways To Create 2 Columns

  • Genesis Featured Page Widgets in Flexible Columns in Split Widgets
  • Adding Content Columns To Custom Functions
  • How To Add Content Columns in WordPress
  • Add Columns In Custom Widget For Specific Page(s)
  • Genesis Split Sidebar Widgets

Reader Interactions

Comments

  1. Eli Overbey says

    March 4, 2014 at 3:21 am

    Hi Brad!

    Great stuff. Follow up: I’ve done that, but end up with uneven height on the widgets – and thus the background comes through. Any thoughts on how to get the widgets to have equal heights?

    Here is a picture of my dilemma: http://ua.familyproject.com/wp-content/uploads/2014/03/Screen-Shot-2014-03-03-at-8.17.51-PM.png

    Log in to Reply
    • Brad Dalton says

      March 4, 2014 at 4:43 am

      Looks like your images are different heights Eli.

      Log in to Reply
  2. Zimbrul says

    October 10, 2013 at 10:33 am

    Thanks Brad for this great tutorial. I like to add this arrangement to sites I design and they are blog type because it automatically creates some CTAs at the end of the posts and as they are widget controlled I don’t need to input the content every time I finish the post.
    I’ve firstly noticed this arrangement with two widget areas after post in Focus 1 – Studiopress old theme and I really liked it.
    You are a never ending source of Genesis knowledge and I don’t think there is something you want to do in Genesis and is not on your website.

    Log in to Reply
  3. Zimbrul says

    September 19, 2013 at 10:47 am

    Thanks for this tutorial, Brad. You definitely are one of the most knowledgeable Genesis designers out there. I was looking for sometime for doing this and here I go: you did it.
    I think this one and the tutorial about changing colour of individual widgets can go hand in hand and could lead to creating great looking “bottom of the article” area on your website.

    Log in to Reply
    • Brad Dalton says

      September 19, 2013 at 2:08 pm

      Thanks Zimbrul.

      I’ll also need to figure out to use this code conditionally and will update the post once i have that solution.

      When i added the is_single() conditional tag, it still displayed on archive pages including the front page so i need to figure that out.

      Update: Just updated the 2nd code snippet to display the widgets after single posts only.
      Log in to Reply

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.