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.
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:
- Add the Widget Title, in this case “Recent Posts”
- Choose a single category from the drop down or leave as All Categories, as here
- Choose the number of posts you want to use, in this case 3.
- Check Show Featured Image
- Image Size – Click the drop down to see if you have a size smaller than “thumbnail (150×150)”; if so choose it instead.
- Image alignment – Use Left for this first tutorial, but you can also choose None or Right.
- Check Show Post Title
- 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.)
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
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:
- Add the Widget Title “Recent Posts”
- Choose All Categories
- Choose 3 posts
- Check Show Featured Image
- Image Size – Choose “thumbnail (150×150)”.
- Image alignment – Use Left
- Check Show Post Title
- 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.)
Leave a Reply