• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

Related Tutorials

  • Horizontal Display of Genesis Featured Posts in One Widget Area

Reader Interactions

Comments

  1. Terence says

    October 11, 2013 at 5:51 pm

    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
    • Brad Dalton says

      October 12, 2013 at 1:53 am

      I thought you where using the Epik child theme Terrence. Did you change themes?

      Log in to Reply
  2. Seb Gates says

    September 7, 2013 at 1:40 pm

    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
    • Brad Dalton says

      September 7, 2013 at 1:56 pm

      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
      • Seb Gates says

        September 7, 2013 at 4:38 pm

        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
        • Brad Dalton says

          September 7, 2013 at 5:10 pm

          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
  3. Christopher Meinck says

    August 23, 2013 at 3:26 pm

    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
    • Brad Dalton says

      August 23, 2013 at 7:11 pm

      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
      • Christopher Meinck says

        August 23, 2013 at 8:03 pm

        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
        • Brad Dalton says

          August 23, 2013 at 8:13 pm

          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

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.