Owning a website becoming expensive?

No more! In our library, you will find the best premium WordPress plugins and themes for a fraction of the cost of the original prices. Browse Our Library

WordPress Featured Image – the Ultimate Guide

WordPress Featured Image – the Ultimate Guide

In WordPress, you have the option to set a featured image for every page, post, or custom post type.

The featured image is the one that going to represent the page or post in various places.

This article will teach you everything you need to know about WordPress featured images. You’ll learn how to set them up, resize them, and why you should.

Why Use Featured Image

Using a featured image for your pages, posts or products can benefit your website a whole lot.

When there are many books that you’re interested in, there is a higher chance that you will choose the one with the nicer cover.

It is a fact. You heard before that ‘people like to eat with their eyes and there is no difference when reading a blog post.

You see, the post featured image is like the cover of the book. It sets the tone of the article and can be the difference between spending more time on your website or move out to a different one.

The featured image can attract your website visitors to enter a blog post or a product page and spend more time on your website.

Visitors who enjoy your content will revisit you again in the future and most likely will convert into customers.

When to Use Featured Image

Here are some of the many places where the WordPress featured image will be used and displayed:

  • When setting up a featured image for a post. It will be shown on the posts archive page along with a short description and a ‘read more’ button.
  • Store archive pages when displaying various products in a grid or list view.
  • When adding a product to the cart the featured image will be displayed in the cart.
  • When sharing a page or blog post on social media channels such as Facebook.
  • Google will pick up your featured images and will display them on the images search result page.
  • RSS feed.

Featured images in archive pages

There are many more scenarios where the featured image will be shown. The ones above are just the tip of the iceberg but I think you got it.

How to Enable Featured Image on Your Website

There are many themes that support featured images out of the box as it becomes a standard already. If your theme does, feel free to skip this step and move on to the next section.

However, if you don’t see the option to set a featured image while editing your page, post, or custom post type, you’ll have to add the option manually.

To do that, we will need to add a custom function to the functions.php file of your child theme or create a website custom plugin.

To access your functions file, navigate to Appearance -> File Editor and look for the functions.php file from the list on the right.

Find the functions file

Scroll all the way to the bottom of the file and paste this function:

<?php add_theme_support( 'post-thumbnails' ); ?>

Great, now you added the option to set a featured image that will get picked up by search engines and social media channels. That will help your SEO a lot.

Later on in this article, I’ll show you how to auto display your featured image in your pages and blog posts.

How to Set the Featured Image

Once enabled the featured image option on our WordPress website, it’s a good time to show you how to set it up.

Navigate to the edit screen of any page, post, or product on your website and click on the ‘Document’ tab on the right.

Under the Document tab, you’ll have few options, and one of them called ‘Featured image’.

When clicking on it, choose an image from your media library or upload a new image from your computer.

Tip: when setting up a featured image for a blog post, ALWAYS upload the image to the specific post using the edit screen instead of to the media library. That way, when Google displays the image, it will link back to the post itself and not to the image file.

After uploading and choosing the image, click ‘Update’.

Set featured image

Great job, with that small step you improved your page drastically. Now go ahead and upload a featured image to all the other blog posts and your most important pages.

WordPress Featured Image Size

Unlike Facebook cover image or YouTube featured image for a video, you’re the only one who controls your website look and design.

Thus, there is no one size that will fit all websites perfectly but there is a size recommendation that will fit excellent to most website looks.

The recommended WordPress featured image size is 1200 x 628 pixels. A rectangle shape will look good in most screen sizes and we would like to keep a ratio of about 2 to 1 between width and height.

Because most content width does not expand over 1200 pixels, there is no reason to create a larger image. A large image can slow down the website’s loading time.

Whichever size you chose to use, please make it consistent between all the featured images across your website.

How to Change the Featured Image Size

When uploading a photo to WordPress, it’s automatically creating three more sizes in addition to the original size of the photo.

The three extra sizes are:

  • Thumbnail (150 x 150 pixels).
  • Medium size (300 x 300 pixels).
  • Large size (1024 x 1024 pixels).

