WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to call featured image (19 posts)

  1. peters2007
    Member
    Posted 4 years ago #

    I've currently got a front page which displays the lead article and then a series of links to the next few articles. It's a theme that has been self-created.

    I've read about the Featured Image feature that was introduced to WordPress recently, but while it's easy enough to add a Featured Image, I can't find any documentation about how to actually call/configure the featured image if you're making your own custom theme (as opposed to using a theme which already uses it).

    For example, if I want to display on the front page the featured image associated with the lead article, what exactly should I be doing?

  2. Josh Leuze
    Member
    Posted 4 years ago #

    Check out this article on using the featured image feature.

  3. yodibashi
    Member
    Posted 4 years ago #

    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..

  4. Josh Leuze
    Member
    Posted 4 years ago #

    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.

  5. nikijones
    Member
    Posted 3 years ago #

    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(); ?>

  6. Josh Leuze
    Member
    Posted 3 years ago #

    The terminology was changed in the user interface, but the function names are still the same, check out the documentation.

  7. yodibashi
    Member
    Posted 3 years ago #

    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!

  8. Josh Leuze
    Member
    Posted 3 years ago #

    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! :)

  9. yodibashi
    Member
    Posted 3 years ago #

    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?

  10. yodibashi
    Member
    Posted 3 years ago #

    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..

  11. Josh Leuze
    Member
    Posted 3 years ago #

    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.

  12. yodibashi
    Member
    Posted 3 years ago #

    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?

  13. Josh Leuze
    Member
    Posted 3 years ago #

    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?

  14. yodibashi
    Member
    Posted 3 years ago #

    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

  15. Josh Leuze
    Member
    Posted 3 years ago #

    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() ?>
  16. yodibashi
    Member
    Posted 3 years ago #

    Thanks, I fixed it! Thanks for your help Jleuze!

  17. Josh Leuze
    Member
    Posted 3 years ago #

    No problem!

  18. chrisstokes
    Member
    Posted 3 years ago #

    Hi!
    I have a similar problem to the one above but not sure if it can be solved in the same way.
    I too am simply building my own website using wordpress without much knowledge of CSS or PHP.

    Currently I am using the theme Shaken Grid, which is great for my portfolio site as it uses Colorbox to automatically enlarge all my featured images in a Lightbox style.

    However, I prefer the style and layout to another theme (Paragrams) which doesn't have this functionality. I've installed the Colorbox plugin but it won't work on Featured Images because this theme automatically links Featured Image thumbnails to the post, instead of to the full size image.

    My question is, is there a way to automatically link Featured Images to the fullsize versions of themselves instead of the post?

    Thanks very much in advance :)

  19. Josh Leuze
    Member
    Posted 3 years ago #

    Hi Chris, this should be doable. Here is a basic loop that worked for me:

    <?php global $post;
    
    	$loop = new WP_Query( array( 'posts_per_page' => 5 ) );
    
    	while ( $loop->have_posts() ) : $loop->the_post();
    
    	$link = wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) );
    
        echo '<a href="' . $link . '">';
    
    	the_post_thumbnail();
    
    	echo '</a>';
    
    	endwhile; ?>

    You might have to mess around with this and create multiple featured image sizes so that you can load a smaller thumbnail size and link that to a larger version of the featured image.

    There is a bit more info on this post on WordPress Answers.

Topic Closed

This topic has been closed to new replies.

About this Topic