Add Featured Widgets To Genesis 2.0 Sample Themes Home Page

Aug 23, 2013

—

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!

Comments

11 responses to “Add Featured Widgets To Genesis 2.0 Sample Themes Home Page”

Terence

October 11, 2013

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

Log in to Reply
1. Brad Dalton
  
  October 12, 2013
  
  I thought you where using the Epik child theme Terrence. Did you change themes?
  
  Log in to Reply
Seb Gates

September 7, 2013

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?

Log in to Reply
1. Brad Dalton
  
  September 7, 2013
  
  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/
  
  Log in to Reply
  1. Seb Gates
    
    September 7, 2013
    
    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
    
    Log in to Reply
    1. Brad Dalton
      
      September 7, 2013
      
      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.
      
      Log in to Reply
Christopher Meinck

August 23, 2013

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.

Log in to Reply
1. Brad Dalton
  
  August 23, 2013
  
  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.
  
  Log in to Reply
  1. Christopher Meinck
    
    August 23, 2013
    
    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.
    
    Log in to Reply
    1. Brad Dalton
      
      August 23, 2013
      
      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.
      
      Log in to Reply