Add Featured Widgets To Genesis 2.0 Sample Themes Home Page

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

with menu

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.

home page widgets

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:

  1. The functions.php code should be pasted at the end of your child themes functions.php file.
  2. 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.
  3. 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:

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 color for the read more link buttons!

Never Miss a Tip from WP Sites

Get my latest web design tutorials, elegant coding solutions & useful tips.

5 Reasons Mad Mimi Works Better

mad-mimi
  1. Sends From Your Email Address - More personal & higher open rate
  2. Cheapest - $42 for list of 10,000 emails, unlimited sends
  3. Ease of Use - The easiest system to create & setup campaigns
  4. RSS to E-Mail - Auto send list of latest posts
  5. Auto Send Any Number of Days - enables you to offer multiple newsletters at different frequencies.

Click here to create a free account.

Comments

  1. Terence says

    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

  2. Seb Gates says

    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?

    • Brad Dalton says

      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/

      • Seb Gates says

        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

        • Brad Dalton says

          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.

  3. Christopher Meinck says

    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.

    • Brad Dalton says

      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.

      • Christopher Meinck says

        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.

  4. Brad Dalton says

    You will need to tweak the code to make it work on different themes as they are all coded slightly differently.

Leave a Reply

Your feedback is always appreciated.

Your feedback is always welcome & appreciated however WP Sites does not reply to anonymous comment authors or approve loaded questions. Members get answers to unlimited questions.