Sridhar Katakam

Genesis and WordPress Tutorials

Reusable code snippets for Multi-Column widget areas in Genesis

by 6 Comments

Genesis has built-in column classes which we can use to arrange widget areas next to each other vertically in columns.

In this article I share code for registering multiple widget areas and displaying their content in various combinations (number and split ratio) of columns.

Note:

  1. In the sample code below genesis_after_header hook is used. You might want to replace it with one of the many Genesis hooks depending on where you want the columnized widget areas to appear.
  2. Also an if conditional is set to restrict the widget areas container to site's homepage/front page. You may want to adjust that depending on your design needs.
  3. Screenshots were taken with Genesis Sample as the active theme. Code may need minor adjustments in other child themes.

    4. After adding the code, go to Appearance > Widgets and drag your desired widgets into the widget areas.

    2-Columns 50% - 50%

    Screen Shot 2014-08-23 at 9.15.57 PM

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • I’m currently using Parallax Pro and I want to split the 5th home widget area into 2 columns, while still maintaining the styling.

    I registered the code in Functions.php and front-page.php to make the 2 column widgets show up instead of the single column one, but when I did this I lost the styling.

    All it shows up as is a white unstyled area. What should I do next to get the old 5th home widget background image and styling?

    Reply

    • Remove (undo) the changes you have done in functions.php and front-page.php.

      I am guessing you want to display social media icons at the left and a contact form on the right in .home-section-5?

      Reply

  • Sridhar

    Thanks for this tutorial. I used 2-Columns 75% – 25% for my home page.

    However, it is showing up in the same position on my domain.com/blog page as well. I thought this was for the home page only. Thanks!

    Reply

    • Same with me, and I put my hook as genesis_after_entry so it would drop down below the home page’s title. But it does appear on my blog page as well.

      Reply
    • >