How to Create a WordPress Shortcode to Display Featured Images

Featured images, also known as post thumbnails, are an essential aspect of many WordPress websites. They help to visually represent the content of a post, making it more engaging and attractive to readers. There may be situations where you want to display the featured image within your post content using a shortcode, such as customizing the layout or reusing the same image in multiple areas of the post. In this tutorial, we’ll explain what a featured image is, why you might want to use a shortcode to display it, and how to create a custom shortcode to display the featured image in your WordPress posts.

What is a Featured Image?

A featured image is a representative picture that is associated with a particular post or page in WordPress. It is typically used as a thumbnail or header image, providing a visual representation of the content. WordPress themes often use featured images to create visually appealing layouts, and they can be set easily from the post editor.

Why Use a Shortcode to Display a Featured Image?

Using a shortcode to display a featured image can provide you with more flexibility in your post’s layout and design. By using a shortcode, you can:

1. Easily insert the featured image at any location within your post content.
2. Control the image size and CSS classes applied to the image for better styling.
3. Reuse the same image in multiple areas of the post without uploading it multiple times.

Creating a Custom Shortcode to Display the Featured Image:

Follow these steps to create a custom shortcode for displaying the featured image in your WordPress posts:

1. Access your theme’s functions.php file, which can be found in the WordPress admin dashboard under Appearance > Theme Editor. Alternatively, you can access the file via an FTP client or your hosting control panel’s file manager.
2. Add the following code to the functions.php file. This code creates a shortcode called featured_image that will display the featured image of the post:

function display_featured_image_shortcode($atts) {
    global $post;
    $default_atts = array(
        'size' => 'thumbnail', // default image size
        'class' => '', // default CSS class for the image
    );
    $atts = shortcode_atts($default_atts, $atts, 'featured_image');

    if (has_post_thumbnail($post->ID)) {
        $featured_image = get_the_post_thumbnail($post->ID, $atts['size'], array('class' => $atts['class']));
        return $featured_image;
    } else {
        return ''; // return empty string if there's no featured image
    }
}
add_shortcode('featured_image', 'display_featured_image_shortcode');

3. Save the changes to the functions.php file.
4. Now, you can use the [featured_image] shortcode in your posts or pages to display the featured image of the post it is used on. If you want to customize the image size or CSS class, you can use the shortcode like this:

[featured_image size="medium" class="custom-class"]

Replace medium with the desired image size (e.g., ‘thumbnail’, ‘large’, ‘full’, or a custom image size) and custom-class with the desired CSS class name.

Please note that you should always create a child theme when making changes to theme files, as updates to the parent theme can overwrite your changes.

Creating a custom shortcode to display featured images within your post content can be an excellent way to enhance the layout and design of your WordPress website. By following this tutorial, you can easily add this functionality to your site and enjoy greater flexibility in managing your featured images.

If you need assistance with a custom WordPress project or require support for your website, don’t hesitate to contact us at Marketing the Change. Our team of experienced professionals is always ready to help you achieve your goals and take your WordPress site to new heights. Reach out to us today, and let’s make a positive change together!