In WordPress, featured images play a pivotal role by providing visual cues for posts, pages, and custom post types. These images, also known as post thumbnails, are easily managed through the post editor interface and are often showcased prominently within themes, archives, and post listings. Developers can extend support for featured images to custom post types, ensuring consistent integration across different content types. Furthermore, WordPress offers the flexibility to create custom-sized versions of featured images using the add_image_size() function. By defining specific dimensions, developers can tailor these images to suit various theme layouts and design preferences. These custom-sized images are then stored in the uploads directory, ensuring efficient handling and delivery while maintaining the integrity of the site’s visual presentation.
Adding featured image support to custom post types
Adding featured image support to custom post types in WordPress is a straightforward process achieved by setting the ‘thumbnail‘ parameter to ‘true‘ when registering the post type. This enables users to easily associate and manage featured images for their custom content, ensuring consistent visual representation across the site.
To enable featured image support for custom post type, first you have to add featured image support for the whole theme in functions.php file
1). In functions.php file add theme support for post thumbnails as add_theme_support('post-thumbnails'); action within 'after_setup_theme' WP hook like:
function your_custom_features() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'your_custom_features');
2). Adding theme support for post thumbnails by itself won’t allow your custom post types have the featured image feature, while registering the custom post type, while passing argument to register_post_type(), you have to pass array data for 'support' and include 'thumbnail' as one of the supports like:
register_post_type( 'custompost', array( 'labels' => array(), 'supports' => array( 'title', 'editor', 'thumbnail') ));
Displaying the featured image in the front pages
After adding theme support for featured image and passing 'thumbnail' for 'support' as an argument for register_post_type() function, you can use <?php the_post_thumbnail() ?> or <?php the_post_thumbnail_url() ?> for clickable image which takes to post singular page, anywhere in the single post template.
Different Size Versions for uploaded featured images
By default, when you upload a featured image to WordPress, the platform automatically generates a default thumbnail-size version of the uploaded image. This thumbnail-size version is created alongside the original image in the same location within the uploads directory (typically wp-content/uploads/year/month), effectively creating a duplicate file for each uploaded image.
For instance, when you upload an image named “file-name.jpg” as a featured image in WordPress, the platform automatically generates additional thumbnail sizes such as “file-name-150×150.jpg” and “file-name-300×132.jpg,” among others. These thumbnail versions are created alongside the original image file, each tailored to specific dimensions, without altering the original image itself.
Creating custom sized version of uploaded images
By default, WordPress generates various size versions of uploaded images. However, you can define custom sizes by hooking into the 'after_setup_theme' action and using the add_image_size() function. This function accepts parameters such as a nickname for the size, dimensions (width and height in pixels), and the option to crop or not crop the image as true/false(Booleans).
function your_custom_features() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
add_image_size( 'yourLandscape', 400, 260, true );
add_image_size( 'yourPortrait', 480, 650, true );
}
add_action('after_setup_theme', 'your_custom_features');
In this case we are creating two versions of different sized images copy inside the upload folder.
What about custom sized version of previously uploaded images
When you use the add_image_size('yourLandscape', 400, 260, true); function in WordPress, it doesn’t automatically generate custom copies of previously uploaded images with different sizes. To create custom-sized copies of existing images within the WordPress uploads directory, you’ll need to use plugins like Regenerate Thumbnails, which can regenerate thumbnails for all images to match the newly defined custom size.
Using the custom generated images inside posts or pages
After creating a custom sized copy of the uploaded image in functions.php file, to use the image in posts or pages you have to pass the sizenickname that you used while creating custom cropped version of images.
To use it you have to pass the nickname as an argument to the_post_thumbnail() function as:
<?php the_post_thumbnail('yourLandscape') ?>
—- Thankyou for Reading —-
