Genesis Featured Posts Widget for Recent Posts with Images

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


Comments

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

  1. Anjanette says:

    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. :(

    • Marcy Diaz says:

      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;
      }
  2. Steve Atwal says:

    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!

    • Marcy Diaz says:

      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 says:

    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!

    • Marcy Diaz says:

      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. :)

      • Steve Atwal says:

        Hi Marcy. Tried that too.

        Best
        Steve

        • Marcy Diaz says:

          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;
          }

  4. Tony Mace says:

    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

  5. Greg Saxton says:

    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 says:

    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!

  7. Vijay says:

    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.

    • Marcy Diaz says:

      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 says:

    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

    • Marcy Diaz says:

      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 says:

    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!

  10. Chris says:

    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

    • Marcy Diaz says:

      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 says:

    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

    • Marcy Diaz says:

      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

      • Colleen says:

        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

        • Marcy Diaz says:

          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;
          }
          • Colleen says:

            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 says:

    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

  13. Mark says:

    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?

  14. 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|

    • Marcy Diaz says:

      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. 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\

  16. 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

    • Marcy Diaz says:

      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 says:

    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

  18. Mudassar says:

    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?

  19. 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!!

    • Marcy Diaz says:

      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!

  20. vinny says:

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

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

  22. Janine says:

    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

    • Marcy Diaz says:

      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 says:

    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 *