How you can implement featured images in the WordPress theme

This article in the series of articles about featured images deals with the technical implementation and shows the functions required to implement and display featured images in the WordPress theme.

Did you miss the start of the article series? Click here to read the first article !

The code examples in this tutorial basically work for developing your own theme, but can also be used to retrofit featured images in a child theme .

Declare support for featured images

First, WordPress must be told that featured images should be supported.

WordPress provides the add_theme_support () function for this purpose, which can be used to activate various core features such as featured images, theme logo, header image, background image, website title or RSS feeds in the theme.

To use featured images, we use post-thumbnails as parameters: add_theme_support( 'post-thumbnails' );

We make the declaration for the support of featured images and other features in the setup function of the theme, which is usually located in the functions.php of the theme and is hooked into the after_setup_theme action hook.

 if ( ! function_exists( 'theme_slug_setup' ) ) :   /**   * Sets up theme and registers support for various WordPress features.   */   function theme_slug_setup() {      // Other Theme Setup code...       // Enable support for Post Thumbnails on posts and pages.      add_theme_support( 'post-thumbnails' );   } endif; add_action( 'after_setup_theme', 'theme_slug_setup' );

The first step is done.

WordPress now shows the boxes for adding and removing post images in the backend when a post or page is created or edited.

Define the standard size of the featured image

In the last post I already discussed the three standard sizes that WordPress defines for normal images in the content: thumbnail , medium and large

There is also a standard size for featured post-thumbnail called post-thumbnail

The width and height of the standard thumbnail is defined with set_post_thumbnail_size () in the theme. The function is just a wrapper function for add_image_size () , which we will get to know shortly.

 set_post_thumbnail_size( 300, 200, true );

After specifying the width and height, hard cropping is transferred as the cropping mode in the third parameter. I also explained the two cropping methods in the last post .

Define your own image sizes for featured images

A theme sometimes requires different sizes for featured images on different templates, e.g. archive pages and individual posts.

Therefore you can define your own image sizes in the theme with add_image_size () .

 add_image_size( 'theme-slug-single-post', 800, 9999, false );

The name of the image size is transferred in the first parameter for later identification, followed by width, height and cropping mode again.

A specification of 9999 pixels together with soft cropping ensures an unlimited height of the featured image. The image size should later be used in individual posts, while the archive pages have a fixed image size of 300 x 200 pixels.

We also add the definition of the image sizes in the theme setup function.

 if ( ! function_exists( 'theme_slug_setup' ) ) : /** * Sets up theme and registers support for various WordPress features. */ function theme_slug_setup() {      // Other Theme Setup code...       // Enable support for Post Thumbnails on posts and pages.      add_theme_support( 'post-thumbnails' );       // Set detfault Post Thumbnail size.       set_post_thumbnail_size( 300, 200, true );       // Add custom image size for single posts.      add_image_size( 'theme-slug-single-post', 800, 9999 ); } endif; add_action( 'after_setup_theme', 'theme_slug_setup' );

Show featured images in the WordPress theme

The post image is output in the WordPress theme with the function the_post_thumbnail (). The function should be called within the WordPress loop .

Without specifying a parameter, the standard featured image post-thumbnail is automatically displayed. The featured image can be packed into a link to link the featured image on archive pages for individual viewing of the article. With has_post_thumbnail () you can check whether the user has set a post image at all.

This code can therefore be used in the archive.php within the WordPress loop to display the standard contribution image with the specified size of 300 × 200 pixels.

 <?php if ( has_post_thumbnail() ) : ?>   <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">       <?php the_post_thumbnail(); ?>   </a> <?php endif; ?>

The name must be transferred as the first parameter for your own, defined image sizes.

An array with further attributes can be transferred in the second parameter. This allows you to easily transfer another class to the featured image for later styling with CSS code.

In the single.php this code can be used to display the contribution image :

 <?php the_post_thumbnail( 'theme-slug-single-post', array ( 'class' => 'single-post-image' ) ); ?>

In addition to individually added classes, each featured image always has the .wp-post-image class, which can be used for styling all featured images in style.css .

With this brief insight into the technical implementation of featured images, we have completed the basics of the article series. The upcoming posts will be about adapting and expanding featured images with additional plugins.

Overview of all articles in this series