Check out this article on using the featured image feature.
Great article, but is it also possible, to give each featured image you use a custom link…and if so, how to?
I can not find it anywere, and I know more people are looking for a solution..
There are a couple ways to do that. Generally you are using these featured images in your theme as thumbnails to the post. So in that case you can just wrap the thumbnail in the same code as your headline to link it to the post.
But if you want this to be a custom link to any URL, than you need to add a custom field to the post with the URL for that link. Then your theme needs to be setup to load that URL from the custom field for the link of that featured image.
If you want this to be a bit more user friendly you can use a custom meta box. This is how I am adding custom links to featured images in my Meteor Slides plugin, you could check that out if you want an example of the code needed.
The article you posted above is great. But the php he uses still has the naming device as post_thumbnail. In wp 3.0 they changed it to feature image. What should I be calling in the php with the new version? Instead of <?php the_post_thumbnail(); ?>
The terminology was changed in the user interface, but the function names are still the same, check out the documentation.
Hello Jleuze, thanks for your reply’s and information.
It is a bit technical (for me at least).
There is no easier way to solve it and to get feautered images link to a seperate URL?
Because I do not understand how I can setup the theme I downloaded for custom fields for example.
And a custom meta box, the link you have in your answer is more for developers I think..at least I don’t understand..
Thanks for your help!
Hi yodibashi, the easiest way to add a separate link to the thumbnail is to use a custom field.
You only need the custom meta box to make it more user friendly if you are building a site for a client, but this is entirely optional.
For example, if you add a featured image to a post, and a custom field with the name set to “url” and the value set to “http://wordpress.org/”, you can pretty easily customize your theme to add a thumbnail with that link to your post, like this:
<a href="<?php echo get_post_meta($post->ID, "url", true); ?>/"><?php the_post_thumbnail(); ?></a>
One line of code, much simpler than custom meta boxes! 🙂
Hi Jleuze,
Thanks, I can figure that out..
I am not a developer nor a designer, I just want to learn wordpress and try to make I website with WP I like.
This one line of code, in which PHP file do I need to place this or can this differ per theme?
By the way, I am using this theme:
http://bluebubble.dosmundoscafe.com/free-theme-bluebubble-v3-0/
It’s a free theme…but I want the featured image to link not to the post but to a custom link..
You’re probably going to find the post thumbnail used in more than one template file, but if you open the index.php file, on line 30 you should find this:
<?php the_post_thumbnail ?>
Replace that with the code I posted:
<a href="<?php echo get_post_meta($post->ID, "url", true); ?>/"><?php the_post_thumbnail(); ?></a>
Like I said, you will need to search through all the files in the theme and find and replace that code.
Thanks for your help again!
I did what you said and it works! Now the featured image can link to a custom URL. Thanks for your advice, I am sure it will help others to.
So thanks!
Only one minor problem now occured.
As you can see on the demo site from the developer of the theme :
http://mu.flexible7.com/bluebubble/
This text is placed below a featured image thumb:
Clickkaas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vulputate risus placerat nulla iaculis non ultrices diam … Details
After I made the change you suggested, this text now appears through the thumb image. So not below but through it.
Any idea?
No problem yodibashi, in some of the template files, the post thumbnail already has an anchor around it, you would want to be sure to remove that anchor and add the custom one.
Like in the portfolio.php file on line 50, there is a thumbnail with an anchor link:
<a href="<?php echo wp_get_attachment_url($thumbID); ?>" rel="project"><?php } // End check for No Colorbox ?>
<?php the_post_thumbnail('portfolio-thumb') ?>
</a>
You would have to remove the link and add the one for the custom field, and also in this ewxample, the thumbnail is a specific size (portfolio-thumb), be sure not to replace that with the standard size by pasting in the code I posted previously.
This could also be a simple CSS issue, could you post a link to the site you are working on?
Hello JLeuze, good evening and thanks again!
In portfolio.php on line 50, I see:
” rel=”project”><?php } // End check for No Colorbox ?>” rel=”project”><?php } // End check for No Colorbox ?>
What’s the anchor then in this one?
Is that this part:
<?php echo wp_get_attachment_url($thumbID); ?>
I am just setting up basic things now and try to learn, so there is not much to see at the site, but you can look of course:
http://www.vliegmaatschappijen.net/
As you can see, the first featured image, I made this custom field and this image links to wordpress.org as a test.
But you can also see the text through the featured image.
Thanks again!
Yodibashi
Yeah, you have two links around each those thumbnails, you need to remove one of them.
It looks like it isn’t using the correct thumbnail size, I think you need something like this(or another size):
<?php the_post_thumbnail('portfolio-thumb') ?>
Not the default size like this:
<?php the_post_thumbnail() ?>
Thanks, I fixed it! Thanks for your help Jleuze!
