Wordpress Tips: How to Automatically Link URLs in Advanced Custom Fields

WordPress provides a wealth of functionality to assist in presenting your content in the way you desire. Auto-hyperlinking of URLs in your post content field in most cases can easily be done by adding the following line of code to the WordPress functions.php file:

add_filter( 'the_content', 'make_clickable', 12 );

However, if you’re using Advanced Custom Fields (ACF) then you will find this filter doesn’t work on your WYSIWYG fields. Luckily for us, ACF provides a filter for us to alter the content in the field called “load_field” and WordPress provides us a handy function call "make_clickable", which converts content URI, www, FTP, and email addresses into links.

More About Wordpress Development Services

How To:

Looking at the code example below:

• Place this code in your child themes functions.php
• We pass in the value that is stored in the database as $value
• Assign $value to the make_clickable function and run the $value through the function, this will convert the links to hyperlinks
• We then return the $value

function my_acf_load_value($value) {
  $value = make_clickable($value);
  return $value;
}

Use the proper hook desired:

// Filter based on all fields.
add_filter('acf/load_value’, 'my_acf_load_value', 10, 3); 
// Filter based on field name. 
add_filter('acf/load_value/name=field_type’, 'my_acf_load_value', 10, 3);
// Filter based on field name. 
add_filter('acf/load_value/name=field_name’, 'my_acf_load_value', 10, 3);
// Filter based on field key.
add_filter('acf/load_value/name=field_key, 'my_acf_load_value', 10, 3);

Full code:

The following code demonstrates how to force a single field to auto-hyperlink inline urls.

/**
 * Auto-hyperlink urls for the about_content field.
 */ 
function my_acf_load_value($value) {
  $value = make_clickable($value);
  return $value;
}
add_filter('acf/load_value/name=about_content’, 'my_acf_load_value', 10, 3); 

Presto! Any values entered into your Advanced Custom Field which contain url strings will now be output as proper links to the url.