WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

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

  2. 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?

  3. 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.

  4. 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

  5. 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!

  6. 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.

    • 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.

  7. 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?

    • 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

  8. 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.

    • 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.

Leave a Reply