How to use and display the ACF Link field

About the Link field

The ACF Link field is one of many ACF field types and allows you to select and store any web URL within a page. Developers commonly use it for various types of links and buttons.

The Link field uses the built-in WordPress link popup. And apart from the actual link, it also provides a field to define a link label with some settings that control the link. Like the setting, that controls whether should it be open in a new tab or not.

When you need to create a link to an internal file, for example, a .pdf that's uploaded to the Media Library, you need to use the ACF File field instead of the Link field.

Return formats

The Link field has a Return Format setting with two options: "Link Array" and "Link URL". Whichever you've chosen here won't affect the look of the field for admins or editors. As the fields in the popup will still be the same, that's because the Return Format settings control the coding side. Here we mean the response that you receive in the code from the get_field() function when requesting the field.

We recommend that you always use the "Link Array" option. The second "Link URL" option won't allow you to get the label or have the "target" setting (open in new tab). This means you'll need to "hard code" these arguments in your template files. Due to it you won't be able to change them via the popup later on.

Behind the ACF scenes

Behind the scenes, the ACF Link field stores your choice in the Post Meta of the current page (or post). In the Database the meta field stores data as an array (regardless of the Return Format). This is to keep all the link fields i.e. URL, Link text and "open in new tab" option available for use. This is why we've suggested using the "Link Array" Return Format. As it fits the database format and provides all the available information about the link.

Display Link field with PHP code

To display the Link field you'll need to create an HTML markup for the link and insert data from your field. The code will be different depending on the selected Return Type. Below we provided examples.

1. PHP code to display the Link field with the "Array" Return Format:

<?php

// don't forget to replace 'link' with your field name
$linkData = get_field('link');

if ($linkData) {
    // if the 'target' is presented, it's a bool. We've to convert it into the HTML format  
    $target = isset($linkData['target']) && $linkData['target'] ?
        '_blank' :
        '_self';
    // displays the link. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' target='%s'>%s</a>",
        esc_url($linkData['url']),
        esc_html($target),
        esc_attr($linkData['title']));
}

2. PHP code to display the Link field with the "URL" Return Format:

<?php

// don't forget to replace 'link' with your field name
$linkUrl = get_field('link');

if ($linkUrl) {
    // displays the link. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' target='_blank'>Read more</a>",
        esc_url($linkUrl));
}

With the "URL" Return Format we have to hardcode the label of our link. It means you won't be able to change it without amending the code. That's why it's better always to choose the "Array" Return Format.

You can find more information in the official ACF article.

Display Link field with a shortcode

The code way is pretty flexible but has a row of disadvantages.

1. It takes your time
2. You must know the Return Type
3. You need to remember specific key names in the response array
4. You've to manually find the right page template in your theme and amend it

There is another way though, a way that allows you to display the ACF Link field (or any other field type actually) without coding it. It's all possible thanks to the free ACF Views plugin which makes it super easy and saves you a lot of time.

The plugin takes care of the HTML markup. We only need to choose the ACF fields to display, then copy the auto-generated shortcode and paste it to any place on our page. Then nothing extra is required from our side. Read how to display ACF fields without coding to know all benefits of the shortcode approach.

Below we attached a video tutorial that shows how to display ACF fields on a single page using the shortcode way. The video is common for all the ACF field types. More video tutorials on the official YouTube channel.

But feel free to skip the video as below we provide a full step-by-step guide exactly for the ACF Link field.

Let's dig in.

In case you're going to follow along you'll need to install the ACF Views plugin on your WordPress website and activate it. Keep in mind that the plugin is an add-on to the ACF plugin. So make sure the ACF plugin is installed and active too. The good news is that both plugins are free to download and use.

Now you're ready, let's continue.

Step 1. Creating a View

When you activate the ACF Views plugin a new item appears in the admin menu, called "ACF Views". The item has several sub-items, but in our case, we'll be working only with the one called "ACF Views".

Click that menu item to open the Views page and then click the 'Add New' button to create a View.

Note: The term "View" is the name given for the special Post Type the plugin provides. Every View is a list of ACF fields to display, so you may have many different Views to display different fields (or sets of fields) for different posts/pages.

On the new page give your View a name. It can be anything that describes the View, this name will only be displayed in the admin list of Views making it easier to find. I've called my View "Page link".

Assigning fields

Now you need to assign a new field to your View. Click on the 'Add Field' button and select your 'Group' from the dropdown. In my case, the group has the "Page fields" name.

Then continue to select the target field from the list. In my case, the field is called "Read more".

Note: The field type is shown in brackets for easy identification.

In this case, you should see the type is a "link". You can define a "Link Label" if needed or leave it empty if you want the plugin to pick it up dynamically from the link's data.

Overall every View can have an unlimited amount of ACF fields, for our case, we'll use only one.

Click on 'Publish' to save and publish your View. When it's published you'll see that Shortcodes were generated in a block on the right side of your View edit screen. Every View has its own shortcode with a unique ID (the shortcode structure is the same for all Views, but arguments are unique).

[acf_views view-id="xxxx" name="x"]

Now copy the shortcode, and click on the 'Copy to clipboard' button of the first shortcode.

Step 2. Paste the shortcode in place

Everything is ready to display the ACF Link field. Visit your target page (with the Link field), and make sure that the field has some selected URL. Then paste the shortcode anywhere you'd like in the page content.

In case you're using the Gutenberg editor: click on the plus button in the top bar and choose the "Shortcode" block from the list. Then paste your shortcode in the block and press the 'Update' button to save your post/page.

Then visit your page to see the result. In case you've done everything correctly you should see the link with your defined label. Or with the label picked up from the field in case you've left it empty.

If you don't see your link, then go back and edit the page. Make sure you've selected a URL in the ACF link field and save the page because if the field is empty it'll have nothing to display.

Final thoughts

We've shown you how to use the ACF Link field, its options, and two ways to display it. So now you can easily use the field anywhere.

Don't forget that a View in the ACF Views plugin supports multiple fields, which means that you can add more fields to your View at any time. The plugin also supports all available field types.

In fact, you can style the fields output without modifying your theme: use the CSS code field (see the View's Advanced Tab). The CSS added there will only be printed on pages where you're using the shortcode. So you won't need to search for a place to paste your CSS code any longer.

To get more information about the plugin visit the ACF Views official website. There you will find links to the plugin's YouTube channel (with video tutorials) and the plugin Documentation. Those resources are useful for anyone that's new to the plugin.