How to Set a Default Post Thumbnail Image in WordPress
Images play a vital role in every WordPress website. They grab visitors’ attention, encourage social media sharing, and add vibrancy to your content by breaking up chunks of text. Website images can make or break a site, and it is up to the webmaster to ensure that the most suited images are being used.
Since there is a lot that could be said about using images on WordPress websites, we will focus only on a small part of that larger topic. More precisely, we will talk about setting up and using post thumbnail images. These images, also called post featured images, can substantially boost the quality of your blog, make it more appealing to readers, and give it a professional look that’s particularly handy for social sharing.
However, featured images aren’t added to posts by default, so forgetting to add them happens easily. This can lead you to miss out on all the benefits that they could bring to your website. There are several approaches you can take to avoid this problem. In this article, we will show you one that we believe to be the most efficient—setting up a WordPress default post thumbnail image. We will also take a look at why this particular approach is so helpful. If you’d like to skip to any specific part of the article, just click on one of the links below:
Post thumbnails are one of the key ways of attracting new readers or keeping current ones on your website. However, it’s easy to overlook them as they aren’t one of the images that are inserted in the post content directly while it’s being written. This is particularly likely if you’re writing a WordPress post in a hurry.
On the other hand, you could also choose not to use a featured image if you aren’t confident in its look, or how it appears in comparison to your brand. However, by omitting a featured image you could be doing a disservice to your page design, especially if your website has various sections that set out a selection of posts. For example, pages that contain a selection of posts in a grid layout can seem unprofessional if they don’t all, consistently, include WordPress default post thumbnails.
Pages with a similar grid layout to the one shown above can be created using specific page templates, shortcodes, or simply by adding a specific category or tag page. And similar issues, if you choose to omit images, could appear in sidebars that use widgets to display posts.
Adding a fallback featured image to all posts is one way to solve this problem, and it’s guaranteed to make your website visually appealing. By doing so, you can improve the look of your posts when shared on social media, as the same image will be used for social sharing by default. The social sharing aspect of this problem can also be solved using plugins like Yoast SEO, which is well-known and quite popular within the WordPress community.
Besides all the reasons for including a default post thumbnail image that we listed above, having one could be useful for testing websites or websites under development. Adding post thumbnails can help you test if what you’ve made matches the expected design of your website.
Qode Themes: Top Picks
View Collection
How to set a default post thumbnail image in WordPress
Now that you have a better understanding of why setting a default post thumbnail can be beneficial for your WordPress website, let’s consider the ways of implementing it. As with most of our guides, we will be taking a look at two possible methods—using a WordPress plugin or custom code. Both are suitable for different types of WordPress users, so it’s up to you to choose which one you wish to use.
The first method of setting a default post thumbnail image is to look for a suitable WordPress plugin that enables this functionality. This is the more beginner-friendly method. It requires little to no prior coding knowledge, which makes it the preferred method of most WordPress users. Since there are a lot of quality WordPress plugins, you are likely to find a plugin for any purpose you can think of, including setting a default post thumbnail image.
And, don’t forget that there are other approaches to solving the problem of missing featured images. Those include making the first image within a post the fallback featured image, or making it so that a post has to have a featured image before it can be published. There are WordPress plugins that offer these functionalities, so you can look for them as possible alternatives if this approach suits you. We opted to focus on the default post thumbnail image functionality. The plugin we picked to help us with this is called Default Featured Image.
The Default Featured Image plugin is a simple, lightweight plugin that was created specifically for adding default featured images to your site. The functionality for the default post thumbnail is achieved using an option created by the plugin, which you can find in the Settings > Media section.
This plugin also allows for additional modifications thanks to the filter hooks that are included in the code—dfi_thumbnail_id and dfi_thumbnail_html. Meaning, more advanced WordPress users can write custom functions and “hook” onto the suggested filter hooks to further alter the plugin’s behavior. If this is something you’d be interested in, reviewing the plugin’s FAQ section is a good place to start, as it contains code examples of how these filters could be used.
For this article, we opted to use only the default plugin behavior, to keep it accessible to all our readers. In the sections below, we will show you how to choose an image that will serve as a default fallback thumbnail image for all posts.
After installing the plugin, navigate to the Settings > Media section and locate the Default featured image option. Click on the Select default featured image button next to it; this will open the media dialog window.
Once you are within it, you will be placed within the Media Library tab, where you can choose the image you want to use as the default WordPress post featured image. Alternatively, you can switch to the Upload files tab, where you can upload a new image. In either case, when you pick a suitable image, click on it to select it, and press the Set default featured image button below to confirm your choice.
Once you’ve done that, you will see a small preview of the selected image next to the option. There will also be two buttons next to it. One is the Select default featured image button, which is used if you want to select a different image instead. The other is the Don’t use a default featured image button, which is used if you want to remove the previously selected default featured image without picking a new one.
With that being said, let’s continue. Having chosen the default featured image, click on the Save Changes button to apply this setting to your website.
The default thumbnail image you picked should appear in all the same places where the featured image of a given post would appear. Depending on the theme you are using and how it was coded, this could include the page of a post, the pages of post taxonomies (categories and tags), any pages that contain post-related shortcodes, pages that use any post-related page template, or pages that have sidebars containing post-related widgets.
In this article, we will use a page that contains a blog list shortcode to test the results of both of the methods we’ll be covering. The result for this first method is given below; the posts showing the default featured image are framed in red.
Another way of implementing the default post thumbnail functionality is with custom code. This approach is better suited for more advanced WordPress users, as it requires a significant amount of prior knowledge of both WordPress in particular and coding in general. Nevertheless, we will take you step-by-step through the process of adding the default post thumbnail functionality, while using the custom code we created for this purpose.
As you might have seen from our other coding guides, the custom code you create should be added via FTP either in the functions.php file of your child theme or inside a site-specific plugin. Before we delve into what the code does and how it should be used, we strongly suggest making a backup of your site before going any further. The backup will serve as a simple, and very effective safety precaution should you experience any issues with your website after adding the code to either of the two suggested locations.
The code that we included below enables the creation and proper functioning of a new option in the Settings > General section. That option enables you to insert the image ID of the image you wish to set as the default post thumbnail. You can see the full code below.
if ( ! class_exists( 'DefaultThumbnailID' ) ) {
class DefaultThumbnailID {
private static $instance;
public function __construct() {
// Add the option field to the General page.
add_action( 'admin_init', array( &$this, 'show_default_thumbnail_id_option' ) );
// Check if the default featured image exists.
add_filter( 'has_post_thumbnail', array( &$this, 'set_has_post_thumbnail_value' ) );
// Display the default featured image.
add_filter( 'post_thumbnail_html', array( &$this, 'set_default_post_thumbnail_image' ), 10, 4 );
}
public static function get_instance() {
if ( is_null( self::$instance ) ) {
self::$instance = new self();
}
return self::$instance;
}
public function show_default_thumbnail_id_option() {
register_setting(
'general', // General page
'_default_thumbnail_id' // Option name
);
add_settings_field(
'default_thumbnail_id', // ID
__( 'Default thumbnail ID', 'text-domain' ), // Option title
array( &$this, 'display_input_field' ), // Display callback
'general', // General page
'default' // General page section
);
}
public function display_input_field() {
$value = get_option( '_default_thumbnail_id' );
$value = wp_attachment_is_image( $value ) ? $value : '';
?>
<input id="default_thumbnail_id" value="<?php echo esc_attr( $value ); ?>" name="_default_thumbnail_id"/>
<?php
}
function set_has_post_thumbnail_value( $has_image ) {
$default_thumbnail_id = get_option( '_default_thumbnail_id' );
if ( ! empty( $default_thumbnail_id ) ) {
$has_image = true;
}
return $has_image;
}
function set_default_post_thumbnail_image( $image, $post_id, $post_thumbnail_id, $size ) {
$default_thumbnail_id = get_option( '_default_thumbnail_id' );
if ( empty( $image ) && ! empty( $default_thumbnail_id ) ) {
$image = wp_get_attachment_image( $default_thumbnail_id, $size );
}
return $image;
}
}
// Instantiate the class object.
DefaultThumbnailID::get_instance();
}
Let’s explain a bit further. To help us do that, we should consider the code in a slightly simplified form.
if ( ! class_exists( 'DefaultThumbnailID' ) ) {
class DefaultThumbnailID {
private static $instance;
public function __construct() {
// Some code here
}
public static function get_instance() {
// Some code here
}
public function show_default_thumbnail_id_option() {
// Some code here
}
public function display_input_field() {
// Some code here
}
function set_has_post_thumbnail_value( $has_image ) {
// Some code here
}
function set_default_post_thumbnail_image( $image, $post_id, $post_thumbnail_id, $size ) {
// Some code here
}
}
// Instantiate the class object.
DefaultThumbnailID::get_instance();
}
By looking at the code this way, it is easier to see that it represents a custom PHP class we created called DefaultThumbnailID, which contains one property called $instance and six methods. An instance of the class object is created at the end of the code and the whole code is wrapped inside an if statement. This means that the code is only executed if a class with that exact name doesn’t exist already. Now, let’s delve deeper into the code by explaining each of the methods belonging to this class.
The __construct() method is the constructor method for this class. Even though it might not seem so at first glance, the three lines of code given to this method are key for the default featured image functionality working properly. Those lines of code represent one use of the add_action() function and two uses of the add_filter() function.
More specifically, the show_default_thumbnail_id_option() method is hooked onto the admin_init action hook, the set_has_post_thumbnail_value() method is hooked onto the has_post_thumbnail filter hook and the set_default_post_thumbnail_image() method is hooked onto the post_thumbnail_html filter hook.
public function __construct() {
// Add the option field to the General page.
add_action( 'admin_init', array( &$this, 'show_default_thumbnail_id_option' ) );
// Check if the default featured image exists.
add_filter( 'has_post_thumbnail', array( &$this, 'set_has_post_thumbnail_value' ) );
// Display the default featured image.
add_filter( 'post_thumbnail_html', array( &$this, 'set_default_post_thumbnail_image' ), 10, 4 );
}
If you aren’t familiar with them already, hooks are small snippets that developers leave inside their code. They act as placeholders for inserting additional code. This code can serve to unlock new features, in the case of action hooks, or alter existing ones, in the case of filter hooks. To use a hook, you need to write a custom function, called a callback, and then hook it onto the appropriate hook. In the end, it works as if that code was placed directly inside the template file, in the exact location where the hook placeholder is found.
Even though this method might seem strange, it has a huge upside—any additional code you create this way can be added inside the functions.php file of your child theme or a site-specific plugin. This lets you easily manage all your website modifications from one single place. And, more importantly, you won’t lose any of those modifications after updating your theme, which wouldn’t be the case if you kept your code directly inside a template file. All this makes using hooks the most efficient way of adding custom modifications to a WordPress website, and the recommended way for any advanced WordPress user.
In this particular case, we hooked our code onto three hooks which are part of the WordPress Core. But, depending on the case, you can also use plugin- or theme-specific hooks. Now, let’s explore the remaining five methods.
The get_instance() method serves to create an instance of our custom class object—DefaultThumbnailID. And that only happens if the $instance property of our class is NULL, i.e. if there’s no variable assigned to it.
public static function get_instance() {
if ( is_null( self::$instance ) ) {
self::$instance = new self();
}
return self::$instance;
}
The show_default_thumbnail_id_option() method is responsible for creating the default featured image option and displaying it in Settings > General. First, the option is registered using the register_setting() function. We only specified two parameters—the general page (meaning Settings > General) and the name of the option, _default_thumbnail_id, which will be used in all remaining methods. We also added the option field using the add_settings_field() function.
Of the parameters we used, we have default_thumbnail_id as the option ID, Default thumbnail ID as the title, and we specified it is located in the Settings > General section, but not within a specific subsection. And within the call of the add_settings_field() function, we referenced the display_input_field() method as the one responsible for the HTML code that creates the option input field.
public function show_default_thumbnail_id_option() {
register_setting(
'general', // General page
'_default_thumbnail_id' // option name
);
add_settings_field(
'default_thumbnail_id', // ID
__( 'Default thumbnail ID', 'text-domain' ), // Option title
array( &$this, 'display_input_field' ), // Display callback
'general', // General page
'default' // General page section
);
}
As we mentioned above, the display_input_field() method creates the HTML code behind the input field. This is done by first getting the value of the previously registered option using the get_option() function and then storing it inside the $value variable. Additionally, the value is being cross-referenced using the wp_attachment_is_image() function. If the inserted value isn’t a valid image ID, then the $value variable would be set to an empty string. Then, the $value variable is sanitized using the esc_attr() function and placed as the input field’s value whose HTML code is also included inside the method.
Provided you’ve inserted a valid image ID, the same ID will be shown after saving the option. This involves pressing the Save Changes button at the bottom of the Settings > General section. But, if you insert an invalid entry, the input field will appear blank again after you’ve saved it. Simply put, this method is responsible for displaying the option and validating the output in the process.
public function display_input_field() {
$value = get_option( '_default_thumbnail_id' );
$value = wp_attachment_is_image ( $value ) ? $value : '';
?>
<input id="default_thumbnail_id" value="<?php echo esc_attr( $value ); ?>" name="_default_thumbnail_id"/>
<?php
}
The remaining two methods are tied together. The set_has_post_thumbnail_value() method signals that a WordPress post has a valid default featured image to fall back on as long as the previously created option isn’t empty. Since we already added a conditional which checks if the inserted value is a valid image ID, no additional conditional statements are required.
function set_has_post_thumbnail_value( $has_image ) {
$default_thumbnail_id = get_option( '_default_thumbnail_id' );
if ( ! empty( $default_thumbnail_id ) ) {
$has_image = true;
}
return $has_image;
}
Finally, the set_default_post_thumbnail_image() method is responsible for displaying the WordPress default post thumbnail that corresponds to the inserted ID. And, that is only if a post has no featured image and if the default image ID field isn’t empty. The same point about not needing other additional validation checks applies here, as well.
function set_default_post_thumbnail_image( $image, $post_id, $post_thumbnail_id, $size ) {
$default_thumbnail_id = get_option( '_default_thumbnail_id' );
if ( empty( $image ) && ! empty( $default_thumbnail_id ) ) {
$image = wp_get_attachment_image( $default_thumbnail_id, $size );
}
return $image;
}
Since we’ve covered what the code does, let’s look into how you can use this newly created option and what the expected result is.
For starters, navigate to Settings > General and look for the option with the title Default thumbnail ID. In the input field next to the option’s name, insert the ID of an image you wish to use as the default thumbnail.
Make sure to insert a valid image ID into this input field. If you insert an invalid entry (either an invalid image ID or something else), you will only see the message Settings saved near the top of your screen, but your entry won’t be saved or shown in the input field next to the option. This interaction is due to how we coded the display_input_field() method.
If you don’t know how to find the ID of the image you want to use for the WordPress default post thumbnail and featured image, we will show you below. To locate the ID of your chosen image, navigate to Media > Library and click on that image.
If your Media Library display is set to grid, click once on the image to open its Attachment details screen. With this screen opened, we need to look at the URL in the address bar. You’ll find the image ID number after the ?item= part of the URL.
If your Media Library display was set to list, you can open the image edit screen by clicking on the image. Its ID number will be located within the URL, after the ?post= part.
As you can see on the screenshot above, the image ID in our example is 560. Since it is a valid image ID, it won’t be deleted after we insert it into the input field and press the Save Changes button.
After properly inserting the image ID, the only thing that remains is to test if the functionality works as intended. We used the same page with a blog list display to test the desired functionality. After inserting the image ID, we got the following result, which you can see on the screenshot below. The posts that use the default thumbnail image are framed in red on the screenshot.
You should get a similar output on your end if you use the custom code we supplied in this article without any modifications.
Final Thoughts
A post’s thumbnail and featured images are often what catches the reader’s eyes in the first place and what inspires them to stay a while longer on your website. This is why it’s so important to ensure that WordPress default post thumbnails are displayed properly. Among other things, this involves setting up a default post thumbnail for posts that might not have a featured image yet, or where a different one wouldn’t be suitable. This will make the structure of your blog seem cohesive and more professional.
In this article, we talked about implementing the WordPress default post thumbnail image feature with a suitable plugin or by using custom code. We covered both methods in detail to make it easier for WordPress users of all skill levels to pick the one they prefer and implement it with ease.
