Beautiful FAQ Structured Data Markup from ACF Fields 2020

FAQ Structured Data Markup is something new to our digital life. Google now can display directly in the search results Frequently asked questions about a specific topic. In this article, you will learn how you can implement this new FAQ rich results with Advanced Custom Fields in your WordPress Theme. To follow this tutorial you should have FTP Access to your site and an admin account to install Advanced Custom Fields Pro.

You have to know that the following example will work only inside the WordPress loop.

Analyze our FAQ Structured Data setup

Our website has an FAQ section and this will be our walk-through for this tutorial. This page was created by using ACF PRO and repeater fields. Our Fields setup Contains, where – is an inheritance indicator.

• A parent repeater named FAQ – Repeater Field
• A child field named FAQ Section Name – – Text Field
• A nested repeater named FAQ Section – – Repeater Field
• A child Text area field of nested repeater named Question – – – Text Area Field
• A child Wysiwyg Editor field of nested repeater named Answer – – – Wysiwyg Editor

So, our Advanced Custom Fields Field editor should look like:

Let’s code those fields

A new page template is the best idea to build our FAQ section. We strongly recommend to follow this way but you can also use other methods like page or post even custom post type but maybe some steps could be a little bit different. So the FAQ fields based on ACF should have this markup in PHP.

<?php if (have_rows('faq')) : ?>

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

    <h3 class="playfair bold extra-margin"><?php the_sub_field('faq_section_name'); ?> (<?php echo count(get_sub_field('faq_section')); ?>)</h3>

    <?php if (have_rows('faq_section')): ?>

    <ul class="accordion" data-accordion data-allow-all-closed="true">
      <?php while (have_rows('faq_section')): the_row(); ?>
        <li class="" data-accordion-item>
          <a href="#" class="accordion-title yantramanav bold"><?php the_sub_field('faq_question'); ?></a>
          <div class="accordion-content yantramanav light" data-tab-content>
          <?php the_sub_field('faq_answer'); ?>
          </div>
        </li>
      <?php endwhile; ?>
    </ul>

  <?php endif; ?>

  <?php endwhile; ?>

<?php endif; ?>

Create the FAQ Structured Data Markup

Once our main loop has run we need to create the same loop again in order to get the fields ready for JSON encoding. Notice that we do not want our FAQ Structured Data Markup to appear inside the elements. We want it to the footer of the site for many reasons, mainly because we are going to generate a script. This time our loop should look like:

<?php 

    $schema = array(
    '@context'   => "https://schema.org",
    '@type'      => "FAQPage",
    'mainEntity' => array()
    );

    global $schema;


    if ( have_rows('faq') ) {

    while ( have_rows('faq') ) : the_row();

      if ( have_rows('faq_section') ) {

        while ( have_rows('faq_section') ) : the_row();

          $questions = array(
            '@type'          => 'Question',
            'name'           => get_sub_field('faq_question'),
            'acceptedAnswer' => array(
            '@type' => "Answer",
            'text' => get_sub_field('faq_answer')
              )
              );

              array_push($schema['mainEntity'], $questions);

        endwhile;

      }

    endwhile;


    function bakemywp_generate_faq_schema ($schema) {

      global $schema;

      echo '<!-- Auto generated FAQ Structured data by Bakemywp.com --><script type="application/ld+json">'. json_encode($schema) .'</script>';

    }

    add_action( 'wp_footer', 'bakemywp_generate_faq_schema', 100 );


  }

?>

Put it all together

At the end our FAQ Structured Data ACF loop looks awesome!

<?php if (have_rows('faq')) : ?>

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

    <h3 class="playfair bold extra-margin"><?php the_sub_field('faq_section_name'); ?> (<?php echo count(get_sub_field('faq_section')); ?>)</h3>

    <?php if (have_rows('faq_section')): ?>

    <ul class="accordion" data-accordion data-allow-all-closed="true">
      <?php while (have_rows('faq_section')): the_row(); ?>
        <li class="" data-accordion-item>
          <a href="#" class="accordion-title yantramanav bold"><?php the_sub_field('faq_question'); ?></a>
          <div class="accordion-content yantramanav light" data-tab-content>
          <?php the_sub_field('faq_answer'); ?>
          </div>
        </li>
      <?php endwhile; ?>
    </ul>

  <?php endif; ?>

  <?php endwhile; ?>

  <?php 

    $schema = array(
    '@context'   => "https://schema.org",
    '@type'      => "FAQPage",
    'mainEntity' => array()
    );

    global $schema;


    if ( have_rows('faq') ) {

    while ( have_rows('faq') ) : the_row();

      if ( have_rows('faq_section') ) {

        while ( have_rows('faq_section') ) : the_row();

          $questions = array(
            '@type'          => 'Question',
            'name'           => get_sub_field('faq_question'),
            'acceptedAnswer' => array(
            '@type' => "Answer",
            'text' => get_sub_field('faq_answer')
              )
              );

              array_push($schema['mainEntity'], $questions);

        endwhile;

      }

    endwhile;


    function bakemywp_generate_faq_schema ($schema) {

      global $schema;

      echo '<!-- Auto generated FAQ Structured data by Bakemywp.com --><script type="application/ld+json">'. json_encode($schema) .'</script>';

    }

    add_action( 'wp_footer', 'bakemywp_generate_faq_schema', 100 );


  }

  ?>

<?php endif; ?> <!-- endif have_rows('faq'); -->

Testing our page on Google

If everything is working fine in Google Structured Data Testing Tool your site should have no errors in search results.