WordPress - How To Optimise ACF Link Field Types By Using Link Array As A Return Value

18 July 2021
3 min read

Advanced Custom Field (ACF) is a great plugin that helps ease the gap between PHP coding in WordPress — from the WP-admin fields and the saving to database. At Oangle, we use the Pro version of ACF plugin for 90% of our projects. There is also a free version of it that is a great tool for any aspiring WordPress developer.

In this article, we’d like to share a handy piece of code for the link field of ACF. In the field type options, you’ll be able to select ‘Link’. This allows you to use the default WordPress link feature, which helps you to save 2 fields when creating your ACF setup.

For example, without using the link field, you will need the following 3 fields to set up a link:
(i) Text field – for the link/button text
(ii) Link URL – for the link’s url
(iii) Target state – for users to select whether they want the link to open up in a new tab or not.

Using the link field, however, admin users will see this when trying to add the link:

On clicking it, they will see the default WordPress link feature:

insert/edit link

This combines the 3 required field into one — a very admin friendly field for call-to-actions (CTAs), buttons and links.

How to add active state to your custom post-type link in a menu

If you have created a custom post-type, WordPress will not add the active class to the menu item for you automatically when you visit that particular post-type’s single post. This post explains how to achieve this.

However, there is an important setting for the field type, known as ‘return value’:

As lay developers, it is always easier to set the return value to ‘link url’, because you’ll be able to easily use the field in your PHP template file by just:

<?php the_field('field_name'); ?>

However, in that case, you will not be able to utilise the ‘link text’ field and the target state setting.

Upon setting your return value to ‘link array’, use the below piece of code to display links in your PHP template file:

Remember to change the name of your field in the above code.

Unsure of where to insert this? Don’t want to break anything? Our team of WordPress developers in Singapore can accomplish this job for you safely and efficiently. We are highly experienced in WordPress and web development and are equipped in solving any issues you might be facing.

Be the first to get tips on web design, WordPress & more

Sign up for our newsletter to be in the loop.

RELATED ARTICLES

Thumbnail
Thumbnail
Thumbnail

Have queries or need some advice?

FOR LIGHTNING-QUICK CORRESPONDENCE, DROP US A
WHATSAPP MESSAGE OR EMAIL US