Genesis Featured Posts Widget for Recent Posts with Images

Share this on:

default wordpress recent posts widget

The default WordPress Recent Posts widget just creates a list of your most recent posts. While there are plugins that you can add that will allow you use images for recent posts, you won’t need them, if you use the Genesis Framework by StudioPress. It comes with the Genesis – Featured Posts widget that can be used in any widget area to add full post content, excerpts with or without featured images, and posts for single categories and sorted with the usual WordPress sort options.

One of my favorite uses of Genesis – Featured Posts widget is to display recent posts or recent posts for a category in the sidebar with a small thumbnail image and only the title. So let’s look at some of the Genesis – Featured Posts widget settings to see what we can do.

Here is what the Genesis – Featured Posts widget looks like.

genesis featured posts widget

There are many options in this plugin; we’ll just review those that we need for this tutorial. The red numbers above are the main settings we’re using for the first recent posts:

  1. Add the Widget Title, in this case “Recent Posts”
  2. Choose a single category from the drop down or leave as All Categories, as here
  3. Choose the number of posts you want to use, in this case 3.
  4. Check Show Featured Image
  5. Image Size – Click the drop down to see if you have a size smaller than “thumbnail (150×150)”; if so choose it instead.
  6. Image alignment – Use Left for this first tutorial, but you can also choose None or Right.
  7. Check Show Post Title
  8. Content Type – This will depend on what you need, but for now choose “No Content”

WordPress Media (Image) Sizes

First let’s talk a bit about image sizes. WordPress themes use default image sizes that you can see if you go to your WordPress dashboard and click Settings > Media. The default image sizes are usually:

  • Thumbnail – 150px X 150px,
  • Medium – 300px X 300px
  • Large – 1024px X 1024px

Your theme will often set additional image sizes in the functions.php. We’ll look at image sizes more later. If you have a smaller thumbnail size than 150px X 150px, you may want to choose that instead of the default thumbnail size.

Recent Posts with Small Featured Images and Title

Using the Genesis – Featured Posts settings above, this is what it looks like in the Genesis Sample theme (Note that I added posts with images.). The images and titles seem a bit large at the default theme settings (left image), so we can edit either the style.css or add CSS to a custom css plugin, like the one in Jetpack to create the look on the right. (If you want to actually add a new, smaller image size, see the end of this tutorial.)

recent posts genesis sample images titles


This is the code to add to your style.css or a custom CSS plugin for the recent posts look above. Find the section labeled “Sidebars”, and at the end of the “Sidebars” section add:

/* Sidebar Genesis Featured Posts Widget */

.sidebar .featured-content .entry-title {
	font-size: 18px;
	font-size: 1.8rem;
}

.sidebar .featured-content img {
	width: 100px;
	margin-right: 12px;
	margin-right: 1.2rem;
}

.sidebar .featured-content a {
	border: 0;
}

The code above does the following to make the recent posts look like the second image:

  • makes .entry-title a bit smaller (was 24px)
  • makes the image (img) display smaller (100px, instead of 150px from widget)
  • removes the border on the links (a) because there was a line below the image

You can play around with this CSS to get the look you want for your theme.

Recent Posts with Small Featured Images, Title, and Content

recent posts genesis sample images titles content

Now let’s make another recent posts to show a bit more of each post. This time we’ll add an image, the post title, and a bit of content. Remember that you can add more than one Genesis – Featured Posts widget to your sidebar, if you want to use category posts.

Edit the settings in the Genesis – Featured Posts widget, as follows:

  1. Add the Widget Title “Recent Posts”
  2. Choose All Categories
  3. Choose 3 posts
  4. Check Show Featured Image
  5. Image Size – Choose “thumbnail (150×150)”.
  6. Image alignment – Use Left
  7. Check Show Post Title
  8. Content Type – Choose “Show Content Limit” and “Limit content to 60 characters”

Now add the following code to your style.css or custom CSS plugin, as before:

/* Sidebar Genesis Featured Posts Widget */

.sidebar .featured-content .entry-title {
	font-size: 16px;
	font-size: 1.6rem;
	margin: 0 0 .6rem;
}

.sidebar .featured-content img {
	width: 75px;
	margin-right: 12px;
	margin-right: 1.2rem;
}

.sidebar .featured-content .entry-content {
	line-height: 1.2;
}

.sidebar .featured-content a {
	border: 0;
}

