WP SITES

2952 Tutorials & 191 Plugins
Quote

Add Featured Widgets To Genesis 2.0 Sample Themes Home Page

—

by

Brad Dalton

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

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

  1. Terence Avatar
    Terence

    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

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

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

      Reply
  2. Seb Gates Avatar
    Seb Gates

    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?

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      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/

      Reply
      1. Seb Gates Avatar
        Seb Gates

        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

        Reply
        1. Brad Dalton Avatar
          Brad Dalton

          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.

          Reply
  3. Christopher Meinck Avatar
    Christopher Meinck

    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.

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      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.

      Reply
      1. Christopher Meinck Avatar
        Christopher Meinck

        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.

        Reply
        1. Brad Dalton Avatar
          Brad Dalton

          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.

          Reply

Was This Tutorial Helpful?