In this post, i’ll provide all the working PHP & CSS code i have tested which adds 3 horizontal widgets side by side after the nav menu in the Genesis 2.0 Sample theme by StudioPress.
Click Any Images To Enlarge
The advantage of using this method over others is that you can add more than 3 widgets simply by changing the settings of the Genesis featured posts widget or Genesis featured pages widget.
The code includes:
- PHP for your child themes functions.php file
- PHP for a new home.php file
- CSS for your child themes style.css file
Code
What to do with the code:
- The functions.php code should be pasted at the end of your child themes functions.php file.
- The home.php code goes in a new file which you can create using a code editor like Notepad++ and upload to your child themes folder.
- The CSS code needs to be pasted at the end of your child themes style.css file and you can change the hex code values for the colors if you wish.
Genesis Widget Settings
The above code creates a new widget where you can use these settings for the Genesis featured posts widget:
You could also display the standard loop after your home page widgets or even a grid loop.
Check out the hover colour for the read more link buttons!
Hi Brad,
Do you know if something changed in 3.7?
For some reason its not seeing the home.php.
Terence.
PHP Version: 5.3.27
WordPress Version: 3.7-beta2-25760
Genesis Version: 2.0.1
Child Theme Version: Genesis Sample Theme 2.0.1
I thought you where using the Epik child theme Terrence. Did you change themes?
Hi Brad, I quick question: When I use the featured post or page widget for Genesis, everything looks good if the image is full width (like your design). When I choose to use the Featured image 150 x 150 and align it left. The text runs up to the image and does not wrap itself around the image making the layout look awful. Any ideas?
Hi Seb.
It simply hasn’t been designed for what you want it to do.
The code has been written to add a portfolio style layout on the home page similar to adding a portfolio template.
If you wanted to add smaller images and wrap the text on any portfolio style page, it simply won’t work.
Try adding 150px thumbnail images to any of the StudioPress themes which include a portfolio page and it won’t work.
What you would need is a grid style home page or widget areas with different CSS coding. http://wpsites.net/web-design/using-the-genesis-grid-loop-for-different-home-post-layouts/
Thanks Brad. I have recently bought a plug in called Views from the same people that made Types. I can make and style Post Teasers in a View using their plugin to achieve this but I would have rather kept using Genesis software if possible.
Thanks again
How about creating excerpts in a grid? Can the plugin do that?
If not, you can simply use the Grid code from another themes or follow the link which provides all the code you need.
Brad, excellent tutorial and definitely something I need on my site. I’ve attempted to setup on a test site, but having some trouble. Is the home.php file a completely new file? If so, does that sit in the root of the Genesis folder or the sample child template folder.
I’m able to set up the widget to display images, but two issues remain. First, the images are showing full-size, rather than the 340×220. Is there a thumbnail rebuild setting that maybe I’m missing in WordPress? Also, the posts that typically fill my homepage are gone. If I remove the widget or set to 0, the posts come back.
Thanks for great code and your help.
Hi Christopher
Yes, its a new file which you create using a text editor like Notepad++ and then upload to your child themes root directory.
Genesis is NEVER edited or modified in any way.
You will need to add the correct size images as featured images or use a plugin like regenerate images. You will need to select the correct sized images from the widget settings and it always works best when you crop/resize images before adding as featured images.
You could also add the standard loop for your posts or a custom loop/gird loop below the widgets. That’s not covered in this tutorial and is a separate issue.
Thanks. I’ll have to wait for the next tutorial. ( ;
I have no idea how to add a standard loop below the widgets.
BTW, as a heads up, the link I received in your WordPress email was 404ing.
Thanks again.
No worries Christopher.
Yes, Jetpack has a bug at the moment that they are working on which effects the Read More link in email subscriptions.
Thanks for the feedback.