How to Get an Image URL From an ACF Options Page

ACF options pages hold site-wide settings, such as a partner logo, that don’t belong to a single post. They are also a good home for content repeated on several pages (see shared sections in an ACF-based theme). Here is how to register an options page and then print the URL of an image field saved on it. Options pages are an ACF PRO feature, so ACF PRO has to be active.

Step 1: register the options page

Add this code to your child theme’s functions.php file.

acf_add_options_page(array(
        'page_title'     => 'Market Module',
        'menu_title'    => 'Market Module',
        'menu_slug'     => 'market-module',
        'capability'    => 'edit_posts',
        'icon_url'         => 'dashicons-cart',
        'redirect'        => false
));

• page_title is the heading on the page, menu_title the label in the admin menu and menu_slug the page’s slug.
• edit_posts lets any user who can edit posts open the page. Use manage_options to limit it to administrators.
• icon_url takes a Dashicon class, here a cart.
• If ACF PRO is ever deactivated, this call causes a fatal error. Wrapping it in an if ( function_exists( 'acf_add_options_page' ) ) check avoids that, the same idea as the function_exists() check for ACF in templates.

Next, create a field group with an Image field (named single_partner_logo in this example) and set its location rule to this options page. Set the image field’s Return Format to Image ID, because the next step expects an attachment ID.

Step 2: echo the image URL

<?php
$single_partner_img = get_field('single_partner_logo', 'option');
$SPI_size           = 'full';
$spi_final_img      = wp_get_attachment_image_src($single_partner_img, $SPI_size);
?>

//NOW ECHO THE URL HERE
<a href="#" target="_blank">
   <img src="<?php echo $spi_final_img[0]; ?>" alt="">
</a>

• get_field() with 'option' as the second argument reads the value from the options page instead of a post.
• wp_get_attachment_image_src() returns an array with the URL, width and height of the image; [0] is the URL. Replace 'full' with 'medium', 'large' or any other registered size.
• The //NOW ECHO THE URL HERE line sits outside the PHP tags, so it would appear on the page as text. Leave it out when you copy the code.
• If the field is empty, wp_get_attachment_image_src() returns false, so check the value before printing, and wrap the URL in esc_url().

Related articles

• outputting an ACF Image field in a chosen size: the same Image ID approach for fields on posts and pages

See also: Link to a PDF With a Preview Image Using ACF.