Wordpress | ACF | FAQs

faq.php

<style>
div.questions {padding:4em 0; clear:both}
div.questions h2 {font-size:2em; color:#111}
div.questions ul {margin:2em auto; max-width:800px; padding:0; list-style:none; font-size:1em; line-height:3em}
div.questions ul li {border-top:1px solid #DDD}
div.questions ul li a {color:#07F; border-bottom:1px solid transparent; -webkit-transition:border-color 0.5s ease-in-out; -moz-transition:border-color 0.5s ease-in-out; -o-transition:border-color 0.5s ease-in-out; transition:border-color 0.5s ease-in-out}
div.questions ul li a:hover {border-color:#07F}
div.faqs {background-color:#DDD; padding:1em 0; clear:both}
div.faqs dl {width:100%; max-width:800px; margin:0 auto}
div.faqs dl dt {font-size:3em; color:#111; margin:0 0 1em 0; padding-top:2em}
div.faqs dl dd {font-size:2em; color:#111; margin:1em 0 0 0; padding-bottom:3em; border-bottom:1px solid #CCC; line-height:1.4em}
div.faqs dl dd:last-child {border:none}
</style>

<?php
if( is_page('FAQs') && have_rows('faqs') ):
	// First up is a list of anchor-linked questions.
	echo '<div class="questions">';
	echo '<h2>Questions</h2>';
	echo '<ul>';
	$count = 1;
	while ( have_rows('faqs') ) : the_row();
		$question = get_sub_field('question');
		echo '<li><a href="#question-' . $count . '">' . $question . '</a></li>';
		$count++;
	endwhile;
	echo '</ul>';
	echo '</div>'; // close div.questions
	// Now lets generate the list of questions AND answers.
	echo '<div class="faqs">';
	echo '<dl>';
	$counter = 1;
	while ( have_rows('faqs') ) : the_row();
		$question = get_sub_field('question');
		$answer = get_sub_field('answer');
		echo '<dt id="question-' . $counter . '">' . $question . '</dt>';
		echo '<dd>' . $answer . '</dd>';
		$counter++;
	endwhile;
	echo '</dl>';
	echo '<div class="clear"><hr/></div>';
	echo '</div>';
endif;	
?>

Frequently Asked Questions

This gist assumes you are using both WordPress and Advanced Custom Fields Pro.

To use the code exactly as it is you will need to first set-up a page called FAQs and then create an ACF Repeater called faqs with two sub fields; question and answer.

I've also thrown in some CSS so there's some shape to this. Feel free to ignore.

Good luck.