Skip to content

Advanced Custom Fields (ACF)

Text Fields

Basic usage:

<?php the_field('heading'); ?>

// Subfield for repeaters
<?php the_sub_field('heading'); ?>

Blog archive

When adding custom fields for the posts archive page, set the location as Page Type is equal to Posts Page.

Then on the index.php or archive.php to access the value:

<?php the_field('page_heading', get_queried_object_id() ); ?>

Options page

Add an options page to the admin menu.

Add options page

https://www.advancedcustomfields.com/resources/options-page/

Requires Pro version.

Add to functions.php to install.

if( function_exists('acf_add_options_page') ) {

  // Basic minimal
  acf_add_options_page();

  // Footer example
  acf_add_options_page(array(
    'page_title'  => 'Footer Settings',
    'menu_title'  => 'Footer',
    'menu_slug'   => 'footer-settings',
    'capability'  => 'edit_posts',
    'redirect'    => false
  ));

}

Then, for example, to use a field called heading:

<?php echo get_field('heading', 'option'); ?>

Groups

Groups can help organise inputs in the admin screen. Once you have fields inside a group you can access them like in the following examples.

Text fields:

$testimonial = get_field('testimonial');
echo $testimonial['quote']; // outputs the quote
echo $testimonial['author']; // outputs the author
echo $testimonial['company']; // outputs the company

Image fields:

$my_group = get_field('my_group');
$img1 = $my_group['image_1'];

Then we can use $img1 as per normal.

<img
  src="<?php echo $img1['url']; ?>"
  alt="<?php echo $img1['alt']; ?>"
  class=""
  loading="lazy"
  width="<?php echo $img1['width']; ?>"
  height="<?php echo $img1['height']; ?>"
/>

Unsafe HTML

Do not use the_field() and the_sub_field() to output HTML content.

If you’re confident you can trust every registered user on the site with contributor or higher access, use echo get_field() to output unsafe HTML. This method will ensure the output is not filtered.

For all other fields, it is recommended to use get_field to output the value, but make sure you apply the right escaping for the type of field you need. This is likely to be something like the wp_kses_post function, for example:

echo wp_kses_post( get_field('field_name') );

For more information on the ACF 6.2.5 security release, and how to secure your site, please see full details.

Repeater

Base code:

<?php
  if( have_rows('repeater_field_name') ):
    while( have_rows('repeater_field_name') ) : the_row();
?>

  <!-- HTML -->
  <?php the_sub_field('sub_field'); ?>

<?php
    endwhile;
  endif;
?>