Update on September 7, 2016: Follow Custom Genesis Featured Posts Widget plugin instead.
Update on October 06, 2016: Also check out https://sridharkatakam.com/relocate-titles-genesis-featured-posts-widgets-output/
Genesis comes built-in with a very handy ‘Genesis – Featured Posts’ widget that can be used to pull and display Posts with several filters/options in a widget area.
Screenshot:
Sample output of the above (with some custom styling):
Notice that the post title appears below the featured image. What if you want to move the title up, above the featured image like this?
This is when Genesis Custom Featured Post Widget plugin by Gary Jones comes handy. It essentially contains the (slightly modified) code that is behind the display of Featured Posts widget itself (defined in themes/genesis/lib/widgets/featured-post-widget.php). The slight modification is that code for printing the image is moved below that of title.
To use 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. That’s it. There is nothing else to do if all you want is to move the post title above featured image in Genesis Featured Posts. If you would like to make any other changes, you need to edit the plugin’s class-custom-featured-post.php.
Hi!
I am so confused. 🙂
Where does this go? I filled out the widget, but then I’m not sure what to drag it into. I’d like it to fit on the home page exactly where a post would go, except without all of the parts of a normal post. Maybe because I don’t have a widget area that can go under the nav bar? Using Dynamik w/Genesis.
Thanks Sridhar,
~Kitty
Are you trying to do something like this? http://cl.ly/image/1P2X3q0o2O3m
That’s a screenshot of homepage with DWB as the active theme.
Yes, pretty much… this would be ideal if the EZ widget on right was really the primary sidebar.
http://kittycasa.com/
This would be good if not a blog post OR I could remove all of the post features like entry-meta… and show full post (not an excerpt). http://lynnmckade.com/
Sooo, looks like your example may do the trick?
Thanks for replying Sridhar!
See http://www.sridharkatakam.com/showing-latest-posts-static-front-page-content-using-dynamik-extender/
The sidebar on the right is the primary sidebar, not EZ.
Nice! Will see how it works for me!
Thanks Sridhar,
~Kitty
This is pretty neat. I’m currently using Genesis Featured Amplified Widget plugin. It has more features, including positioning the image in featured post widget, and also supports CPT and Custom Tax.
I really hope this feature will be included in the core, and I’d suggest StudioPress to add support for CPT and Custom Tax too.
I think this is where I meant… I’d like to customize this in DWB, BUT my front page is custom…
Hi there, if I was doing this in DWB, what call out would I use? I have created my own widgets on the home page for the layout I want (been using wp for four years and was left hanging from a designer, so doing this on my own!)
Playing on my test site, and if I wanted this to sit IN Between my two custom widgets, the top left and top right, above the middle one, where or how would I call this? http:// edmondfritter . com (spaces on purpose)
I look forward to hearing from you! Your other tutorials worked like a gem!
How do you make the posts show horizontally instead of vertically? I have Genesis with the Serenity Child Theme and placed the Genesis-Featured Posts in the Featured Top Right, but the posts list one below the other instead of one beside each other like your sample. Please help.
Can you provide the URL of your site?
http://medicalofficemgr.com/
(it’s still in development)
Add this CSS: http://pastebin.com/raw.php?i=Z7a89dT7
I am also curious how you get your featured posts to display horizontally across the page instead of in a vertical list. I used to use Catalyst/Dynamik before I went to Genesis and they had a Category Excerpts widget which was essentially the Genesis Featured Posts widget, except it had a button to click so you could display the posts across the page instead of a vertical list. I’m not sure why they wouldn’t include that in the default options of the Genesis Featured Posts widget.
Anyway, how do you do that? And no, the site I’m developing is not public. Its not even on a server yet. I’m building it currently in Instant WordPress.
Thanks Sridhar, your tips are great.
I wrote CSS based on the code in Modern Portfolio’s style.css.
https://gist.github.com/srikat/7983859#file-gistfile5-css
Now a days I refer to my following notes for making blocks horizontal: http://pastebin.com/raw.php?i=3WK0N5Pp
Thanks for the reply. Unfortunately I am not clear on how to adapt the code you wrote for your site to work on mine. Simply pasting that CSS into my site (Genesis/DWB) doesn’t put the featured posts in a horizontal grid. Any other tips to assist someone like me with intermediate skills?
If you put the site online and give me a URL to look at, I shall check with Firebug and provide you the needed CSS.
Oh thank you Sridhar! I have put up a test page on my website illustrating the same thing I’m trying to accomplish on another site that isn’t public yet. URL: http://www.jasondavis.com/genesis-featured-posts-test/
Add this CSS:
#featuredpoststest .entry {
display: inline-block;
width: 150px;
overflow: hidden;
vertical-align: top;
padding: 2rem;
min-height: 250px;
}
I have a few tutorials to write on Dynamik but have to also take care of the projects.
I wish I get paid full time just to write tutorials on WordPress, Genesis and Dynamik..
THANK YOU THANK YOU THANK YOU. You are the only one I’ve found that could solve this issue since I transitioned from Catalyst to Genesis/DWB and lost the ability to use Catalyst Excerpts Widget.
yeah it’s a great idea..
Is there a way to move the post title below the entry meta in the featured post widgets but not in single posts?
[…] http://www.sridharkatakam.com/customize-output-genesis-featured-posts-widget/ […]
How do I get a “learn more” link if I’m using the excerpt field on the post? Thanks for any help.
Hi Sridhar. I recently installed Genesis/Dynamik, and started using the featured posts widget, but it looks like the default settings are not optimized to display probably. There is too much space between the featured posts and no item separator between them (you can see that on the link to my Website http://www.ConvertYourIdea.com). I’ve tried adding some custom CSS but nothing seems to work. Any suggestions? You can amazing content/articles! Thanks.
You need to write CSS to make the necessary adjustments.
Ex.:
Add
.sidebar .featuredpost .entry-header {
border-bottom: 1px dotted #999;
padding-bottom: 1rem;
}
.sidebar .featuredpost .post:last-child .entry-header {
border-bottom: none;
}
.sidebar.widget-area .featuredpost .post {
padding-bottom: 0;
padding-top: 1.5rem;
}
to get http://i.imgur.com/ZrWkAVQ.png
Wow. That worked like a charm! Thanks Sridhar. You’re a genius 🙂 One question: is there is any documentation for this anywhere as to what elements of CSS you can use for Genesis/Dynamik, or is that just standard CSS (not my area). I couldn’t find this info anywhere on the Genesis/Dynamik site. Best to you!
I do not know if there’s a cheatsheet showing various CSS elements you could target.
My advice is to learn CSS and use Firebug to inspect elements and write the required code.
Hi, I want only one change in the stock widget code. In fact I want to display the output title in h3 headings instead of H2. How can I do that? Please help.
Hi Sridhar,
I’m using Agency Pro theme, which has Genesis Featured Post widget built in. Got it working fine at the default full width with 380 x 380 images, 2 rows and 3 columns. What I want to achieve is a single row with 5 or 6 columns, 150 x 220px. And I want to put the widget into the custom widget area I created above content (not full width).
I’ve figured out how to make the images the right size and choose them from the options in the widget. But I can’t figure out how to alter the widget’s code to create the right size and number of columns.
I could just download and use the plugin instead of the built-in widget if that would be more customizable.
I hope my question makes sense. Thanks.
I’ve gotten it to display the featured posts and images in the proper size for my layout (via css). But still haven’t found where in the code it says to make 3 columns per row. I want 5 columns. When I view page source I see . But I can’t find any css that says #featured-post-3. Any ideas? Thanks!
Can you give the URL of any page in your site having the widget whose content you would like to display in 3 columns per row?
Here’s the url: http://www.terracomwebdesign.com/websites/gs2014/
What I’m trying to do is get 4 columns (actually I want 5, but first I’m trying to get 4 just to figure out how to do it).
There’s another discussion I’m involved in about this issue here: http://www.studiopress.com/forums/topic/customize-genesis-featured-posts-in-agency-pro/#post-94875. There’s some good background info there.
I want a clean slate.
Can you un-do/remove your edits of the attempt and let me know?
Hi Sridhar, sorry to disappear for a couple days. Do you mean re-upload the original Agency Pro and Genesis style and functions files?
Great write up! I’m wondering if you know how to change the layout so that instead of the default grid format, you can display each post on its own… with a featured image on the left, snippet of the post on the right and the read more tag below? I want to say that this widget USED to do this by default, but now it does the grid… I’m hoping you can help me! 🙂
It is still the default behavior of this in-built widget to display Posts one below the other. I am sure your theme has CSS (or perhaps you added in the past?) to position the results in a grid.
Aha! I see. I’ll go through the code and see if I can find the customization that’s been entered. Thanks SO much!
Hey Sridhar, thanks for this tutorial! It works great. Only problem I’m having is I have the featured posts widget in two different widget areas. I want the entry title above the image in one widget, but not the other. Is there any way to make Gary’s plugin apply conditionally to only one widget?
My question is essentially the same, though with additional detail:
how to configure the featured posts widget for two different widget areas, each on a different page, each with slightly different behavior?
Case 1: home page widget area (Agency Pro default)
Case 2: work page widget area
Thanks in advance!
[…] Gary Jones has created a handy plugin for Genesis called the Custom Featured Post Widget which can be used to customize the output of Genesis – Featured Posts widget. More details here. […]
Hi- I use the Runway theme for Genesis and I’m trying to set the “featured posts” in my footer horizontally. I read the other comments, but neither solution worked for my site. Is there another way to do it?
Thanks!
Hello Sridhar,
can you help me to realized one change on featured posts widget
in the agency pro theme? I will disable the link funktionality
in Home-Middle displayed posts. That should only to show
the featured pic and limited number of characters.
Thanks
Marco
Hi there and thank you for such an informative article. I didn’t see this addressed yet and was wondering how do you make the post icon round instead of square?
thanks in advance!!
Hello,
I am working on http://www.codeoffering.com/ . Using my own Genesis child theme. I’ve checked “Include the Featured Image?” . It should have shown the first image of a post. But it’s not showing the first image. If I set featured image, only then it shows that image. But I heard that Genesis automatically picks up the very first image of a post.
What’s wrong to my child theme? Please help me.
This was so incredibly helpful Sridhar (as usual). Thank you so much for putting this out there!!
I am using Lifestyle pro and it has featured posts option for widgets but they come up different heights how can I set a minimum height?
Thanks Sridhar for this useful post 🙂
Hello can you tip me on how to disable post meta info ( Categories and Tags) on homepage and single post (below post) of genesis eleven pro theme. which is based on Genesis frame work.
I am using the Eleven pro theme theme on clickableblog.com
Ejiga Godwin Jnr recently published How to Get a Free Custom Domain from 1and1.com
Follow http://my.studiopress.com/snippets/post-meta/#remove.
[…] 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 […]
Would it be possible to add “Show Pagination” option into Genesis Featured Posts? Like in FlexPro Themes: http://prntscr.com/cqd3ze
Regards,
Hi, is it possible to turn the middle widget into one column instead of three?
Regards
Björn
Can you elaborate?
Hello Sridhar,
I recently installed the Archived Post Status plugin so we could hide/archive older posts. Unfortunately, the Genesis Featured Posts widget still displays these archived posts on the website, which is not the behavior we want. Is there a way to get the widget to ignore/not display posts that are archived? I can build a child theme and add code if necessary.
Thank you!
Are you referring to https://wordpress.org/plugins/archived-post-status/ ?
I just gave it a try on my test site and do not have the issue you are facing.
Archived posts aren’t appearing in the Genesis Featured Posts widget output for non-logged in visitors.
Thank you, Sridhar! You are correct. Once I logged out I no longer saw the archived posts.
[…] Gary Jones has created a handy plugin for Genesis called the Custom Featured Post Widget which can be used to customize the output of Genesis – Featured Posts widget. More details here. […]