Widgets Side By Side in Genesis

Post author By Brad Dalton
Post date October 9, 2013
22 Comments on 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.

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.

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

22 replies on “Widgets Side By Side in Genesis”

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.

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

In which hook position?

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?

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

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!

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

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.

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

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

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

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…

Should be o.k.

May need some tweaking but looks fine to do that.

Yup, works fine – thanks!

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!

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.

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

&gt;&gt;&lt;?php

remove_action( &#039;genesis_loop&#039;, &#039;genesis_do_loop&#039; );

add_action( &#039;genesis_before_content&#039;, &#039;home_top_widgets&#039; );
 
function home_top_widgets() {
 
	if ( is_active_sidebar( &#039;top-left&#039; ) || is_active_sidebar( &#039;top-right&#039; ) ) {
	
		echo &#039;';
 
			genesis_widget_area( 'top-left', array(
			'before'=&gt; '',
			'after'	=&gt; '',
		) );
 
 
			genesis_widget_area( 'top-right', array(
			'before'=&gt; '',
			'after'	=&gt; '',
		) );
 
		echo '<!-- end #home-top -->';
		
	}
	
}	

genesis();
&lt;&lt;&lt;

Now to re-size in css

Hi Bill

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

Please clarify home bottom widgets.

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.

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

Mobile Responsiveness

22 replies on “Widgets Side By Side in Genesis”

Leave a Reply Cancel reply