Depending on the theme you’re using in WordPress, a user clicking on the ‘Featured Image’ of your site might end up being taken absolutely nowhere.
Nightmare!
The Featured Image usually takes up a lot of real estate on a page, especially on a blog post. If a user clicks the image and nothing happens, it’s often seen as poor page design. You lose authority, the user loses interest, and in the blink of an eye they’ve moved to another site.
In this guide, we’ll show you how to make your Featured Image clickable in WordPress, so that the user will be taken to any URL you decide. We’ll also cover how exactly the Featured Image is used in WordPress, and give you a few hints for optimizing your image.
But first, just what is a Featured Image in WordPress?
What is a Featured Image in WordPress?
A lot of WordPress users tend to confuse the Featured Image with the Custom Header Image. We don’t blame them, as the ways that these image types are used can often overlap. Here are the official descriptions, straight from WordPress:
Featured Image: “A featured image represents the contents, mood, or theme of a post or page. Posts and pages can have a single featured image, which many themes and tools can use to enhance the presentation of your site.”
Custom Header Image: “an option which allows users to upload their very own custom image header to obtain a much more personalized look and feel [….] as long as you’re using one of the themes that includes the option, of course.”
Now, it’s all well and good to use touchy-feely phrases like “contents, mood or theme of a post”, but it doesn’t really explain the difference. So here’s our take: the Featured Image is specific to an individual blog post or article, whereas a Custom Header Image is one that runs across your entire site.
This distinction is quite important, as different themes use each image in a different way. It’s also important to know that the old name for Featured Image was ‘post thumbnail’. This is a really confusing name, as the image is usually displayed at close to full size, whereas the word ‘thumbnail’ suggests a small version of the image used for a gallery. However, a lot of guides still refer to the ‘post thumbnail’, so you’ll need to mentally substitute that with ‘Featured Image’ every time you see it.
How to add text to Image Carousel in Elementor
Why Use a Featured Image in WordPress?
The Featured Image is crucial, as it’s the first thing visitors will see when they read your post. As such, it sets the scene for the entire post and can mean the difference between a user staying at your site or looking elsewhere. They say “a picture paints a thousand words” and they’re right — a well-chosen Featured Image has the power to sum up your entire blog before the first words have even been read.
Just look at the difference a Featured Image can make. Here are two featured images for the same blog post, with the main title “The truth about relationships”…
And the second example…
Instantly, a visitor to your site will have decided exactly what the blog is about and whether they want to read it. And that, in a nutshell, is the number one reason why a Featured Image is so important.
There’s also another indisputable reason: a small version of the Featured Image is used on other pages where there’s a reference to that particular blog, such as on archive pages or search engine results. Not having a Featured Image will result in an empty space with some text below it. Once again, this is just another way for users to decide that your site is poorly constructed.
Later on in this guide, we’ll look at a few ways to use your Featured Images effectively. But first, let’s cover how to make Featured Images clickable in WordPress.
How to Add a Featured Image in WordPress
We’re going to assume that you already know how to do this. If not, then you might want to check out the excellent ‘how-to’ guide put together by WordPress.
How to Make a Featured Image Clickable in WordPress
It’s important to know that WordPress never intended for the Featured Image to have any functionality, other than to sit there at the top of the page and look pretty. However, it was obvious that people would click the image, just to see what would happen.
And so there’s a default built into WordPress, which is that clicking on a Featured Image showing anywhere on a WordPress site will take the user to the post where that Featured Image appears. In other words, clicking on the image used as the identifier for a blog post will take the user to that blog post.
But this default cannot be changed — there is no option in WordPress to enter a different URL or any other on-click action. So for this, we need to find another way.
Is WP-Admin redirecting to your Home Page? Here’s the easy fix.
The Ridiculously Easy Way: Do Nothing
As we’ve already said, the WordPress default is that a click on a Featured Image goes to the post that includes that image. In a lot of cases, this is exactly what you want to happen. So check if the functionality is already in place, and if it is, then you don’t need to do anything!
If you’re using a third-party theme in WordPress, you may find that it has some built-in Featured Image options. These often include making the image clickable, so again there’s nothing much needed from you, other than to type in a URL.
The Easy Way: Use a Plugin
Surprisingly, there is no easy way. As far as we can tell (and we’ve scrolled through a lot of plugin listings!) there is no plugin that will make a Featured Image clickable. There are plugins that sound like they’ll do the job, such as Add Featured Image Custom Link, by Viitorcloud. But if you read the description carefully, you’ll find that the plugin allows you to fetch your Featured Image from an external URL. Whilst this is useful, especially if your site is a satellite that draws from client data, it doesn’t offer a way to make the Featured Image clickable.
The Non-Coding Way: Use an Image Slider Instead
Now this might sound crazy, bearing in mind how important it is to have a Featured Image at the top of your post. But if you use a fully-featured image slider, you’ll find that they have a way to make the images clickable, and you can enter any URL you like as the destination. You can even use an image carousel plugin, and just set the number of images in the carousel to one to achieve the same effect.
Or, if you’re feeling more adventurous, you can set the carousel image count to three, and scroll a group of related images in place of your single Featured Image. By floating a block of text over the carousel images, you can create a visually interesting header for your post. We’ve done this ourselves using Elementor, and you can see the result below. (For an even cleaner design, choose to have no arrows and no dots on the image carousel).
The only downside of this technique is that you will need to choose a Featured Image, which is needed wherever a link to your post appears. You could take a screenshot of your image slider or carousel, then crop that to a square and upload it as the Featured Image for the post. Or you could select a generic image — the choice is yours.
Rank Math or SEOPress? We find out which is best for improving your SEO
The Coding Method: Not for the Faint-Hearted!
For those amongst you who are happy editing PHP files and doing some basic coding, we’re going to show you a snippet of code that you need to add to the functions.php file for whichever theme you’re using. We suggest you create a child theme first, and then add the code to that version of the functions.php file. That way, you won’t lose the code when you update the plugin.
The functions.php file is a set of custom codes and values which can interface with WordPress and make changes at a low, fundamental level. When you activate a theme, the functions.php file automatically loads and starts telling WordPress what changes need to be made.
A word of Warning…
Editing the .php file of any theme, even a child theme, can create problems. If you accidentally delete a semi-colon or forget to add a slash sign at the end of a section, then the entire file could be reduced to a pile of unreadable gobbledygook. If you’re in any way worried about creating child themes and editing text files, then we strongly suggest you try one of the other methods first.
That being said, the coding option is definitely the most efficient. Because your system doesn’t have to run through yet another plugin, there is little to no impact on site performance. Also, you’re not relying on a third-party method to achieve the result: the method is right there, hardwired into your code.
So, having created your child theme and opened the functions.php file for editing, you now need to follow these three steps.
Step 1: Add the code. Add the following WordPress snippet to the functions.php
// Add External Link to Featured Image with Custom Field
add_filter('post_thumbnail_html','add_external_link_on_page_post_thumbnail',10);
function add_external_link_on_page_post_thumbnail( $html ) {
if( is_singular() ) {
global $post;
$name = get_post_meta($post->ID, 'ExternalUrl', true);
if( $name ) {
$html = '<a href="' . ( $name ) . '" target="_blank" >'. $html . '</a>';
}
}
return $html;
}
Backlinks are Important. Here’s how to build authority for your WordPress blog.
$html = '<a href="' . ( $name ) . '" target="_blank" >' . $html . '</a>';
Step 2: Enable WordPress Custom Fields In order to activate our snippet, we need to get an input value for the PHP code. To do this, we create a custom field. But first, you need to make sure ‘Advanced Fields’ is ticked in your Display options. For WordPress 5.0/Gutenburg you need to click on the burger menu (three vertical lines in the top right), head to ‘Options’ and ensure ‘Advanced Fields’ is checked.
Access to these options is different for every theme, so you may need to consult the manual if you’re not sure. For example, in the Newspaper Theme — which we run for one of our blogs — the options are accessed from a tab in the top right corner marked ‘Screen Options’, and the relevant tick box is called ‘Custom Fields’, not ‘Advanced Fields’.
Before moving to Step 3, you will have created your post and added all media, including selecting and uploading the Featured Image.
Step 3: Add the New Custom Field. Once your post is complete, scroll down to find the Custom Fields panel and then go to ‘Add New Custom Field’. Under name, we need the ID name we used in the code, so enter “ExternalUrl”. Next to that, in the value box, type any full URL that you choose.
And that’s it! Whenever a user clicks on your Featured Image, they’ll be taken directly to whichever URL you entered in the Value box.
A Few Tips for Using Featured Images Effectively
As we’ve already noted, a good Featured Image can really set the tone of your blog. But it’s not just about finding a good image; it’s about finding the right image. Here are a few tips on selecting Featured Images.
Find a Good Image Gallery
Obviously, you’re free to use any image you want, but you’ll need to have a good supply. The best answer is to find a good online gallery. There are many free galleries, such as the Creative Commons gallery which stores over 500 million free images. Another great source is Pixabay, which offers a great range of very useable, high-quality images.
For images from free sites like Pixabay or Unsplash, you will need to attribute the photographer by adding text to the image. This can look very ugly, especially on the first image that visitors see. We therefore recommend you subscribe to a paid image service and make sure you use that site to source your Featured Image. Because you’re paying a license fee, you are purchasing the images for commercial use and you don’t need to include any attribution, so your Featured Image can remain uncluttered.
Choose a Style and Stick With It
Every post you create will have its own WordPress Featured Image, and that image may appear multiple times across your site. Over a period of a year, that could well be over 100 posted images — and these all say something about your site. It’s therefore worth thinking about how these images help to represent not just individual post content, but also your site as a whole.
So the best strategy here is to keep the look and feel of your images consistent, as they are effectively part of your branding. You might choose to use realistic images, but always with a particular colour tint which becomes part of your blog’s identity. Or you might decide to use an abstract graphic for each post; in which case you should pick an artist that has a wide range of graphics on offer, so that the style of the graphic used remains consistent.
Are you getting a WordPress 404 error? Here’s how to fix ‘404: permalinks not working’
You should also set a standardized size for each WordPress featured image. A lot of users will click through your blog posts, looking for one that seems interesting. Seeing a lot of posts and images that all conform to the same design raises confidence in your site, which in turn can generate more conversions. There’s no best image size, as all themes are different, but 1200px by 400px is a good starting point as it’s about right for most display types.
Optimize your WordPress Featured Images
As we’ve already seen, over a few months the number of images you use can be surprisingly high, and will eventually take up a lot of space on your server. This can have a negative effect on your site’s performance and cause slow load times, which invariably leads to users hitting the back button.
Therefore we recommend the use of an image resizer plugin, ideally one that uses a lossless algorithm so there’s no reduction in quality: only in size. Smaller images are less likely to drag down your page speeds, and they can help to keep down your hosting costs. We’re big fans of Optimole, which includes a ‘set it and forget it’ auto-optimizer and a dedicated CDN (Content Delivery Network) to reduce server strain. But there are many other image optimizer plugins available, so take a little time to find the right one.
In Conclusion
Thank you for taking the time to read our guide. We hope this article helped you learn all about the WordPress Featured Image, and how to make it clickable. If you have any questions or comments, then please get in touch with us. Finally, why not share this article with someone who might benefit from learning the same techniques?
