We’re going to show you how to build a simple FAQ page with WordPress and Advanced Custom Fields using a pretty basic, lightweight, sortable, dynamic auto hyperlinked FAQ template.

If you already have the plugin and repeater add-on installed and would like to import the fields, no problem -> faq.xml (unzip). Use the native WordPress importer under tools:

wp-tool-import

 

wp-tool-import-2

Once the plugins are installed and your fields are set up, place this in your page template:

page.php or page-faq.php or use a custom template:

<?php if(get_field('faqs')): ?>
    <ol class="questions">
    <?php 
        $i = 1;
    ?>
        <?php while(has_sub_field('faqs')): ?>

            <li><a href="#q-<?php echo $i++;?>"><?php the_sub_field('question') ?></a></li>

        <?php endwhile; ?>
    </ol>
<?php endif; ?>

<?php if(get_field('faqs')): ?>
    <ol class="answers">
    <?php 
        $i = 1;
    ?>
        <?php while(has_sub_field('faqs')): ?>

            <li>
                <h3 id="q-<?php echo $i++;?>"><?php the_sub_field('question') ?></h3>
                <?php the_sub_field('answer') ?>
                <a href="#top">Back to top</a>
            </li>

        <?php endwhile; ?>
    </ol>
<?php endif; ?>

and don’t forget to add just after your opening <body> tag in your header.php template:

<a id="top"></a>

 

Originally published on

Leave a Reply

Your email address will not be published. Required fields are marked *

Have Any Questions?

Speak with a
Digital Expert

  • Looking to increase leads?
  • Maximize profits?
  • Redesign your website?
  • Sell Online?
  • Build an App?

Let's Discuss Your Next Project

  • This field is for validation purposes and should be left unchanged.