WP SITES

2952 Tutorials & 191 Plugins
Quote

Widgets Side By Side in Genesis

—

by

Brad Dalton

The 4 code snippets in this post creates 2 widgets which display side by side before the content sidebar on your front page.

widget columns

You can change the hook position if you want to display the widgets in another position.

You can also paste the code into another template like your landing page template or use the code with a conditional tag in your functions file.

There’s 4 code blocks which need to be pasted into 3 different files in your child theme.

  • The front-page.php code goes at the start of your home.php file or front-page.php file.
  • The functions.php code goes at the end of your child themes functions.php file.
  • The style.css code goes near the end of your style.css file before the code for Media Queries.
  • And the 2nd block of style.css code for Media Queries needs to be added to your CSS code for responsive design.

Still confused? Ask a question in the comments if you get stuck.

I tested this code on the Back Country child theme which is non mobile responsive (at the time of writing) and also the very popular free Genesis 2.0 Sample child theme which runs HTML 5.

Mobile Responsiveness

I also tested this code on the Genesis 2.0 Sample child theme and it re-sizes perfectly.

mobile responsive

This code is highly flexible because it uses percentages for widths meaning it can be used in any of the 50+ StudioPress themes.

22 responses to “Widgets Side By Side in Genesis”

  1. SusanV Avatar
    SusanV

    Is it possible to make the two side by side widgets for the front page on the Magazine theme removing the home sidebar. I just want 2 side by side widgets for the home page, full width no sidebar.

    I tried using this code as is and the widgets showed up on my dashboard, but they didn’t work for the Magazine Pro theme.

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      Works in all themes however you do need to call the widgets as well as register theme.

      In which hook position?

      Reply
  2. Rich Avatar
    Rich

    Thanks for the great article!

    I’d like to use this, but need to make the widget on the right ‘pull’ responsively so that on a smaller screen the content in the ‘right’ widget stacks on top of the ‘left’ widget, instead of underneath it – like Bootstrap’s ‘pull’ function….

    Any ideas?

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      May need to tweak the CSS for different themes or try this method http://wpsites.net/web-design/genesis-split-sidebars/

      Reply
      1. Rich Avatar
        Rich

        Thanks so much!

        Do you know if Genesis uses a responsive grid system like Bootstrap so I could maybe apply what I’m talking about to custom divs? I just need some content on the right (in a div) to pull on top of the content on the left (in a separate div) when the screen size is smaller.

        Thanks for your help!

        Reply
        1. Brad Dalton Avatar
          Brad Dalton

          You could use column classes or the genesis_grid_loop otherwise the float:left and float:right declarations in your Media Queries.

          Reply
  3. Elena Avatar
    Elena

    Thank you! That works great. I have a question: using parallax theme I’d like NOT to display the widgets in home page and landing page.Let them display only in blog posts and pages. What should I add and where to do this?

    PS as you told above I added the code in functions.php (not in front-page.php
    But it added widgets on all the pages, and I’d like to exclude the home page and the landing page.

    Thank you for help.

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      Add ! before the conditional tags after the function for the pages you want to exclude.

      Reply
  4. Tim Avatar
    Tim

    Hi Brad,

    I’d like to try your widgets but I don’t know where to put the front-page.php code. I’m using the Genesis Sample child theme but I can see no front-page.php or home.php to put your first code block in. I don’t see these in the Genesis 2 framework core either – should I create one or other of these pages in my child theme?

    Thanks
    Tim, London

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      You can create either or hook the code in from your functions file.

      Reply
      1. Tim Avatar
        Tim

        Thanks for super-swift reply Brad! Ok, if I put the two php code blocks in to my child functions.php it will add the two widgets to all my pages as it would for regular widgets? Excuse the questions, I’m a copy n paste engineer…

        Reply
        1. Brad Dalton Avatar
          Brad Dalton

          Should be o.k.

          May need some tweaking but looks fine to do that.

          Reply
          1. Tim Avatar
            Tim

            Yup, works fine – thanks!

  5. Jeanni Avatar
    Jeanni

    I am using the Genesis Child theme. The only php I see is for functions and then those under the Genesis subheading. Do I go into the Genesis ( and add to frontpage and functions) or do I just put the code into the Theme Functions.php (child). I’m only about a week into Genesis and finding my way, but I don’t want to do something I shouldn’t. Thanks!

    Reply
  6. Dave Avatar
    Dave

    Brad, I was following your instructions on installing your code into the specified places, until I realized that I don’t have a “Media Queries” section in the style.css in the child theme. Is there another place where the code can be pasted to make this work? I am using a custom child theme.
    Thank you.

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      Hello Dave

      For some reason the responsive CSS looks like it has been removed from your theme.

      You can add the CSS at the very end of your style sheet and see what the result is.

      You could also add the CSS for the Media Queries from an old version of the theme.

      Another option is to update your theme to HTML 5 by updating to the new version of your theme.

      Depending on existing modifications, this may be a smooth process or require some tweaking of the code.

      Reply
  7. Bill Gram-Reefer Avatar
    Bill Gram-Reefer

    In Eleven40 Pro I pasted the snips per instructions above. The home left and right widget boxes show correctly in appearance=>widgets, but when populated with feature post widgets the content from featured posts does not appear. Just the normal loop.

    ALSO…

    How can one add ‘home bottom’ widget area as in Magazine. Will Magazine Pro have these three widget areas?

    Reply
    1. Bill Gram-Reefer Avatar
      Bill Gram-Reefer

      I had to remove the eleven40 grid loop and edited to
      [code]
      >><?php

      remove_action( 'genesis_loop', 'genesis_do_loop' );

      add_action( 'genesis_before_content', 'home_top_widgets' );

      function home_top_widgets() {

      if ( is_active_sidebar( 'top-left' ) || is_active_sidebar( 'top-right' ) ) {

      echo '’;

      genesis_widget_area( ‘top-left’, array(
      ‘before’=> ”,
      ‘after’ => ”,
      ) );

      genesis_widget_area( ‘top-right’, array(
      ‘before’=> ”,
      ‘after’ => ”,
      ) );

      echo ‘‘;

      }

      }

      genesis();
      <<<
      [/code]
      Now to re-size in css

      Reply
    2. Brad Dalton Avatar
      Brad Dalton

      Hi Bill

      Did you paste the PHP code for the widgets in the front_page.php file?

      Please clarify home bottom widgets.

      Reply
  8. Pete Avatar
    Pete

    I have feelings the code samples above are missing the mentioned CSS code which ought to go before Media Queries.
    Unless I misunderstood something.
    But this article is still useful and I appreciate it very much.

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      Spot on Pete and thanks for letting me know as i forgot to paste the CSS into the Gist.

      Now added and also tested on another theme for responsiveness.

      Much appreciated.

      Reply
  9. Zimbrul Avatar
    Zimbrul

    Brad, great tip! And very useful, too. You can put there an introduction to your blog and a sign up form. Brilliant!

    Reply

Was This Tutorial Helpful?