• 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

Custom Portfolio Template With Hover Effects Using Genesis Featured Posts Widget

This post includes all the code which creates a custom portfolio style template that works on the Genesis theme framework.

The code creates a widget area which you simply populate with the Genesis featured posts widget and configure the widget settings to your own liking.

When you hover over the featured images, the title and excerpt appear with a transparent background. The effect is the same as what the StudioPress Agency Pro themes front page displays for the home middle widget area.

The code has been taken from this theme and modified to work with a custom page template i have created.

Here’s an example which also includes a background image using Backstretch(optional):

background hover effects

Check out the full page screen shot example at the end of this post.

Create The Page Template

Register for full access


And here’s the mobile View @630 px width which looks pretty slick in my opinion.

ipad mobile responsive

Here’s the mobile View @267 px width.

iphone mobile responsive view

Note: The background will display the full length of the post when viewed on any size screen. The reason it doesn’t in these screenshots is because it uses Javascript which doesn’t work when using a screenshot app like Awesome screenshot.

Setup

Once you’ve added all the code, you can simply follow the setup details for the Agency Pro themes Background and Middle home widgets which you can access from the Download area in my studioPress.

Go to My StudioPress > Downloads > Agency Pro > Theme Setup.

Agency Pro Theme Setup

Don’t Own Genesis or The Agency Pro Theme?

Returning customers get 25% off all StudioPress themes.

Reader Interactions

