About the ACF Link field. How to use and display

A guide for the ACF Link field, you’ll learn available options of the field, how to use and display it. We’ll show two ways to display the field, one of them uses shortcodes and doesn’t require any coding.

About the ACF 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. It’s commonly used for various types of links and buttons.

The Link field uses the built-in WordPress link popup and a part from the actual link, it also provides a field to define a link label with some settings that control the link, and if it should open in a new tab or not.

When you’d like 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, you can read more in this article about the ACF File field.

Add the Link field to any ACF group by clicking on the ‘Add Field’ button and selecting ‘Link’ in the ‘Field Type’ dropdown.

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, the fields in the popup will still be the same, that’s because the Return Format settings control the coding side, 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), which means you’ll need to “hard code” these arguments in your template files and you won’t be able to change them via the popup later on.

When you’ve added a Link field to the target page, admins and editors can select a URL and it’ll be stored within the page.

The built-in WordPress link popup allows you to define a link label and to open link in a new tab

After setting up a URL you can edit the details at anytime. Click the ‘Pencil’ icon to edit the link fields or click the ‘X’ icon to remove it.

ACF Link. Behind the 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 is stored 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 ACF 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']));
}

1. 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 ACF Link field with a shortcode

The code way is pretty flexible, but has some disadvantages, a) it takes your time and b) you need to know the Return Type, c) you need to remember specific key names in the response array and after that d) 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 in our page (it can be pasted anywhere) and nothing else will be required from our side.

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 addon 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”.

The ACF Views page contains a list of Views, for sure at the begin there will be no View items.

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”.

Target ACF fields can be chosen easily from the fields list

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 is called “Page fields”.

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, 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), 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.

Gutenberg block with an ACF Views shortcode.

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).

ACF Link field displayed on a page.

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.

Originally published at https://wplake.org on December 16, 2022.