Adding an image with a custom field URL in PHP

This thread is resolved. Here is a description of the problem and solution.

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.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 2 replies, has 2 voices.

Last updated by TomE1428 1 year, 10 months ago.

Assisted by: Christopher Amirian.

Author

Posts

June 16, 2023 at 2:45 pm #2616493

TomE1428

I typically use the block editor and the content templates but this website did not allow me to use the single.php file due to the way the content is looped in. So I am making my own temple and I am hung up on how to echo fields into an image that is clickable.

I also have an image field that I want to add another custom field URL to. I have searched around for a while and most examples are showing the use of shortcodes in the PHP file. But these examples are not working for me.

This is what I have and I need to replace "youtube-video" with the correct field. youtube-video is my field slug:

echo '';

This is working but the image is not clickable and the URL is displayed to the right of the image:

echo '<br/><br/> youtube YouTube: ';
echo (types_render_field( 'youtube-video', array() ));

Here is one of the post pages. I am also tasked with making the large image in the upper left to click to the Podbean URL.

hidden link

I am sure this is simple but I just can't seem to make it work.

Thanks you for your time.

June 18, 2023 at 7:32 am #2616725

Christopher Amirian

Supporter

Languages: English (English )

Hi there,

To achieve this, you can use WordPress functions such as `get_post_meta` to retrieve the custom field value. Then, you can echo it within the anchor (<a>) tag's href attribute.

Here is an example code that should help you achieve this:

<?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="<em><u>hidden link</u></em>" width="30" style="margin-bottom:-10px;"></a>';
} else {
    // Optionally, you can display something else if the custom field is empty
    echo 'No video link available.';
}
?>

This code should be placed within The Loop in your template file. It retrieves the value of the custom field youtube-video and uses it as the href attribute for the anchor (<a>) tag, making the image clickable and linking to the URL stored in the custom field.

Please consider that in Toolset you need to add `wpcf-` prefix to the slug of the custom field when using the native `get_post_meta` function.

As for security, it's good practice to `use esc_url()` to escape the URL before outputting it to the page. This helps prevent any security vulnerabilities.

Thanks.

June 21, 2023 at 12:34 pm #2617563

TomE1428

My issue is resolved now. Thank you!