The code above did the following to the recent posts with an image, title, and a bit of content:

  • makes the .entry-title a bit smaller (16px) than before
  • makes the image (img) display at 75px wide
  • changes the .entry-content line-height, so that it displays more compactly
  • removes the link border (a)

Again you can play around with this code to get the look you want for your theme.

Add a New Image Size to Your Theme Functions

If you want to actually add a new image size to your theme, you can edit your functions.php file. Open functions.php in a text editor. At the very bottom, add:

add_image_size('sidebar-featured', 100, 100, TRUE);

or

add_image_size('sidebar-featured', 75, 75, TRUE);

Save the file and then use FTP to upload it to your theme folder. (Note that this is not recommended, unless you have edited your functions.php and used FTP before. Explaining how to use FTP is outside the scope of this tutorial.)

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


photo of Marcy Diaz who owns Amethyst Website Design

Comments

61 responses to “Genesis Featured Posts Widget for Recent Posts with Images”

  1. Anjanette Avatar

    This was so helpful! Exactly what I needed to make the Featured Posts widgets work for me. Thank you! Would you be able to quickly tell me how to remove the horizontal lines between each feature? I am trying to figure it out, but looking at the whole style sheet is making me eyes swim. :(

    1. Marcy Diaz Avatar

      I’m glad it helped, Anjanette! I think for your theme, you would find this section in your stylesheet, style.css

      .featuredpage .page, .featuredpost .post {
          border-bottom: medium none;
          margin: 0 0 15px;
          overflow: hidden;
          padding: 0 0 40px;
          position: relative;
      }

      And you would add this line
      background: none;

      So it looks like this:

      .featuredpage .page, .featuredpost .post {
          border-bottom: medium none;
          margin: 0 0 15px;
          overflow: hidden;
          padding: 0 0 40px;
          position: relative;
          background: none;
      }
      1. Anjanette Avatar

        Perfect! That helped so much! And let me find the right area of the style sheet to play around with padding, etc. I love the way it looks now!

      2. Marcy Diaz Avatar

        That’s great. They really do look nice now!

  2. Steve Atwal Avatar
    Steve Atwal

    Hi Marcy. Excellent article! I couldn’t find a good post on this topic until I came across yours. I’m just finalizing my new website and I’ve decided to use Genesis/Dynamik on this one to simplify styling. Do you know if there is a good guide on which elements can be tweaked/changed for CSS styling for this widget? e.g. Which value do you use to reduce the gap between each article listed in the Featured Posts Widget? Which value do you use to change the link colour for those featured posts from the default black, as well as the font? Thanks!

    1. Marcy Diaz Avatar

      Thank you, Steve.
      The Featured Post and Pages Widgets pick up styles from your posts and pages or your entry or entry-content, so if you have a lot of space (top or bottom margins or padding) for the .entry or .entry-content or .post or .page, then the featured content will also have that margin and padding.
      You would target these specifically for your sidebar and the featured-content like in the tutorial.

      You could style the title color with
      .sidebar .featured-content .entry-title {
      color: #ff0000;
      }

      You will probably need to use custom CSS even though you’re using Dynamik, and I can’t be more specific in theory. If you have specific questions about styling, you can always ask in the StudioPress or Dynamik forums.

  3. Steve Atwal Avatar
    Steve Atwal

    BTW, Marcy, that code didn’t work for the “featured posts” Genesis widget (tried lots of variations of the “color” element):

    .sidebar .featured-content .entry-title {
    color: #ff0000;
    }

    Weird!

    1. Marcy Diaz Avatar

      Did you try
      .sidebar .featured-content .entry-title a {
      color: #ff0000;
      }

      You don’t have a link to your site, so I can’t see the exact selector to style. I’m just guessing. :)

      1. Steve Atwal Avatar
        Steve Atwal

        Hi Marcy. Tried that too.

        Best
        Steve

      2. Marcy Diaz Avatar

        In the sidebar of your theme, you would change the featured-post widget title color with:
        .featuredpage .page h2,
        .featuredpost .post h2,
        .featuredpage .page h2 a,
        .featuredpost .post h2 a {
        color: #ff0000;
        font-size: 1.6rem;
        }

        (although you probably don’t want to use #ff0000 – red)
        Each theme chooses different selectors to style (In WordPress, there are a number for each HTML element.)
        You can remove the section you added, if you use what I added above:
        .sidebar .featured-content .entry-title {
        font-size: 1.6rem;
        }

      3. Steve Atwal Avatar
        Steve Atwal

        Thanks Marcy. Will check that out. All the best!
        Steve

      4. Marcy Diaz Avatar

        You’re welcome, Steve.

  4. Tony Mace Avatar
    Tony Mace

    Thanks very much Marcy,

    Help out immensely and really calmed me down :)

    It’s a bit frustrating when you can’t figure something out for yourself, especially when it’s something such as the featured post widget that rally makes a huge difference to the overall appearance of the site.

    I really appreciate the code and tutorial.

    Thanks again, take care

    Tony

    1. Marcy Diaz Avatar

      You’re welcome, Tony. I’m glad I could help.

  5. Greg Saxton Avatar
    Greg Saxton

    Hi Marcy,

    Thanks for the tutorial! I was looking for exactly this information. I was wondering if you have any suggestions on how to fix the layout — you can see the code in action on this test post in the Featured Posts, v2 widget:

    I’ve pasted your code in using the Custom CSS plug-in but can’t seem to get it to look just right. The entry titles are different for each entry, etc. So, any suggestions would be great!

  6. Greg Saxton Avatar
    Greg Saxton

    Quick follow-up. I fixed some of it — another block of custom CSS I had was interfering with it. After deleting it now looks much better. Thanks!

    1. Marcy Diaz Avatar

      CSS can be a bit tricky that way sometimes. I’m glad you figured it out, Greg.

  7. Vijay Avatar

    Marcy,

    Thank you for a great tip. I was just wondering if I could add this to a tab widget on sidebar somehow where i can display recent as well as popular posts.

    1. Marcy Diaz Avatar

      You’re welcome, Vijay. I know there are plugins that create tabs in the sidebar, but I’ve never used one, and I’m not sure what they allow you to use.

  8. craig Avatar
    craig

    Hi Marcy,
    I’m very new at this and I hope you might be willing to help me, I do not understand where I am suppose to put this code to get the sidebar widget to work, I tried this before with another theme and got the WP white screen of death, little paranoid to say the least.

    Right now pics and tittles are too big
    Thanks

    1. Marcy Diaz Avatar

      Yes, you have to add some CSS to your theme. If you are worried, you can add the CSS to a plugin, instead of style.css. Choose one of these WordPress plugins: My Custom CSS by DarkWolf or Custom CSS by Dev7studios.

      Then try adding this CSS; it’s the first block of code I have, but edited for your older Genesis theme. I think it will work.

      /* Sidebar Genesis Featured Posts Widget */
      
      .sidebar .featured-content h2 {
      	font-size: 18px;
      	font-size: 1.8rem;
      }
      
      .sidebar .featured-content img {
      	width: 100px;
      	margin-right: 12px;
      	margin-right: 1.2rem;
      }
      
      .sidebar .featured-content a {
      	border: 0;
      }
  9. Sasha Stevens Avatar
    Sasha Stevens

    Awesome how-to. One of the easiest to follow I have seen. So, if I want this same widget in the footer area instead of sidebar. (I have footer 1, footer 2 and footer 3). I want to customize it with the css in footer 2. Instead of using .sidebar am I correct in thinking it should be .footer2 ?

    Thanks!

    1. Marcy Diaz Avatar

      I’m glad you like it, Sasha.
      I think, for your footer, you would want to substitute .footer-widgets-2 for .sidebar.
      I hope it works out for you!

  10. Chris Avatar

    Hello Marcy,

    Thank you for this helpful and well written article.

    Can you help me with an issue I’m having with the Genesis Featured Posts widget?

    The Genesis Featured Posts images and titles line up okay, but for some reason the first line of the description text is indented (using HTML non-breaking spaces and even a few empty spaces).

    I want to get that HTML and those spaces out of there so that the first line of the description will left justify as do the remaining lines.

    Do you know how to do this?

    When I inspect the element I get this in the inspector:

    `

    ” 

     

    Description text here…

    `

    I just want the description to start at the beginning without all the spaces and non-breaking spaces.

    Thank you,

    Chris

    1. Marcy Diaz Avatar

      Chris, the code didn’t come through even though the comments allow it, so I don’t know if you have an easy-to-fix issue or not. This isn’t really the place to ask support questions though.

      It’s best to submit a support ticket to StudioPress on Genesis or Genesis plugins or to ask in their forums. That way, you get the best help possible.

      I hope you get your issue sorted!

  11. Colleen Avatar

    Hello Marcy,
    Thanks for this tutorial. I’m using the featured posts widget in my footer area (just added it on the widget page.) I added the code to the sidebar css. I’m new to coding so not sure if anything changed but the widget appears in the right place except the font size of the title is the same as it appears on the post (huge!). Have I put the code in the right place?
    Hope you can help :)
    Colleen

    1. Marcy Diaz Avatar

      Thanks for stopping by, Colleen.
      You will probably need to use
      .footer-widgets .featured-content .entry-title
      instead of
      .sidebar .featured-content .entry-title
      to target the titles in your footer widgets.

      >>Corrected CSS

      1. Colleen Avatar

        Hi Marcy, not sure if i understand what you mean. I replaced just the code .footer-widget … as you said, but nothing has changed.
        Hope you can help
        Colleen

      2. Marcy Diaz Avatar

        It’s .footer-widgets with an s; I corrected the previous reply.
        This CSS should work:

        /* Footer Widgets Genesis Featured Posts Widget */
        
        .footer-widgets .featured-content .entry-title {
        	font-size: 18px;
        	font-size: 1.8rem;
        }
        
        .footer-widgets .featured-content img {
        	width: 100px;
        	margin-right: 12px;
        	margin-right: 1.2rem;
        }
        
        .footer-widgets .featured-content a {
        	border: 0;
        }
      3. Colleen Avatar

        Thanks for your help Marcy. This didn’t work and my knowledge of the css is limited so I’ve deleted the widget from the footer. I’ve decided to use the recent posts widget which unfortunately it doesn’t allow an image thumbnail.

        Appreciate your time
        Colleen

  12. Karen Avatar
    Karen

    Thank you Marcy for a great article. I was just searching for the web to find out how to fix my spacing for my sidebar widget use of Featured Posts. I went to DynamikDesign/Sidebars and adjusted my bottom padding in the Sidebar List-Style Margins, Sidebar List-Style Padding, Sidebar Content Padding settings. Worked perfectly without going into the CSS.
    Thanks so much for a great article. I will save this for future reference.
    All the best, Karen

    1. Marcy Diaz Avatar

      That’s great to know how to do it using Dynamik. Thanks, Karen.

  13. Mark Avatar

    Thanks for your very helpful article. I’ve used your code successfully. There is one thing I cannot figure out though. I’d like to reduce the margin between the articles displayed. However, I can’t find the class for that. Firebug simply gives me this:

    html body.home div.site-container div.site-inner div.content-sidebar-wrap aside.sidebar section#featured-post-3.widget div.widget-wrap article.post-1654

    I don’t want to code something that affects all my widgets, just this one. Any ideas?

    1. Marcy Diaz Avatar

      It looks nice, Mark, and you got the spacing sorted too.

  14. Yvonne Nachtigal Avatar

    Hi there Marcy,
    I couldn’t get this to work righ. Do you happen to have a second to glance at it? hisheavenlyarmies.com
    The featured post images are real spread out. I’d like them to look more like your first example.
    Any suggestions? You probably need to see the css? \:o|

    1. Marcy Diaz Avatar

      I’m sorry you couldn’t get this to work, but I couldn’t see where you had tried it. You have a lot of individual featured post and page widgets (mostly individual Category posts) in your sidebar. That isn’t the same thing as this post which shows just a bit about styling several posts in the same featured posts widget.

  15. Yvonne Nachtigal Avatar

    Oh I see. Thank you for replying! And I’m so sorry, I was messing around in there and obviously deleted your code snippet before you had a chance to get to it.
    Do you have any idea how to style these Featured Post Widgets (I have several, for different categories) so I don’t have all the space above and below? :o\

    1. Marcy Diaz Avatar

      Yvonne,
      The best place to get specific help with Genesis themes is on their forum – studiopress.com/forums/

      1. Yvonne Nachtigal Avatar

        Thanks Marcy! I appreciate your time!

  16. Natasha von Geldern Avatar

    Hi Marcy,

    I am using the Featured Posts widget to display posts with the most comments in my home bottom section. worldwanderingkiwi.com

    But after the first row of posts the spacing goes all awry and big white spaces appear. Any idea what I am doing wrong – hoping it is something simple!

    Thanks,
    Natasha

    1. Marcy Diaz Avatar

      Thanks for stopping by, Natasha.
      What you see on your theme happens when a new row doesn’t clear the first row. You see that your 4th post runs into the bottom of the second post.
      You aren’t using the Genesis Featured Post widget, so that has nothing to do with this post.
      You could try to ask for help from your theme developer.
      All the best! :)

  17. Shea Avatar

    Hi Marcy,
    This is a great tutorial that worked perfectly for me. I do have a question that I can’t find an answer for however. I have the widget set to show my latest posts by date. Unfortunately at the top of the list is my sticky post for the home page which should not be showing up based on the date. Is there anyway to eliminate the sticky post from displaying in the widget? I’ve posted this question in Studio Press and never received an answer.

    Shea

    1. Marcy Diaz Avatar

      I’m glad the tutorial worked for you, Shea.

      Did you try setting “Number of Posts to Offset:” to 1 instead of 0?
      Also Travis Smith has a plugin that is the Genesis Featured Posts with more options – Genesis Sandbox Featured Content Widget. You can choose to include or exclude posts based on ID, so that may work for you. I don’t use sticky posts, so I’m not sure.

      1. Shea Avatar

        Well I tried setting the offset to 1 but it just left out my latest post, not the sticky. I was trying to avoid using a plugin because your tips here made such a nice difference.

        Thanks!

      2. Marcy Diaz Avatar

        Well, they are called sticky! :)

        You could try in your style.css

        .sidebar .featured-content .sticky {
           display: none !important;
        }

        The !important may not be needed.

      3. Shea Avatar

        yeah!! That did it Marcy. Thanks so much.

      4. Marcy Diaz Avatar

        That’s great!

      5. Nika Avatar
        Nika

        Hi Marcy! I’ve been trying to figure this out for a week now, thank goodness I found your post! :) Thank you so much, this helped hide that sneaky sticky post. <3

      6. Marcy Diaz Avatar

        I’m glad it helped, Nika!

  18. Mudassar Avatar
    Mudassar

    Hi Marcy,
    It was really helpful. I was wondering if you could tell the solution to place “title” of the post before image. Normally if increase the image size, the title comes under the image. I want it to show above the image in sidebar. Can you help me with this?

    1. Marcy Diaz Avatar

      Thanks for the comment, Mudassar. The easiest method to control images placement is to use the Genesis Sandbox Featured Content Widget. It allows custom post types too.
      https://wordpress.org/plugins/genesis-featured-content-widget/

  19. Annette @ InAllYouDo Avatar

    Hi Marcy. Your tutorial is FANTASTIC and just what I need to help align my sidebars. But, unfortunately only the left one is aligned. How can I get the right one to do the same? Thanks for your help!!

    1. Marcy Diaz Avatar

      I’m glad the tutorial helped, Annette!

      I can’t really see all your code because right-click is disabled.
      In general, you can try this:
      1. Check to make sure that in ALL the Genesis Featured Post widgets (Do you have four?), you have the featured image set to “Left”
      2. In the tutorial where I use .sidebar, you can try using .home-middle. That should target both the left and right sides.

      All the best!

      1. Annette @ InAllYouDo Avatar

        Well…DUH!!! The images weren’t set to “left”. I feel silly now!! Thanks so much!! My eyes were crossing last night trying to read the code and fix it. Glad it was an easy one!! Thanks so much!!

      2. Marcy Diaz Avatar

        Sometimes it’s the simple that gets us. :)
        Glad you got it sorted!

  20. vinny Avatar
    vinny

    Awesome article that helped solve my featured blog wrong link problem. Your settings corrected my error. TY so much for your time to help!

    1. Marcy Diaz Avatar

      You’re welcome, Vinny! I’m glad it was helpful.

  21. Website Hosting Avatar

    Hi Marcy. Thank you for this tutorial. It was very useful and informative. Very well written!

  22. Janine Avatar

    Hi Marcy,

    I have the Genesis theme and have the recent post option. My settings are exactly what you recommend, but for some reason, some of my posts aren’t showing up. I have blank areas. I have it set to show 12 different posts. Any help would be greatly appreciated.

    Thanks!

    Janine

    1. Marcy Diaz Avatar

      Hi, I looked at your site, and I see the Genesis Featured Posts with no empty areas. Perhaps they didn’t show at first due to caching. But what you’ve done looks great!

  23. Stanley Avatar
    Stanley

    This is exactly what i was looking for. Thank you so much for this

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.