# 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

{% embed url="<https://player.vimeo.com/video/645169317?app_id=58479&autopause=0&badge=0&h=7a4d9457b8&player_id=0>" %}

### 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`                | <p>The ID of the drive the item is located.<br><br>✔ <strong>OneDrive</strong></p>                                                                         |
| `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` | <p>A direct, short-lived, download URL to the file in the cloud. <br><br>✔ <strong>OneDrive</strong> ✔ <strong>Dropbox</strong> ✔ <strong>Box</strong></p> |
| `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.                                                                    |

{% hint style="info" %}
You can select multiple items in this custom field. The `get_field()` will then return an array of items.
{% endhint %}

### **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
<?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();
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wpcloudplugins.gitbook.io/docs/integrations/advanced-custom-fields-acf.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.