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