WordPress Featured Images

A Featured Image (or Post Thumbnail) is an optional image that is chosen as the representative image for each blog post. Featured images are displayed on the blog index and blog archive pages. They are not displayed on the single blog post pages.

Featured images are particularly useful in combination with the WordPress more tag.

An Example

An example of a blog post using the featured image feature is shown below:

The image above shows a blog post, as shown on the blog index page. It shows a thumbnail image, and a short introductory sentence.

Clicking through to the single blog post page (by clicking the blog post title, the featured image itself, or the “read more” link), then shows the full blog post:

This page shows the entire blog post. It does not show the featured image. This allows you to show an image thumbnail (ie a featured image) on the blog index page, without having to show it on the single blog post page as well.

Featured Image Settings

The featured image settings for your website are as follows:

These settings are accessible via Dashboard → Appearance → Site Design → Page Content → Featured Images.

These settings allow you to specify:

• the dimensions of the featured images (when images are uploaded they are automatically resized to these dimensions)
• the cropping method used when resizing the featured images
• where the featured images are displayed (either before or after the blog post titles)
• whether or not the featured images link to their blog post

Setting a Featured Image

When editing the blog post, locate the Featured Image module in the bottom right corner under Page Attributes. If you don’t see the “Featured Image” box, click on Screen Options (top right) and enable the featured image meta box.

Click on “Set featured image” button/link, and you will see an image uploading screen identical to that used when inserting an image into a blog post. Follow the on-screen prompts to choose the image from your computer and upload it or choose it from one of the images already in your Media Library.

Once the you have located your featured image click the “Use as featured image” link.

Don’t forget to save your blog post.

The blog post now has a featured image configured. The dimensions of this featured image are defined by the site design settings mentioned at the beginning of this article.

Deleting/Removing a featured image

To remove or change a featured image, edit your blog post and click the “Remove featured image” button/link.

Advanced: styling the featured images using CSS

Featured images are displayed using a class of attachment-featured-image.

This means that you can write Custom CSS rules to style the featured images. For example:
img.attachment-featured-image { float: left; }
would float the featured image to the left, allowing the blog post title and content to display to the right.