WordPress.org

Ready to get started?Download WordPress

Forums

Set a custom link for featured images (13 posts)

  1. testlink25
    Member
    Posted 2 years ago #

    My theme displays featured images of posts on the frontpage, When clicking on them it takes you to the post page, I want instead to set a custom url to take me outside of the website when clicking on the featured images.how can I do that?

  2. stvwlf
    Member
    Posted 2 years ago #

    It depends on the theme. The normal code is

    <?php if ( has_post_thumbnail() ) { ?>
       <a class="thumbnail" href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
    <?php } ?>

    That is wrapping the thumbnail in a link to the post permalink.
    You can replace the_permalink() with a different URL.
    If the URL is stored in a post custom field (named ExternalURL in this example) this should work:

    <?php
    $url = get_post_meta( $post->ID, 'ExternalURL', true );
    if ( has_post_thumbnail() ) {
       if ( $url ) {
          echo '<a class="thumbnail" href="'. esc_url_raw($url). '">';
       }
       the_post_thumbnail();
       if ( $url ) {
          echo '</a>';
       }
    ?>

    This only includes the link if there is a value in the url custom field. Its not validating that the URL is valid. It is escaping it to prevent malicious code from running.

    You have to find where in your theme to insert this code.

  3. testlink25
    Member
    Posted 2 years ago #

    Hi Stvwlf.
    first of all, thank you.

    I will install your code in my theme, this the part of index that calls the featured image (I guess),

    <div>
    
    <div class="post-header">
    						<?php frogs_media($post->ID); ?>
    					</div>
    
    					<div class="post-content">
    						<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
    						<p><?php frog_the_excerpt_reloaded(50, '<a>', TRUE, '...', FALSE, 1); ?></p>
    					</div>

    in the above code, the featured image is inserted with <div class="post-header">
    <?php frogs_media($post->ID); ?>
    </div>

    where can I insert your code? should I go dig in the source where frogs_media came from?

    please when writing bare in mind that I am a complete newbie.
    thank you

  4. testlink25
    Member
    Posted 2 years ago #

    after some diggin, here is what I found on the file theme-functions.php on the theme folder, i believe this defines the frogs_media thingy in the above post.

    function frogs_image($postID)
    {
    	if(has_post_thumbnail())
    	{
    		$image_id = get_post_thumbnail_id();
    		$image_url = wp_get_attachment_image_src($image_id,frogs_column_width($postID));
    		$image_url = $image_url[0]; 
    
    		echo '<a href="'.get_permalink($postID).'"><img src="'.$image_url.'" alt="" '.imageheightwidth($image_id,frogs_column_width($postID)).' /></a>';
    	}

    should I replace

    <a href="'.get_permalink($postID).'"> </a>

    with the code you posted above?
    Thank you

  5. stvwlf
    Member
    Posted 2 years ago #

    hi

    No, don't replace with my code. Give me a little while and I will work out an alternate code for you. You will need to add a custom field to posts where you want the featured image link to go to a URL other than the post. I will set the code up to make linking to the post the default if there is no custom field defined on that post.

    If you are not familiar with working with custom fields, first you have to make the custom field metabox visible. In the upper right corner of the Post Edit screen is a Screen Options button. Click it, and check the Custom Fields checkbox. Then you can see the checkbox.

    I arbitrarily picked ExternalURL as the name of the custom field the code will be looking for. You can name it anything you want as long as the frogs_image function is set to look for that custom field name.

    I'll post again when the code is ready for you to try.

  6. stvwlf
    Member
    Posted 2 years ago #

    OK, here you go. Its always a good idea to make a backup copy of a code file before you change it so if anything doesn't work out you can revert to the original version.

    replace the whole

    if(has_post_thumbnail())
    {
       ...
    }

    block with this. There could be a minor syntax error in the block - I can't test it directly on your theme as I don't have that theme. Let me know if you get any error message you can't figure out. This looks first to see if the custom field has been defined that holds the external URL (The whole URL should be entered, like http://example.com/this/that/nameoffile.php )

    If the external URL exists it links to that. If not it links to the post.

    if(has_post_thumbnail())
    {
    	$image_id = get_post_thumbnail_id();
    	$image_url = wp_get_attachment_image_src($image_id,frogs_column_width($postID));
    	$image_url = $image_url[0];
    
    	$external_url = get_post_meta( $postID, 'ExternalURL', true);
    
    	if ( $external_url ) {
    		echo '<a href="'. esc_url_raw($external_url). '" target="_blank"><img src="'.$image_url.'" alt="" '.imageheightwidth($image_id,frogs_column_width($postID)).' /></a>';
    	} else {
    		echo '<a href="'.get_permalink($postID).'"><img src="'.$image_url.'" alt="" '.imageheightwidth($image_id,frogs_column_width($postID)).' /></a>';
    	}
    }
  7. testlink25
    Member
    Posted 2 years ago #

    Ok, Thanks a bunch.

    yes I familiarized myself with custom posts and stuff :P I am within my first week of wordpress and had to learn all that. it did cost some gray hair though :)

    Do custom fields stay on the database? in case I change the theme or I move my wordpress would I lose them or keep them?

  8. testlink25
    Member
    Posted 2 years ago #

    sweet! I will try that and get back to you

  9. stvwlf
    Member
    Posted 2 years ago #

    Custom fields always stay in the database. They are associated with the post, so no matter what theme you use the custom field is still there.

    The display code I sent, however, is associated with the theme. If you change the theme the new theme's code will need to be changed to use the external link when displaying a featured image.

    That is one of the differences between a theme and a plugin. Plugin code is active all the time, across themes. Theme code is only active when the theme the code is in is active.

    That frogs_image uses its own way of displaying featured images. Other themes will do it in other ways. Thus their code will need to be modified. The principle of displaying it is the same in all themes but the method used can vary by theme.

  10. testlink25
    Member
    Posted 2 years ago #

    That worked like a charm! Thanks a lot! your explanation is helpful too.

    I clicked on your username and it took me to your website, I will keep that on my bookmarks for future reference in case I need your professional help.

    Take care!

  11. testlink25
    Member
    Posted 2 years ago #

    Also I'm adding search keywords in case someone searches for same issue, 'How to set custom link for featured image on foliogridpro'

  12. pinkbell
    Member
    Posted 1 year ago #

    Hi,
    I have a similar problem. I'm using the free "Simple Grid" theme http://www.dessign.net/simple-grid-theme-responsive/ and I would like my featured images from the front page to direct the user to an external link (amazon link). Using custom fields seems a good idea. I am not familiar with coding and the solutions seem to be "custom made". As I don't know how to adapt the code sequence to my theme, I was wondering if I can get any help...

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    As you're not contributing towards the original poster, you should create your own thread.

Topic Closed

This topic has been closed to new replies.

About this Topic