Add And Display Featured Image In WordPress

WordPress being as CMS and used by around 27% of whole websites currently available allows you to add the featured image, ie, main image of the post or pages in your site and display it. So, here we will describe about how to add and display featured image in your built in WordPress theme and plugins.

What is featured image in WordPress?

First of all, let’s us discuss about what is featured image in WordPress and why is it useful. The main usefulness of the featured image is about to showcase the whole post or page created about in just one sentence, ie, proper image can represent the whole post without any reading at all.

The other main reason about this is, while you share the post or pages in your site then, the social sites displays the images and then post summary to represent the shared post. It is very useful on this context too. But, on this context, it is not appropriate to add the featured image only. You need to add the open graph as well as the twitter cards for your site too.

You can add those open graph and twitter cards code via the excellent SEO plugins available via the WordPress plugin directory, which are All in One SEO Pack and Yoast SEO/WordPress SEO.

How to add the featured image in your site?

Now, after knowing some of the details about what the featured image really is, you may want to know abut how to add it, right? Well then, why the wait. Let’s move ahead and add the featured image in your site.

For adding the featured image for the posts and pages created in your site, you will find the Featured Image section in the bottom right corner of the post editor section. You can see the similar as below when you add the featured image for your posts:

But, if you could not see the same section as above in the screenshot then, you can enable it via the Screen Options section in the top right corner. While you click on it, you will find the different checkbox options there. There, you will need to put the checkmark on the Featured Image section and it will appear and you can set it for your posts and pages as required. Here, you can see the same via the screenshot below:

How to display featured image for your site in WordPress?

After knowing about some of the details about how to add the featured image in your site. Now, you may want to know about how to display it, right? Well, let’s move about and learn about how to display featured image for your site via the WordPress function .

WordPress has created an excellent function in order to display featured image in your site, which is the_post_thumbnail(). You can read more on this function from here.

First of all, for the proper use of this function, you need to add the theme support for post thumbnails via the below PHP code in the functions.php file of the theme:

function theme_prefix_setup() {
add_action('after_setup_theme', 'theme_prefix_setup');

Now, after that code addition mentioned and assuming you have add the featured image for your posts or pages as described, let’s move ahead and learn about how to display featured image for your site.

WordPress displays the posts and pages created via the single.php and page.php file respectively. So, as required, you need to modify these files. Now, after you have opened up these files, you can add the below PHP code in this file in the required place to display featured image in your site:

<figure class="featured-image">
if (has_post_thumbnail()) {

Adding the above code as mentioned either in the above file will display the featured image in your site in its full size uploaded. Here, you can choose the required featured image size too, to display it in the front end. You just need to modify the size of the featured image to display, ie, in about code full to be modified with any other.

Featured Image Size in WordPress

WordPress default has the thumbnail image size of thumbnailmediumlarge and full. But, you can also register new size as required for your site via the PHP code below added in functions.php file:

function theme_prefix_setup() {
add_image_size('themeprefix-featured-large-thumbnail', 800, 600, true);
add_image_size('themeprefix-featured-small-thumbnail', 400, 300, true);
add_action('after_setup_theme', 'theme_prefix_setup');

Now, since you have registered two of the new sizes for the featured images, WordPress will be cropping the images as described here. And to display this size, you need to call the function the_post_thumbnail() as the_post_thumbnail('themeprefix-featured-large-thumbnail') and it will display featured image in 800px * 600px in size. And for the WordPress default size, you can modify that via the_post_thumbnail('thumbnail') and it displays 150px * 150px image size.

Output for the display featured image in your site

Now, after you have successfully integrated as stated above then, you may be in hurry about how it will be displaying in your site, right? Well, you can see the output of this as below in the screenshot:

Here above, you could see that the featured image is being displayed properly as assumed when applying the same.

You may also want to read:

  1. Adding Featured Image In Your Post And Pages
  2. Display Image Caption Under Featured Images In WordPress
  3. Tutorial On Creating WordPress Child Theme


If you have successfully followed this tutorial and have became successful on about how to display featured image in your site then, we can assume that you are now more familiar on this than before. But, if you are still confused about how to do it and want more help on this then do drop the comment below in the comment box and we will follow it up.

Post navigation

Bishal Napit

Bishal Napit is a WordPress theme developer from Tansen, Palpa, with a passion to learn more on WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.