How to Add Advanced Custom Fields to AMP by Automattic

Want to add your ACF’s to your AMP’s?

If you’re unfamiliar with AMP (Accelerated Mobile Pages) by Google. It’s basically a new way to serve super fast, lightweight compiled versions of a webpage to mobile users. It has its own validation spec. Really really huge honking websites like Polygon, Washington Post and The Verge all use AMP on their news articles.

Which is super awesome, because nothing sucks more than an article taking more than 15 seconds to load over “Transit Wi-fi” on the G Train. These super powered articles are literally instant, taking no more than 1 second to load — even over 4G speeds. Even after all of those pro’s Google takes it one step higher by giving search result priority to AMP powered-articles and pages for mobile searches.

So the first thing you need to do is declare in your functions.php file that you want to use a custom AMP template. Mine looks like this:

  add_filter( 'amp_post_template_file', 'xyz_amp_set_custom_template', 10, 3 );
  function xyz_amp_set_custom_template( $file, $type, $post ) {
    if ( 'single' === $type ) {
      $file = dirname( __FILE__ ) . '/templates/template-amp.php';
    return $file;

Then create a template file in your theme called template-amp.php. Mine is in a directory named templates.

Copy the amp-wp single.php template from the Github master for the latest codebase.

Once you’ve done that, you can add your ACF field in the template as usual! The caveat are ACF image fields which need some AMP-validating like so:

  <div class="amp-wp-article-content">
    <?php echo $this->get( 'post_amp_content' ); // amphtml content;?>
    <?php if( have_rows('editorial_flexible_components') ): ?>
      <?php while ( have_rows('editorial_flexible_components') ) : the_row(); ?>
        <?php if( get_row_layout() == 'paragraph' ): ?>
          <?php $paragraph_text = get_sub_field('paragraph_text'); ?>
        <?php elseif( get_row_layout() == 'image' ): ?>
          <?php // Grab the Image ID from the ACF ?>
          <?php $the_image = get_sub_field('the_image'); ?>
          <?php $image_url_array = wp_get_attachment_image_src($the_image, 'full', true); ?>
          <?php $image_url = $image_url_array[0]; ?>
          <?php // Displaying a ACF Image field that will validate ?>
          <img class="i-amphtml-fill-content i-amphtml-replaced-content" src="<?= $image_url; ?>" alt="" />
        <?php endif; ?>
      <?php endwhile; ?>
    <?php endif; ?>

And now, the AMP will deliver your ACF content! Obviously I used Flexible Content fields in my example, but you can use any ACF field in the template-amp.php file, just make sure it validates.

Before (left), and after (right):


6 responses to “How to Add Advanced Custom Fields to AMP by Automattic”

  1. The code is very difficult to read.

    1. Sorry about that! Just gave it a nice polish. Gutenberg destroyed my <pre> tag content. Thanks for letting me know it was a garbled mess.

  2. Greg Hollowell Avatar
    Greg Hollowell

    PHP server does not care as much about formatting 😉

    Thanks for posting this!

    1. Very true 😉 thanks for reading Greg!

  3. Thanks for Post,

    Its very useful my problem was solved.

    1. Nice! Glad my post was helpful 🙂