Comments

  1. exelexys says

    April 4, 2014 at 9:51 pm

    Great work. Functions beautifully.

    Not to be nitpicky but there’s a duplicate CSS selector for the media query 800px you may want to remove:

    .featured-widgets .featuredpost .entry {
    	min-height: 320px;
    }

    Question:

    When clicking on one of the squares, instead of navigating to a post, what would be required to display a popup image gallery? Any idea how to achieve this?

    Thanks in advance

    Log in to Reply
    • Brad Dalton says

      April 5, 2014 at 2:25 am

      The 2 classes in that rule are different.

      One is a custom body class added to the template and the other is for the featured posts widget.

      To display a gallery, you would need to add a fair amount of custom code.

      Log in to Reply
      • exelexys says

        April 5, 2014 at 3:17 am

        Understood. Though it shouldn’t matter, the last rule seems to have been added twice:

        @media only screen and (max-width: 800px) {

        .wpsites-featured-widgets .wrap {
        max-width: 640px;
        }
        .featured-widgets .featuredpost .entry {
        min-height: 320px;
        }
        .featured-widgets .featuredpost .entry {
        min-height: 320px;
        }

        Log in to Reply
        • Brad Dalton says

          April 5, 2014 at 3:28 am

          Yes, you are right. Updated now. Thanks for the pickup.

          Log in to Reply
          • exelexys says

            April 5, 2014 at 4:02 am

            No worries. Any idea how to approach integrating a lightbox gallery with these featured posts blocks?

          • Brad Dalton says

            April 5, 2014 at 4:38 am

            I would look for another theme which includes this feature and inspect the code.

            There’s are many plugins which also include this effect for images like Jetpack.

          • exelexys says

            April 5, 2014 at 4:49 am

            Will do. Have found lots of lightbox plugins but haven’t found one with hover effects that display text like these featured post blocks do. =(

          • Brad Dalton says

            April 5, 2014 at 5:44 am

            Me either. Its a good question and something i should write about once i have a good solution.

  2. Simon says

    March 31, 2014 at 8:12 am

    “Try the Genesis Featured Widget Amplified plugin http://wordpress.org/plugins/genesis-featured-widget-amplified/”

    I’m using the above plugin. The only part I’m struggling with is adding post details over the image when a user hovers.

    Thanks,

    Simon

    Log in to Reply
    • Brad Dalton says

      March 31, 2014 at 8:27 am

      Never suggested you use that plugin for adding hover effects as its not needed.

      You may need to use different classes as that plugin may not use the same classes as the Genesis Featured Posts widget.

      Log in to Reply
  3. Simon says

    March 12, 2014 at 4:23 pm

    Hi again,

    Where can i change to post taxonomy?

    many thanks,

    Simon

    Log in to Reply
    • Brad Dalton says

      March 12, 2014 at 4:58 pm

      Sorry but your question does not make sense. Please clarify.

      Log in to Reply
      • Simon says

        March 12, 2014 at 5:02 pm

        Thanks for getting back to me so quickly.

        I created custom post types for portfolio items. I wish to display these on the homepage in a a widget along with other widgets as opposed to a custom page. Could you point me in the right direction to achieve this. I really like the hover layout that you have emulated from Agency Pro

        Log in to Reply
        • Brad Dalton says

          March 12, 2014 at 5:32 pm

          Try the Genesis Featured Widget Amplified plugin http://wordpress.org/plugins/genesis-featured-widget-amplified/

          Log in to Reply
          • Mark says

            March 30, 2014 at 12:17 pm

            Dear Brad,

            I have the same question as Simon. I would like to use the Featured Post widget for my pages, in the same setup. On the homepage middle section of my Agency Pro theme.

            The genesis-featured-widget-amplified seems to be bugged because i cant select the page option.

            What to do?

            thank you,

            Mark

          • Brad Dalton says

            March 30, 2014 at 9:51 pm

            You use the Genesis Featured Pages widget however you will need to modify the classes in the CSS code as they are different for featured posts than featured pages.

          • Simon says

            March 31, 2014 at 8:05 am

            Hi Brad,

            I used the plugin you suggested. It would be great if you were thinking of a tutorial if you could show us how to do the hover effect. I’m butchering the code at the moment and i cant get the grid to play nice of display the post name over the image as per the Agency style grid.

            thanks,

            Simon

          • Brad Dalton says

            March 31, 2014 at 8:09 am

            Which plugin Simon?

            I didn’t suggest using a plugin for this as its not needed.

  4. Simon says

    March 12, 2014 at 4:11 pm

    Hi, great tutorial. Might be a stupid question but does “featured_widgets.php” create a new page or is it used for the widget area. So my question is do I need to have a custom homepage for this to work?

    Log in to Reply
    • Brad Dalton says

      March 12, 2014 at 4:57 pm

      Hello Simon

      It creates a new page template which you can select from the Page Attributes on any page.

      Log in to Reply
  5. Josh White says

    January 22, 2014 at 12:44 am

    I’ve been going crazy for days trying how to figure out how to add a portfolio page to agency pro that is similar to the home middle widget. This saved me so much time and frustration, works perfectly. YOU ARE AWESOME!!

    Log in to Reply
  6. Roy says

    November 28, 2013 at 5:36 pm

    Wow. You are so good.

    I was already using the Agency Pro theme and wanted to use the Featured Post widget on another page. Once I followed your instructions accurately, it worked like a charm.

    So, to others who use this, it works on the Agency Pro theme, including mobile too !

    Thank you !

    Log in to Reply
    • Brad Dalton says

      November 28, 2013 at 5:44 pm

      Thanks Roy.

      Wasn’t having a great day and you made me feel better! hahaha

      Log in to Reply
  7. Andrea Arden says

    November 1, 2013 at 7:28 pm

    Brad, thank you very much for consistently posting such helpful content on your site. Every day, I look forward to seeing what great topic you’ve chosen to write about. I’m often delighted to find that it’s something I was just thinking I wanted to know!

    is there a way to have the images in this grid link to external sites instead of internal posts?

    Log in to Reply
    • Brad Dalton says

      November 1, 2013 at 7:43 pm

      Hello Andrea

      Thanks for the kind words.

      I don’t think there is an easy way to do that.

      I know you can do it when using the native WordPress gallery but not easily done when using the Genesis featured posts widget.

      Log in to Reply
    • Brian Dusablon says

      June 5, 2014 at 9:45 pm

      You could use a redirect plugin and redirect the post to the external site.

      Log in to Reply
    • Brad Dalton says

      June 5, 2014 at 10:30 pm

      Brian suggested using a redirect plugin which you could try.

      If you want to redirect, you can use the built in redirect option included in the Genesis SEO settings or you could use a small PHP code snippet for redirecting but it won’t be dynamic as your posts will change.

      The ultimate solution is to modify the plugin.

      Log in to Reply
      • Jodi Stammer says

        June 12, 2014 at 9:43 pm

        I think you could use the Genesis Featured Widget Amplified plugin, then set a custom field with a link. But I suppose that would link all featured posts to the same custom URL. I haven’t tried it, but here’s some info …

        http://wordpress.org/support/topic/plugin-genesis-featured-widget-amplified-custom-link-to-imagepost-title-does-not-seem-to-function?replies=6

        Log in to Reply
  8. Michael Angelo Worthen says

    October 31, 2013 at 6:15 pm

    I just wanted to say thank you for your great posts, Brad! I’m a big fan. I’m looking forward to utilizing this one very soon. 🙂

    Log in to Reply
    • Brad Dalton says

      June 5, 2014 at 10:31 pm

      Thanks Michael. Sorry for the late reply.

      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.