Problem:
I am creating a custom template for a WordPress website and facing difficulties in making an image clickable with a URL from a custom field. The examples using shortcodes that I found are not working for me. I am trying to echo custom fields into an image that is clickable but have not succeeded.
Solution:
You can use the get_post_meta function to retrieve the custom field value and echo it inside the anchor tag's href attribute. Place the following code within The Loop in your template file:
<?php
// Retrieve the custom field value
$youtube_video_url = get_post_meta(get_the_ID(), 'wpcf-youtube-video', true);
// Check if the custom field has a value
if (!empty($youtube_video_url)) {
// Echo the clickable image
echo '<a href="' . esc_url($youtube_video_url) . '"><img src="---" width="30" style="margin-bottom:-10px;"/></a>';
} else {
// Optionally, display something else if the custom field is empty
echo 'No video link available.';
}
?>
Note that with Toolset custom fields, you need to use the 'wpcf-' prefix before the field slug. It’s also good practice to use esc_url() to escape the URL for security purposes.