Rahul Bodana

Blogger, Programmer & Trader

Home » Code » PHP » WordPress » WP Themes » How to add Featured images Support in custom WordPress theme

How to add Featured images Support in custom WordPress theme

Featured images are also known as the Post Thumbnails.

These are the images that represent the individual Posts, Custom Post or even Pages.

By default, this functionality is not enabled in WordPress, But we can add this using the theme support method.

Here is the code that we use to enable Featured Posts in WordPress:

add_theme_support('post-thumbnails');

This will enable Post thumbnail for all available post types in our WordPress website.

However, in case you want to want to enable only specific post types:

add_theme_support( 'post-thumbnails', array( 'post', 'book' ) );          // Pages only

Here we enable post thumbnail for WordPress posts and other custom post type movie.

Once the Featured image is enabled, you can head over to your WordPress Dashboard> All Posts > Edit post > and you will be able to see the option to set the featured image.

Important Post Thumnail function

Here are some of the Most useful functions related to the Post Thumbnail feature:

  • add_image_size() : Register a new image size.
  • set_post_thumbnail_size(): To register an image size for post thumbnails.
  • has_post_thumbnail() : This will check if post has an image attached. Useful to identify and avoid error if featured image do not exist.
  • the_post_thumbnail(): Simply put it on the place where you want to display featured featured image.
  • the_post_thumbnail(): Used to retrieve Post thumnails.
  • get_post_thumbnail_id(): simmilar to previous one, but for retrieving ID of thumbnail instead of image itshelf.

Set Images Sizes & Styling

WordPress already had different image sizes available for you to choose from to display it as a featured image.

These sizes are:

  • Thumbnail: default image, 150×150 in dimention max.
  • Medium: Medium resolution (default 300px x 300px max)
  • Large:Large resolution (default 1024px x 1024px max)
  • Full Size: Original Sie of uploaded image.

All these can be changed by navigating to the WordPress Dashboard > Settings > Media.

There we can add our own custom image by passing an array with our image dimensions.

You can define image size individually using:

the_post_thumnail(array( , ));

We can also create custom featured image size in functions.php file:

add_image_size( 'category-thumb', 300, 9999 ); // 300 pixels wide (and unlimited height)

Here is the code sample, you can customize it according with your needs:

if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 150, 150, true ); // default Featured Image dimensions (cropped)
 
    // additional image sizes
    // delete the next line if you do not need additional image sizes
    add_image_size( 'category-thumb', 300, 9999 ); // 300 pixels wide (and unlimited height)
 }

We set the post thumbnail size but what about the Output size of the image.

We use set_post_thumnail_size() it to set the default image size.

We can do it either resizing or cropping

// By Resizing:

set_post_thumbnail_size( 50, 50 );

// By Cropping:
	
set_post_thumbnail_size( 50, 50, true );

Featured Images use the class wp-post-image.

Using these classes as CSS selectors we can customize the outlook of our featured images.

img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

We can also Assign featured image custom classes using attribute parameters in the_post_thumbnail():

	
the_post_thumbnail( 'thumbnail', array( 'class' => 'customclass' ) );

What purpose does it serve it would serve if we just added the featured image functionality but don’t edit our template file accordingly to display it.

Here is the code that would display the featured image:

// check if the post or page has a Featured Image assigned to it.
if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}

Put this code inside the post loop.

You can also assign it to variable if you want to use it later:

// check for a Featured Image and then assign it to a PHP variable for later use
if ( has_post_thumbnail() ) {
    $featured_image = get_the_post_thumbnail();
}

Suggested Posts: