PHPMatters Help You Better Hosting Your PHP-based Sites
How to Add WordPress Featured Images and Customize the Display

How to Add WordPress Featured Images and Customize the Display

A featured image represents what a post or page in your website stands for or is about. WordPress allows its users to add such images to the posts of their websites. You can even customize these images to make them look and feel the way you want them to be. You can choose images already presented in the themes or upload your new pictures. This further enhances your website and makes it look more appealing to the visitor.

In the following, we have shown you how to add WordPress featured images or thumbnail pictures to your blog posts.

Add Featured Images to WordPress

The first step is to enable thumbnail support so that you can post the features images. You have to add the following code in the theme’s functions.php file.

add thumbnail support

If this is not done, then the interface for adding a featured image cannot appear on the Edit Post or Edit Page screens.

Next, open your Edit Post or Edit Page screen and click on “Set Featured Image”. Browse through and select an image that you want as the featured image. Determine the settings. Once this is done, click on the blue colored “Set Featured Image” button on the screen. The image that you selected has been set as the featured image.

set featured images

Customize Featured Images

After showing how a featured image is added, we now tell you how it can be customized and configured. The following customizations can be added to the featured image.

To check if a post has a thumbnail

Sometimes, maybe in a program, it might become necessary to know if a particular post has a featured image or not. Simply add the following code to the functions.php file to check if a particular post has a thumbnail.

check thumbnail function

To link the thumbnail to the post permalink

Thumbnails images can be used as links to different posts. For example, it can be the logo of your website linking to the homepage. To do this, you need to follow the below steps.

Add the following code to the theme’s template files to link the thumbnail image to the permalink in a specific loop.

link thumbnail to permalink

Add the following code to the functions.php file if you want to link all the thumbnails on your website to the post permalink.

link thumbnail to post permalink

To link the thumbnail to a larger image

Sometimes people visiting your site might want to see a larger or a whole version of the image that you have used as a thumbnail. The following code must be added in the loop.

large thumbnail image

To style the features images

You can change the size of the featured image and also change the position and alignment of the image. It can be done easily using the following coding stuff.

Add the following CSS selectors to control the size of the featured image.

style features images

The below code can align the featured images the way you want.

align thumbnail to left

This line of code is used to align the thumbnail images to the left.

To set the size of featured images

As a large image may lead to a negative effect during the process of speeding up WordPress, the size of a thumbnail image can be set by you. You can define the number of pixels to make up the thumbnail. These code snippets must be added to the theme’s functions.php file.

The below code can resize the image proportionally to fit the defined pixel size without cropping the image.

resize features images

To add a new post thumbnail size

Other than the default sizes of “thumbnail”, “medium”, “large” and “full”, you can also add your custom thumbnail size to the list. The following code, when added to the functions.php file, can help you achieve this.

custom image size

To remove a thumbnail or featured image

Open the Edit Post or Edit Page screen. Click on “Remove Featured Image” in the Featured Image module. Once the featured image is removed, your custom header image can be displayed.

remove featured images