Build Your Own Business Website header image

Everything You Wanted to Know about the WordPress Media Library – Part 4 – Using Featured Images in WordPress

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

We’ve covered the basics of WordPress 3.9 image sizing and now I’m going to talk about featured images. A featured image is an image that is not inserted into the post but is attached to the post or page.

Add a Featured Image to a Page

I’ll show you an example. Let’s edit this page and then come down and set our featured image. Let’s set the barking chihuahua as our featured image. Then update it. Now when we view the page, the image is not inside the content but it is placed between the heading and the content. So it’s not actually embedded in the content, it’s just embedded between the title and the content using that Thesis featured image.

Let’s come over and take a look at our posts. You’ll see that all of my posts have featured images associated with them. If I view the post, the featured image shows up.

Let’s come back over to the dashboard and I’ll go to Appearance and Widgets. I’m going to add Categories to the Sidebar Widget. Save that and then we’ll view the Archive page. Let’s come back over here to categories and choose this page. Whoops, our archive page, in this case, is not set to display those featured images but we can actually change the archive page so that it shows our excerpt and featured image.

I’ll take the featured image and put it up there. In the settings for the featured image, we can choose the thumbnail image and float it to the left with text wrap. Then for the excerpt, we’ll just show the Read More Link at the end of that. So now we save the template, go back to the site and look at our category archive page. Now these images show up because they are the featured images.

Themes do not All Use the Featured Image the Same Way

That’s what you can do with the featured image. There are all kinds of ways in which different themes and different Thesis skins use featured images. They don’t all work the same way but if your Theme uses a featured image and you assign it to the post, say an archive page, then you’ll have an image to display.

Assign a Featured Image Using a Thesis 2 Query Box

You can also use the featured image for all kinds of things. I’m going to give you a quick little demonstration of it in Thesis 2.1 using a query box. Come on over here to the Skin Editor and we’ll work on the front page.

We will select Query Box and add the Query Box. We’re going to say Test Query Box. I’m going to select posts, it’s going to be recent posts and I’m going to show 2. Say okay to that and then drop that into the sidebar.

Then what I’m going to do is take out the Edit Link and the Author Link from here. I’m going to insert the WP Featured Image Link, take it up to the top and then choose the Tiny Thumbnail. I’ll choose left with text wrap and I’m going to say okay to that. Save the template, refresh this and would you look at that.

I think what we’re going to have to do is use the Regenerate Thumbnails on this because it didn’t make the Tiny Thumbnail, one of our custom image sizes, the right size. So we’ll come back over here to Tools and Regenerate Thumbnails. I’m going to regenerate all thumbnails because those were attached to posts and pages and they still didn’t get regenerated.

Pretty much anytime your image sizes don’t look right, if you think you’ve set them right, you probably need to regenerate your thumbnails. That’s done and reload. Now we have this nice tiny thumbnail showing up here.

In fact, while we’re at it we may as well just edit that front page. Down here in the Sidebar in the Query Box I’ll take the Featured Image below the Headline and save it. Let’s take a look at the site and now the Headline goes on top of the image like that.

It’s reasonably a useful feature to be able to create different image sizes and insert them around the site and that’s what I wanted to demonstrate.

Genesis Featured Post Widget

Genesis has a featured post widget that allows you to choose the image size. There are related post plugins out there that will show the thumbnail and you can pick the image size. There are all kinds of applications in which you might choose to use a different image size.

0 Comments… add one
0 comments… add one

Leave a Comment