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

WP SITES

2752

Original WordPress Tutorials & 6000+ Guaranteed Code

Snippets

  • Videos
  • Premium Access
  • Log in

Widgets Side By Side in Genesis

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.

Reader Interactions

Comments

  1. SusanV says

    March 19, 2015 at 4:12 pm

    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.

    Log in to Reply
    • Brad Dalton says

      March 20, 2015 at 1:09 am

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

      In which hook position?

      Log in to Reply
  2. Rich says

    July 24, 2014 at 6:04 am

    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?

    Log in to Reply
    • Brad Dalton says

      July 24, 2014 at 6:35 am

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

      Log in to Reply
      • Rich says

        July 24, 2014 at 7:31 am

        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!

        Log in to Reply
        • Brad Dalton says

          July 24, 2014 at 7:37 am

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

          Log in to Reply
  3. Elena says

    May 10, 2014 at 1:43 am

    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.

    Log in to Reply
    • Brad Dalton says

      May 10, 2014 at 3:02 am

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

      Log in to Reply
  4. Tim says

    April 25, 2014 at 7:04 pm

    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

    Log in to Reply
    • Brad Dalton says

      April 25, 2014 at 7:19 pm

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

      Log in to Reply
      • Tim says

        April 25, 2014 at 7:29 pm

        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…

        Log in to Reply
        • Brad Dalton says

          April 25, 2014 at 7:48 pm

          Should be o.k.

          May need some tweaking but looks fine to do that.

          Log in to Reply
          • Tim says

            May 1, 2014 at 8:55 am

            Yup, works fine – thanks!

  5. Jeanni says

    March 13, 2014 at 8:30 pm

    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!

    Log in to Reply
  6. Dave says

    February 19, 2014 at 4:02 pm

    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.

    Log in to Reply
    • Brad Dalton says

      February 20, 2014 at 2:27 am

      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.

      Log in to Reply
  7. Bill Gram-Reefer says

    October 17, 2013 at 9:24 pm

    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?

    Log in to Reply
    • Bill Gram-Reefer says

      October 17, 2013 at 9:43 pm

      I had to remove the eleven40 grid loop and edited to

      >><?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 '<!-- end #home-top -->';
      		
      	}
      	
      }	
      
      genesis();
      &lt;&lt;&lt;

      Now to re-size in css

      Log in to Reply
    • Brad Dalton says

      October 18, 2013 at 3:06 pm

      Hi Bill

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

      Please clarify home bottom widgets.

      Log in to Reply
  8. Pete says

    October 13, 2013 at 5:01 am

    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.

    Log in to Reply
    • Brad Dalton says

      October 13, 2013 at 10:21 am

      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.

      Log in to Reply
  9. Zimbrul says

    October 10, 2013 at 10:12 am

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

    Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Advertise · WPEngine · Genesis · Log in

  • Access/Download Problems
  • Account Details
 

Loading Comments...
 

You must be logged in to post a comment.