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