ACF Template Builder

Adding third party ACF fields

This plugin isn't limited to the ACF field-types that come standard with ACF Free or Pro. It will work with any ACF field-type but you may have to write your own output filter. Notice the may? By default the returned value will be outputted, automatically!

Awesome ACF is a good starting point for a variety of third party extensions. For instance, you might want to install the Font Awesome ACF.

Just download, activate and add it to any fieldgroup that is associated with your CPT.

You can add the field to your layout by simply selecting the ACF fields > Any button and selecting the assigned fieldname.

template-step3

The plugin is designed to fallback to a default output function, so that it will always output the selected Return Value of that field. For the Font Awesome ACF the Return Value of type Icon Element will render an icon in the browser:

acf-3rdparty-2

Here the Heading Module has a heading that's consisting of an ACF field called fa_icon and the WP title. It will output the following heading:

acf-3rdparty-1

Creating your own filters for custom field-types

Although there may be many cases in which the results are adequate, you may find yourself in need of a more tailored layout.

You might need a bigger icon. When setting the Return Value to Icon Class you will get the fa-icon class-name.

add_filter( 'bbacf/helpers/get_acf_field/type=font-awesome' , 'return_custom_acf_fontawesome' , 10, 5 );

/**
 * return rotated font-awesome icon
 * @param  [type] $string       [description]
 * @param  [type] $field_object [description]
 * @param  [type] $value        [description]
 * @param  [type] $atts         [description]
 * @param  [type] $postid       [description]
 * @return [type]               [description]
 */
function return_custom_acf_fontawesome( $string , $field_object , $value , $atts = null , $postid = null ) {
	return '<i class="fa '.$value.' fa-lg fa-rotate-90"></i>';
}

The code above will create the hook for the font-awesome field-type, and will be executed whenever it is called. It will return the same icon as before, but now you can add more classes, in this example making it rotate 90 degrees.

acf-3rdparty-3

You might need to add some logic when applying the output.