How to add featured images in WordPress

It is common to populate blogs with images to keep the users engaged. Let’s face it, who wants to read paragraph after paragraph. In this article, I will show you how to add featured images in WordPress.

What are Featured Images?

Featured image is a feature introduced in WordPress with version 3.0. Post and pages can have a single featured image which is usually used to enhance the presentation of your site and keep the visitors engaged. Even though the official name is Featured Image, some functions, templates and developers call them Post Thumbnails.

For premium themes

Most premium themes if not all, support featured images by default. If you want to check if your theme supports featured images go to any post or page that you have. You can also create a new post if you don’t have any. On the right sidebar, the last meta box is called Featured Image. If you see this meta box, it means that your theme supports featured images.

setFeaturedImages

Setting a featured image

To add a featured image to your WordPress blog post, click on “Set Featured Image” and a pop up with your media library will appear. You can use this to upload a new image or select an existing image. Once you choose the image, click on Set Featured Image button.

metaBox

Once you do it, the image will show up in the meta box.

featuredImageMetaBox

It is important to note, depending on the theme you use, the image may appear differently in your theme. It all depends on how the developer-defined them.

For Custom Themes

Even though featured images is a popular featured, it is possible that the theme you are using does not support it. In this case, you can add featured images support to your theme. If you are comfortable editing your theme files and you know your way around HTML and CSS, you can do it yourself or hire a local web development agency.

To add featured images support in your theme, you need to add this line of code in functions.php

add_theme_support('post-thumbnails');

Add_theme_support function enables the feature but will not display the image in your posts or pages yet. For that, you need to go in single.php for blog posts or any page template and add the following code inside the loop.

if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}

Different image sizes

The featured image comes in different sizes. Four of them are default but you can also create your own particular size.If you want to find more information, check WordPress Codex for Featured Images

//Default
the_post_thumbnail('thumbnail');       // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)
the_post_thumbnail('large');           // Large resolution (default 640px x 640px max)
the_post_thumbnail('full');            // Original image resolution (unmodified)

//Custom
add_image_size('my-custom-size', 590,300);

To use your custom size or any of the default sizes, you just need to use the size name inside the function

if ( has_post_thumbnail() ) {
    the_post_thumbnail('my-custom-size');
}