Sridhar Katakam

Genesis and WordPress Tutorials

Custom Genesis Featured Posts Widget plugin

by 37 Comments

Updated on July 27, 2020 for Genesis 3.3.2.

In the past Gary Jones has kindly created a plugin when I asked for his help in customizing the standard Featured Posts widget that Genesis comes shipped with.

I have now forked and updated it to match the code in the current latest version of Genesis, 2.3.1.

How to download the plugin?

Head on over to this gist and download/save/create both the needed php files. Place them in a directory named custom-featured-post-widget in wp-content/plugins. Go to the list of plugins in dashboard and activate the plugin.

What does the plugin do?

Nothing.

When you activate the plugin there isn’t going to be anything different. Use this functionality plugin when you want to customize the output of Genesis Featured Posts widget(s). The file to modify is class-custom-featured-post.php.

Note that this update does not relocate the titles like the old one did. So it really is like a blank canvas to make changes to Genesis Featured Posts widget.

Usage Examples:

How to relocate titles in Genesis Featured Posts widgets’ output

Adding a NEW label for Posts published in the last x number of days in Genesis

How to exclude Posts having a specific tag from Genesis Featured Posts

How to overlay Title, Post Info and Excerpt on Featured Image in a Genesis Featured Posts Grid

How to add a Read More button below content/excerpts in Genesis Featured Posts

  • Thanks for updating this! I just implemented it and then swapped the code around to move the titles up above the image. I found this post via your old post about moving the titles, then Gary’s code, linking to your fork, then linking back to here, so you may want to update that old post about customizing the widget to link directly here. 🙂

    Reply

  • Thanks for updating this Sridhar. I’m not as skilled as some with the php code. I have the code in wordpress as a plugin, but I’m not sure where to make edits so that the featured post title appears above the featured image, like in the original version. What do I have to edit in the class-custom-featured-post file? Thanks,

    Reply

  • Hi Sridhar,

    I am using LifetsylePro, I was using the V1.0 to relocate the titles to above the Featured Image.

    How do I relocate the titles since this plugin no longer does so?

    Reply

  • Great! You saved my day! It’s incredibile that Genesis doesn’t provide a hook to customize the output of the featured posts Widget: some website fully rely on this to build the homepage!

    Reply

  • First of all, thank you for this plugin!

    However, I’ve been busy the last two hours trying to move the entry-meta above the title…to no avail! Could someone please point me in the right direction. Where to pass the $args[‘before_title]? Or should it be $before_title?

    Needless to say, I’m no ninja at PHP.

    Reply

  • Thanks for the plugin and your work enlightening Genesis users!
    I’ve been trying to modify the original Genesis Featured Posts with CSS only, to move header and contents over the image, but then the link to the post is partialy blocked. I’ve fought with that for a week until I found your mod.
    Now I’m trying to edit the mod to nest at least the

    <

    header> element and post info inside the element containing the image, leaving it as a background with CSS but keeping the link clickable. But my plan is failing hopelessly because of my really poor php skills.
    Any advice?

    Reply

    • Your HTML/PHP code seems to have been cut off. Can you paste it at pastebin.com and share the link?

      Also, do you have a screenshot or mockup of what you are trying to do?

      Reply

      • Yes, I noticed that the html tags appear broken, but now I can’t edit the post. Feel free to strip any tags or anything.
        Here is the full post content: https://pastebin.com/iBGKUK4A
        I’m trying to build a sort of portfolio looking post grid. It started as a simple project, and I could use a third party plugin but now has become a personal challenge.
        Here is a screenshot of how it looks so far :
        http://imgur.com/a/u88LT
        Its overall look is ok, but it has problems with the contents partially blocking the link below. Titles and content will be hidden and show up only when hovering (now aren’t totally hidden while still improving the css).

        Reply

          • Yes, looks similar to what I have in mind, a hidden content over the image, and a css defined behavior shows the content: title, tags and (maybe) a brief excerpt.
            But in my idea the contents are defined in the blog side, and only the posts with a particular category or tag are shown in the grid, so the Genesis Featured Posts looked as the perfect candidate.
            That contents and posts already exist in the website, so in theory, this would be a time-saving effort (I didn’t expect the problems and the need to mess with php).

          • That’s very similar to what I’ve got right now. Notice that the link below is blocked in the areas with text, such as the description and post date.
            Correct me if I’m wrong, but I think that the problem there is that the .entry-overlay element (enclosing the .entry-title, .entry-meta and .entry-content) is outside the “a” tag. If that .entry-title and its contents were inside the “a” tag too, everything would behave as a single button link. Maybe the “author”, “read more” links wouldn’t work, but I don’t need them.
            Anyway, I started this thread just asking for some advice, and now I think that I’m beggining to steal too much of your time (thank you!). I can leave averything as is now, it looks good, I just wanted to improve a bit the interaction, but feel free to close this topic at any time if you wish.

          • aah.

            That is do-able by modifying this custom plugin for the Genesis Featured Posts but is not recommended imo since it’s too much code to un-do.

            A better way would be to write custom PHP for placing the overlay inside the anchor tag as you mention using Flexible Posts Widget.

            You can see several examples of implementing this at https://sridharkatakam.com/?s=flexible+posts+widget.

            This is more close to what you want: https://sridharkatakam.com/responsive-featured-posts-grid-with-titles-below-images-and-excerpts-overlay-on-hover-in-genesis/

            Unfortunately, most of these are for paid members only.

          • Thanks anyway.
            I follow your tutorials quite often, and have thought of purchasing the membership some times, but I work more as a graphic designer and I’m not enough into wordpress development to be able to spend that money in it yet. And before maybe I should take some lessons on php basics.

            Thanks again for your time.

  • How do I differentiate two featured post on the same page?

    Example:
    One Featured Post widget at the top of the page (used to show only one post and treated as a latest featured post)

    One other Featured Post widget that shows 5 posts (width different markup from the first).

    Is there a way to have two different custom HTML?

    Reply

  • I’m looking for a solution that wraps the excerpt from Genesis featured post widget in its permalink. I realise that the title can be a link, as can the photo and of course there is the ‘read more’ option. However, for content reasons we prefer not to show the post’s title and the read more for visual reasons. Any advice/help much appreciated.
    You can see the heavy use of the widget on our site’s home page
    I know a bit about coding but not too much…

    Reply

  • Hi! Thank you for sharing your expertise. I have installed this plugin, and would like to modify the output of my featured images to add the data-pin-nopin=”true” attribute to those images. Do you have any thoughts or suggestions on how to do so? Thank you.

    Reply

  • Thank you so much for this and all of your tutorials!

    How can I set the first displayed post be a sticky post, if there is a sticky post in the selected category?

    Reply
    • >