How to Display Hyperlinked Text Using ACF’s Link Field in WordPress

Understanding the Issue

The ACF plugin allows you to add custom fields to your WordPress site. One useful field is the ‘Link’ field, which can return an array containing both the URL and the link text. However, you may want to show only the text hyperlinked with the URL without displaying the actual URL.

The Challenge: A Real-World Scenario

Recently, while working on a directory template for a client’s website, we faced an intriguing challenge. The client needed a field where they could input social media usernames that would be clickable links leading directly to the corresponding Instagram profiles when displayed on the front end. 

We were using Advanced Custom Fields (ACF), a powerful tool for custom data management in WordPress, but we hit a roadblock. Neither the text field nor the link field provided the desired outcome. The text field didn’t allow the username to be clickable, while the link field displayed both the username and the full URL, which cluttered the interface.

This was different from what our client wanted. They requested a clean, clickable username that, when clicked, would take visitors directly to a user’s Instagram profile. It was time to get creative and solve this with a custom function.

The Solution is to show hyperlinked text using the ACF link field.

Step 1: Set Up Your ACF Link Field

First, Create a new field group in your WordPress dashboard’s ‘Custom Fields’ section, add a ‘Link’ field, and configure its return format to ‘Array.

Step 2: Input Your Data

While editing your posts or pages, you’ll see the ACF link field. Enter the desired URL and the text that should display as the hyperlinked text.

you will see that the text appears on the front end, but you cannot click on it as it is not hyperlinked.

Step 3: Add the Function to Your Theme

Next, you’ll need to add a custom function to your theme’s functions.php file. This function will output the hyperlink HTML using the URL and text from your ACF link field.

You can install and activate the wp code snippet plugin if you are not good with editing theme files and don’t want to end up breaking the site.

1. Install the plugin and activate it.
2. Add a new snippet.
3. Copy the snippet below and paste it into the blank field. Make sure to select the code type as “PHP.”

function acf_link_text_with_url( $field_name ) {
    // Get the array of the ACF link field
    $link = get_field( $field_name );

    // Check if the link is not empty
    if( $link ) {
        $url = $link['url'];
        $title = $link['title'];
        
        // Create the hyperlink with the URL and text
        return '<a href="' . esc_url( $url ) . '">' . esc_html( $title ) . '</a>';
    }

    // Return empty string if the link is not available
    return '';
}

4. Activate the code and click on update.

Step 4: Display the Link

Within your theme’s template files (like single.php), call the function where you want the link to appear:

I am using WordPress, and I want to show this anywhere I want. So, I created a shortcode – I can use the shortcode anywhere on my post.

For this, I again used the WP code snippet plugin.

1. Add a new snippet.
2. Copy and paste the code below in a blank field.

echo acf_link_text_with_url('your_link_field_name');

3. replace the ‘your_link_field_name’ with your set field name.
4. select the code type as PHP and Insert the method as “Shortcode”.
5. Copy the shortcode and paste it anywhere you want the link field to show text as hyperlinked.

Step 6: Check Your Post/Page

Visit the post or page where you’ve applied the code or shortcode to ensure it displays as expected.

By following these steps, you can keep your site’s design clean and user-friendly by displaying only the essential hyperlinked text for your ACF link fields.