As a WordPress developer, I create a lot of custom data to give clients the functionality they want. I’ve used every way possible, like posts for a custom post type, post meta, taxonomies, options, custom tables, etc. However, for ease of use and client convenience, I mostly use either WordPress native custom fields or the Advanced Custom Fields PRO plugin. With ACF, the interface is great, and, having used it so much, I can quickly setup any field type very quickly. The most time consuming part of using custom data is when it comes time to integrate into the theme.

For Example

One use case I keep encountering is displaying separate fields in a single list. Think of product product specifications. We might have fields like UPC, Length, Weight, Material, Pages, and so on. If we’re using a plugin like ACF, our specifications fields might use various field types may vary as well. However, I like to give specifications their own field group, separating them from content that may be displayed more free-form on the public side.

With predictable display characteristics on the front end, we can setup a UL to display the values of the specs. However, we have to know the field name for each specification we want to display and call the_field to spit it out. Needless to say, if we have a ton of specification fields, we’ll be violating the “DRY”¹”DRY” = “Don’t Repeat Yourself”. best practice as a developer. It would be nice if we could condense the code for getting and displaying our fields.

Get All Field Group Fields

It turns out that, with a bit of custom code and a function provided by ACF, we can elegantly solve our predicament. The solution I’m providing here only works with ACF, but could be modified to work with standard post meta or posts of a custom post type in WordPress. We’ll start by getting the fields and aggregating them.

The following assumes you have created fields in a field group using ACF. Open up your theme’s functions.php file, and add the following:

<?php
function get_specifications_fields() {

	global $post;
	
	$specifications_group_id = 479; // Post ID of the specifications field group.
	$specifications_fields = array();
	
	$fields = acf_get_fields( $specifications_group_id );
	
	foreach ( $fields as $field ) {
		$field_value = get_field( $field['name'] );
		
		if ( $field_value && !empty( $field_value ) ) {
			$specifications_fields[$field['name']] = $field;
			$specifications_fields[$field['name']]['value'] = $field_value;
		}
	}
	
	return $specifications_fields;

}

This function get all fields for a given field group using the acf_get_fields function from ACF. The only variable is on line 5, which will hold the field group ID.²You can see this in the URL when editing a field group. While looping through all the fields in the group, we check for a value. If a field has no value, we ignore it. Fields with valid values are stored in a separate array that is eventually returned.

Now we need to use this code to display our specifications in the theme. Pick a place to display the data, and use something like this:

<div class="row">  
<?php 
    $specifications_fields = get_specifications_fields();
              
    foreach ( $specifications_fields as $name => $field ):
        $value = $field['value'];
?>     
     
    <div class="col-xl-3 col-lg-4 col-md-4 col-sm-6 col-xs-12 key">
        <strong><?php echo $field['label']; ?>:</strong>
    </div>
    <div class="col-xl-9 col-lg-8 col-md-8 col-sm-6 col-xs-12 value">
        <?php echo $value; ?>      
    </div> 
         
    <?php endforeach; ?>
</div> 

For simplicity, I’m using some Bootstrap classes to help style our specs as a list. The rest of the code is pretty straightforward. We’re calling our get_specifications_fields function and looping through the results.

Other Possibilities

Although this example is very simple, it illustrates how to condense repetitive code. I’ve used this code in custom plugins. I usually add filters for the field data at various points to exclude fields and alter the results. I also have code to do certain things based on a specific field’s type. For instance, a true-false field may be converted to a “Yes” or “No” when returned.

Finally, when I use this code in a plugin, I usually create a shortcode for the admin/editor use inside their main content, whether that’s the_content, a page builder, ACF Flexible Content, or tons of other places. With the right UI, the user can select which field group to use and the ID is passed as a parameter to the shortcode. The downside of using this as a plugin is that the structure/styling of the output is a little less accessible because it’s no longer part of the theme. However, we deal with that all the time for many other WordPress plugins.

About David

Web Developer