Dynamic Link Text & URLs from ACF Link Fields in Oxygen

In this tutorial we’ll look at how we can use both the link text & the link URL from link fields in ACF when adding dynamic links in Oxygen.

Unlike with the URL field in ACF, the link field has an interface that allows content editors to input more information about a link, not just a URL. It also allows them to search for existing content to link to.

When we’re using the link component in Oxygen, we can use the dynamic data feature to pull in the URL from this link field dynamically. This works out of the box like with most other ACF field types.

If, however, we also want the link text to be dynamic also, taken from that same link field, we don’t have a built in way to do that.

Getting the Link Text

The first step is to make sure we are setting the Return Value in our link field to ‘Link Array’ instead of just ‘Link URL’. This array still includes the link URL, but it also contains the link text which what we need.

This creates a problem though. The link field is now giving us an array, not a URL. So we can’t just add it in using the dynamic data options in Oxygen, it will just output ‘array’.

We can create a custom function that returns either the link URL or link text from this array. This we can then use in Oxygen using the PHP Function Return Value feature.

In our code snippets, we can add this function;

/**
 * Function to output either Link URL or Link Text from ACF link field or sub field
 */
function acf_link_field($field_name,$type,$subfield = "false") {
	
	$link = ($subfield == 'true') ? get_sub_field($field_name) : get_field($field_name);
	
	if( !$link ) {
		return;
	}
	
	$link_output = ($type == 'url') ? esc_url( $link['url'] ) : esc_html($link['title'] );
	
	return $link_output;

}

This new function will return either the link URL or the link Text (title in the code).

There are three parameters to use, $field_name, $type & $subfield.

• $field_name = The field name
• $type = Can be either url or title
• $subfield = Optional. Add ‘true’ if link field is a sub field.

Example Use Case in Oxygen

Let’s say we have an ACF repeater field to display team member profiles on a page. Inside the repeater field we have three sub fields. An image field for the profile photo, a text field for the name and a link field.

Below is what the edit screen would look like. We can see the links on the right are showing both link text and the URLs.

Adding Our Dynamic Links in Oxygen

Inside a repeater element, when it comes to adding the link component, here are the steps to apply both the URL and Text from the link field..

Adding the Link URL

Before doing anything though, if we want these links to open up a new tab in the browser, we first click ‘set’ (next to the link URL field) and select ‘Open link in a new tab’, ignoring the URL field.

Then to add our dynamic link URL, we click ‘data’ then head to ‘PHP Function Return Value’ where we can add our new function name and enter our three parameters as the function arguments.

Our function name is acf_link_field. The first parameter is the field name for the link field (in this example it’s ‘team_member_link’). The second parameter is ‘url’ and the third parameter is set to ‘true’ because in this case, it is a sub field.

Adding the Link Text

To edit the link text, we double click on the link and then click ‘Insert Data’ located at the very top of the screen. Then we head again to ‘PHP Function Return Value’ to repeat the same thing as above, but this time with the second parameter being ‘title’ instead of ‘url’. (it’s called title in ACF, not text)

This will make sure the link text is dynamically populated.

That’s all there is to it. For links that are just fields, not sub fields, it’s the same process, but only the first two parameters are needed.