Dev Notes

Software Development Resources by David Egan.

Retrieve and Display WordPress ACF Repeater Field Data


ACF, PHP, WordPress
David Egan

The Advanced Custom Fields Pro WordPress plugin has a repeater field function that allows content editors to add multiple field values.

For example, the site editor might need the ability to select files that will be available for download. Setting up an ACF repeater field allows as many files as necessary to be associated with the post being edited.

The ACF interface is excellent and very user friendly - but I prefer to use native WordPress functionality to retrieve and display data that has been stored by ACF. This ensures that the data will still be displayed even if the client disables or removes the ACF plugin.

This tutorial documents how to retrieve and display a repeater field called downloads with a single subfield called file.

The file attachment IDs are retrieved, and these are used to build an array that contains the title, permalink, file type and file size.

This array is used to construct a list of “click to download” links.

Class Methods

This example shows the data-retrieval function and a function that builds a ul element to display files for download.

I have shown them as static methods in a class, but if you are using procedural programming rather than an OOP approach you could drop the functions in your theme’s functions.php file.

If you do this, you should prefix your functions with a pseudo namespace, and change the reference to self::get_repeater_file_download() in the_attached_downloads().

Retrieve the Data

This method fetches data from the postmeta table and returns a multi-dimensional array.

<?php
/**
 * Build file data for downloadable files
 *
 * Iterates through database entries in the postmeta table that have been saved
 * in the Advanced Custom Fields repeater field format:
 * `fieldname_' . $i . '_subfieldname`.
 *
 * @param  string|int $post_ID The current post ID
 * @return array               Array of file data
 */
public static function get_repeater_file_download ( $post_ID ) {

  // The number of entries for this repeater field
  $files = get_post_meta( $post_ID, 'downloads', true );

  if ( !$files ) {
    return;
  }

  $file_data = [];

  for( $i = 0; $i < $files; $i++ ) {

    $file_ID  = get_post_meta( get_the_ID(), 'downloads_' . $i . '_file', true );
    $file     = get_attached_file( $file_ID );
    $file_data[]  = [
      'filesize'  => size_format( filesize( $file ) ),
      'filetype'  => wp_check_filetype( $file )['ext'],
      'url'       => wp_get_attachment_url( $file_ID ),
      'title'     => get_the_title( $file_ID )
    ];

  }

  return $file_data;

}

Display Data

This builds the HTML for a list of downloadable links using data from the method above.

The download attached files <ul> can be displayed within template files by calling <?php ClassName::the_attached_downloads(); ?>.

  
<?php
/**
 * Build a ul with attached file titles and links
 *
 * @return string HTML list of downloadable files
 */
public static function the_attached_downloads() {
  $downloads = self::get_repeater_file_download( get_the_ID() );
  if( !$downloads ) {
    return;
  }

  ob_start();
  ?>
  <h2>Downloads</h2>
  <p>Click the link to download.</p>
  <ul>
  <?php

  foreach( $downloads as $download ) {
    ?>
    <li>
      <a href="<?= $download['url']; ?>">
        <?= $download['title']; ?>
      </a> (<?= $download['filetype']; ?>, <?=$download['filesize']; ?>)
    </li>
    <?php
  }

  ?>
  </ul>
  <?php

  echo ob_get_clean();

}

comments powered by Disqus