The extra sizes are used by different plugins and share buttons to display the images on your sidebar or various social platforms.

Scroll below this post and see the ‘You may also like’ section with three images to different blog posts.

Blog post thumbnails

The sizes of the images in that section are way smaller than the original sizes of the images that were uploaded initially.

When there is no need for WordPress to use the full-size image, it can use one of the other created versions such as the thumbnail or the medium size.

WordPress is a smart content management system that efficiently knows how to maintain its resources by serving us the right size.

If you would like to change the different automatic sizes of the thumbnail, medium, or large images, do it from the Media option under the Settings tab.

There you can change the settings to any of the options above. Just remember to save the page after you are done changing the numbers.

Change featured image sizes

How to Make the Perfect Featured Image

Because the featured image is super important to attract visitors, a simple image is a mistake and we should aim for a great featured image.

Today is very easy to make stunning featured images like professional graphic designers when using the right tools.

This is how I create the thumbnails for our blog posts and you should do the same.

Open Snappa and create your free account.

Choose the right size and template

Inside your dashboard, scroll down and chose the Blog Featured Image option under Blogging and Infographics.

Chose the blog featured image option

Then, you’ll have tons of options to chose from. Take your time and chose the design that you like the most and fit your brand.

Chose featured image template

Don’t worry about the text or the colors, we can change them easily with a click of a button.

From inside the editor screen, click on the Background icon and search for any image from their image library. If you already have an image, feel free to upload and use it instead.

Chose a background image

Design the image

After finding the right image, you can flip vertically or horizontally along with zooming in or out to fit the canvas better.

Zoom and position the background

If you chose a background image and there is a grey overlay, you can fix it from inside the Effects tab. Just adjust the Color overlay and the Saturation options.

If you want the background to appear without any effects, set all the values to 0.

Adjust the background effects

Great, it starts to look really good.

Now, all we have left to do is to change the text and the colors and save the image.

Mark the text that you would like to change and type your text instead. You also have the option to change anything related to the text such as the font, color, size and etc.

Next, we need to change the color of the rectangle shapes to any other color.

Click on the shape and then chose your desired color.

Save the image

Perfect, the final result looks amazing. Now, all we have left to do is to download the image and set it as the featured image to our blog post.

Save the featured image

How to Display the Featured Image

Images do not worth much if you don’t show them and so does the featured image.

Although most themes will show the featured image at the top of the blog post, that may not be the case with your theme.

Therefore, it will be useful to learn how to display your featured image in your template files and blog posts.

Inside a template

To display WordPress featured image inside template files use the code below:

<?php the_post_thumbnail(); ?>

It is recommended to use the code above within the WordPress loop.

Let’s take the default Twenty-Twenty theme for example. It displays the featured image at the top of every post. In addition, we would also like to add it to the bottom of the blog post as well.

To do that, edit the content.php file which is the template that generates each of the blog posts.

Navigate to Appearance -> Theme Editor and look for the content.php file under the template-parts folder on the right side.

Inside the file, chose where you would like to display the featured image and paste the code above.

To display the featured image at the bottom of the article, paste the code above before the closing entry-content div.

Use code to display featured image

After saving the changes, the post will show the featured image at the bottom of the post as expected.

The example above is only one out of many. When using WordPress you can place your featured image anywhere you desire inside page templates or using functions.

Display the featured image with a function

To display the featured image under the title of a blog post without modifying the template file, use the function below. Make sure to paste it at the bottom of the functions.php file of your child theme:

<?php

// Add featured image under post title
add_filter('the_title', 'pfwp_add_featured_image_under_title');
function pfwp_add_featured_image_under_title($title) {
  if(is_singular( 'post' )){
    $title .= the_post_thumbnail();
  };
	return $title;
}

?>

If you don’t have one yet, read our article on how to create a child theme in WordPress.

Conclusion

We hope that we managed to explain how important featured images are for your WordPress website.

We recommend you go through all of your blog posts and most important pages and set one right now. It will help you in many ways from an SEO perspective to reduce bounce rate and increase page view duration time.

Watch the short video at the top of this page for further instructions. Leave us a message below and let us know if you have any questions.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply