WP SITES

Log in

Split Widgets 50/50 Side by Side in 2 Columns

—

by

Brad Dalton

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

Comments

5 responses to “Split Widgets 50/50 Side by Side in 2 Columns”

  1. Eli Overbey Avatar
    Eli Overbey

    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

    1. Brad Dalton Avatar
      Brad Dalton

      Looks like your images are different heights Eli.

  2. Zimbrul Avatar
    Zimbrul

    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.

  3. Zimbrul Avatar
    Zimbrul

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      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.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.