Add 2 Widgets Inline Before The Loop On Home Page Of The Education Theme

In this tutorial, i’ll show you how best to add 2 widgets inline before the Loop.

This code has been tested using the Education child theme by StudioPress and may work on other themes ‘as is’ or with a slight amount of tweaking. More on that later.

Kevin asked this question on the StudioPress Community Forums:

On this site Pickering Middle School I have a featured widget called ‘PICKERING NEWS HIGHLIGHTS’. I’d like to split that into two columns – one half for the news and one for daily/weekly announcement. I know I can set the width to 50% on the home-featured class but how do I get a second column next to it?

Here’s all the code which needs to be copied from the view raw links and pasted into the files each code block is marked with.

1. The functions.php file goes at the end of your child themes functions.php file.
2. The home.php code goes at the end of your child themes home.php file before the closing genesis() tag
3. The style.css code goes near the end of your child themes style.css file before the start of the Media Queries.
4. The mobile responsive.css needs to be pasted in the Media Queries section of your style.css file near the end of the file.

Note: I’ve forced the full width layout on the home page however this is optional and you can remove this code if you like.

Simply remove this code from the home.php file code in the above Gist.

add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

And here’s what it would look like:

If you’re having problems using this code on other themes, try reducing the percentage value for the width for each widget in the CSS code.