Advanced Custom Fields (ACF)

Overview

With the Advanced Custom Fields (ACF) plugin, you can take full control of your WordPress edit screens and custom field data. The ACF integration allows you to seamlessly select cloud files and folders to attach to your pages or posts. Use the get_field() function to retrieve item metadata and display it in your theme templates.

How to Set It Up:

1. Go to [Custom Fields] → [Add New] to create a new Field Group, or edit an existing one.

2. Add a new field and set the field type to [WP Cloud Plugins] → [Google Drive items].

3. Choose what data the get_field() function should return (e.g., file URL, metadata).

4. Define where the Field Group should appear in the Location section.

5. Save the Field Group.

That’s it! You can now add file or folder information directly via the edit screens and integrate them into your theme with ease.

Video Instructions

Meta Data

get_field()

Return

Name	Description
id	The ID of the item.
account_id	The ID of the account the item is located.
drive_id	The ID of the drive the item is located. ✔ OneDrive
name	The name of the item.
size	The file size of the item.
description	The file description of the item (if available).
icon_url	An URL to a generic icon representing the file format.
thumbnail_url	An URL to a thumbnail of the file. If no thumbnail is available an icon will be shown.
direct_url	A direct URL to the item in the cloud. Only accessible by the owners that have access to the item in the cloud or if the item is already shared.
download_url	A download URL that can be used by anyone to download the file.
shortlived_download_url	A direct, short-lived, download URL to the file in the cloud. ✔ OneDrive ✔ Dropbox ✔ Box
shared_url	A shared URL to the file is created, accessible by anyone with the link.
embed_url	A shared URL for embedding the file in an iFrame. Only available for supported formats.

You can select multiple items in this custom field. The get_field() will then return an array of items.

Example

There are many ways to render the selected items in the front end. The following code creates the shortcode [product_documents] which renders the items in the field with the ID product_documents using a basic card layout. You can place this code in the functions.php file of your child theme, or use a PHP snippet plugin.

<?php

// Register the shortcode
add_shortcode('product_documents', 'product_documents_shortcode');

function product_documents_shortcode(){
  // Get the ACF field 'product_documents'
  $documents = get_field('product_documents');

  // Check if the field has documents
  if (!$documents) {
    return '<p>No documents found.</p>';
  }

  // Start the output buffer
  ob_start();

  // CSS Style
  ?>
  <style>
    .documents-container {display: flex;flex-direction: column;width: 100%;gap: 10px;}
    .document-card {border: 1px solid #eaeaea;border-radius: 10px;padding:10px;display: flex;align-items: flex-start; gap:15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  transition: box-shadow 0.3s;}
    .document-card img {flex: 0 0 96px;height: 96px;width: 96px;border-radius: 5px;object-fit: contain;max-width: 96px;background: #590e54; }
    .document-card h3 {margin: 0;font-size: 18px;font-weight: bold;}
    .document-card a {text-decoration: none;color: #333;}
    .document-card p {margin: 5px 0;font-size: 14px;color: #666;}
  </style>

  <div class="documents-container">
  <?php

  // Loop through each document
  foreach ($documents as $document) {

    // Card layout for each document
    ?>
      <div class="document-card">
        <!-- Document Thumbnail -->
        <img src="<?php echo esc_url($document['thumbnail_url']); ?>"/>
        <div style="flex-grow: 1;">
          <!-- Document Link -->
          <h3>⏵<a href="<?php echo esc_url($document['download_url']); ?>" target="_blank"><?php echo esc_html($document['name']); ?></a></h3>
          <!-- Document description -->
          <p><?php echo esc_html($document['description'] ?? 'No description available'); ?></p>
        </div>
      </div>
    <?php

  }
  ?>

  </div>

  <?php

  // Return the output buffer content
  return ob_get_clean();
}