How to Use the ACF File Field in WordPress

With over half of all websites on the Internet using it as part of their back end, you can say that WordPress is the most popular CMS (Content Management System) online.

Versatile and easy to use, we’re not surprised that it’s such a popular choice. Even people with no experience in web design can build websites and post content in a couple of minutes.

But the native WordPress system is fairly limited in functionalities. Plugins like Advanced Custom Fields (ACF) can add more features to WordPress and give you more options and functionalities.

This guide will show you how to use the ACF file field to make uploading and managing content easier.

• What Is the ACF Plugin?
• File Field in ACF
• What You Can Do with the File Field in ACF

What Is the ACF Plugin?

One of the most advanced features that WordPress offers is custom fields. They allow you to add extra information to a post or page. This “extra information” is called metadata.

Let’s say you run an online business using WordPress. Information about a product, like price, name, and product ID, are all metadata stored in custom fields.

These custom fields give you better control over the look and function of your website. Unfortunately, the native custom field editor that comes standard with WordPress is very difficult to use. That’s where the ACF plugin comes in.

Consider ACF an “upgrade package” for your WordPress custom field editor. It revamps the interface to make it simpler to use and adds a few new, advanced functions. You’ll have an easier time adding custom fields to your website using ACF than with the native editor.

Here’s what the native custom field editor looks like:

Versus the ACF:

File Field in ACF

What It Does

One of the most basic functions of WordPress is allowing you to upload media like photos and videos. The File field in ACF is responsible for the same thing. It helps you easily upload and select files in WordPress using the native media pop-up.

Settings

ACF lets you modify the File field further by giving you some settings you can tune to your liking.

Return value: This function allows you to set the format of the retrieved data. You can select File URL (string), File ID (integer), or File Array (array).

Library: You can set whether file selection is limited only to files uploaded to that particular post or the whole library.

Minimum: This function authorizes you to configure the minimum size of the file that can be uploaded (in integer). You can also set the minimum file size by inputting a string containing the unit, like “2 MB”.

Maximum: The full size of the file that can be uploaded is set through this setting.

Allowed file types: Allow a list of select file types (.png, .txt, .mp4, etc.) to be uploaded onto the page.

This function is optional. If you leave it blank, WordPress will accept all file types equally. Want to allow only certain files to be uploaded? You can write down a list of the file extensions separated by commas to specify the file types you want.

What You Can Do with the File Field in ACF

The ACF File field can retrieve an array, integer, or string, depending on how you configure the return value. This ability can be pretty useful. Here are several ways to take advantage of this function.

#1 Basic Array Display

If the return value is set as an array, here’s how you can display the retrieved data. File Array return type comes in handy if you’re looking to access certain data types like URL or filename.

<?php
$file = get_field('file');
if( $file ): ?>
<a href="<?php echo $file['url']; ?>"><?php echo $file['filename']; ?></a>
<?php endif; ?>

#2 Advanced Array Display

The above array is merely a basic script that lets you access the URL and filename data. If you want to access a more diverse range of data, you’ll have to step up your game. This block of code will display and allow you to access URL, title, type, caption, icon, and more.

<?php
$file = get_field('file');
if( $file ):


    // Extract variables.
    $url = $file['url'];
    $title = $file['title'];
    $caption = $file['caption'];
    $icon = $file['icon'];


    // Display image thumbnail when possible.
    if( $file['type'] == 'image' ) {
        $icon =  $file['sizes']['thumbnail'];
    }


    // Begin caption wrap.
    if( $caption ): ?>
        <div class="wp-caption">
    <?php endif; ?>


    <a href="<?php echo esc_attr($url); ?>" title="<?php echo esc_attr($title); ?>">
        <img src="<?php echo esc_attr($icon); ?>" />
        <span><?php echo esc_html($title); ?></span>
    </a>


    <?php 
    // End caption wrap.
    if( $caption ): ?>
        <p class="wp-caption-text"><?php echo esc_html($caption); ?></p>
        </div>
    <?php endif; ?>
<?php endif; ?>

#3 Basic ID Display

If you select the Return value as File ID (integer), here’s how you can display the file you selected.

<?php
$file = get_field('file');
if( $file ):
$url = wp_get_attachment_url( $file ); ?>
<a href="<?php echo esc_html($url); ?>" >Download File</a>
<?php endif; ?>

#4 Basic URL Display

If you set the Return value as File URL (string), use this code to display the selected file.

<?php if( get_field('file') ): ?>
<a href="<?php the_field('file'); ?>" >Download File</a>
<?php endif; ?>

Use the ACF File Field Like a Pro!

ACF is a must-installed plugin if you’re looking for ways to supercharge your WordPress editor.

The native editor is quite limited. ACF is one of the many plugins that can give you better control over the design and function of your website, starting with the ACF File field. With the assistance of this feature, controlling uploaded files in WordPress is significantly less difficult.

You’ve learned what an ACF File field is and how to set it up for file uploading. The next step is probably adding and protecting files uploaded to custom fields. We’ve published a detailed guide on it. Check it out.

We hope this guide has given you a better idea of what this nifty function in ACF does. If you have any other questions, you can reach out to us via the comment section below.