Solutions

In this article we will create an example FAQ page using a custom template. We will also make use of a new feature in Perch 1.2 that enables us to create a list of links at the top of the page jumping down to the individual FAQ answers.

The first thing we need to do is to create our FAQ template. The quickest way to do that is to look in the perch/templates directory and grab one of the example templates as a starting point. I’m going to use article.html.

Open article.html in a text editor save it as faq.html and delete everything other than the heading and body tags.

I am also going to change the Heading tag to be named Question and Body to Answer just to make it clear to editors what needs to be entered here and, as this will be a list of FAQ questions and answers, I’ve wrapped the items in an li element.

The final code for this template is shown below. Save the template.

<li>
    <h2><perch:content id="question" type="text" label="Question" required="true" /></h2>

    <perch:content id="answer" type="textarea" label="Answer" textile="true" editor="markitup" required="true" />
</li>

Now go back to your FAQ page. We just need to add the Perch tags to this page. The include at the top of the document and then the tag to create a content area for the FAQ. I have surrounded this call with an unordered list to wrap the list items in the FAQ template that I created in the last step.

<ul id="faq-list">
  <?php perch_content('FAQ'); ?>
</ul>

You are ready to start adding FAQ items. Refresh your FAQ page so that Perch picks up the new content area, then log into the administration area. You should see the new content showing up in the list.

Click on the region and on the next page select FAQ from the dropdown list for template. AS you will want the user to be able to add multiple FAQ items, check the allow multiple checkbox and submit the form.

The page will reload and you will be able to add your first FAQ item. After adding the item click the “Save, and add another” button to add another item.

After adding your items refresh the FAQ page on your site to view the content.

Adding a list of links to individual FAQ items

The above process might be all you need for your FAQ page, however on a long page you might like to have a list of the questions at the top of the page and use an anchor to jump to individual answers. With Perch 1.2 you can do this using the new perch_content_custom tag.

The perch_content_custom tag is really useful if you want to reuse content from one page on another (for example showing 2 items from your news page on the homepage) it can also be used to create an anchor list for our FAQ page.

Above your FAQ list add the following code:

<ul>
<?php
$opts = array(
	'template'=>'faq_question.html',
	'page'=>'/faq.php'
);
perch_content_custom('FAQ', $opts);
?>
</ul>

We are opening an unordered list for the links, we then create a PHP array of options. In this case we only need to pass in the template for this area and the page the original Perch content is on. Then we call perch_content_custom passing in the ID of the area on the page our content should come from, which is ‘FAQ’, and the array.

Now create a new template in the perch/templates directory with a single list item of the question. Wrap the question in a link.

To create our anchors in the link we can use another feature of Perch 1.2 – the formalized perch_item_index tag, which will give you the unique index of that content item. This is ideal for creating our anchor links by adding the unique id onto the end of the word faq, creating an ID of faq1, faq2 and so on.

<li>
    <a href="#faq<perch:content id="perch_item_index" type="hidden" />">
        <perch:content id="question" type="text" label="Question" required="true" />
    </a>
</li>

Now open the initial faq.html template that you created and add an ID to the h2 element, the ID value will be the word faq plus the item index. The attribute type needs to have a value of hidden to stop this showing up as an editable field in the admin.

<li>
    <h2 id="faq<perch:content id="perch_item_index" type="hidden" />">
        <perch:content id="question" type="text" label="Question" required="true" />
    </h2>

    <perch:content id="answer" type="textarea" label="Answer" textile="true" editor="markitup" required="true" />
</li>

To get your content to pick up the template changes you will need to visit the page in the admin and edit and save the FAQ region. After doing this refresh your page and you should see that you have a list of FAQ questions at the top of the page, clicking on any question will jump down to the FAQ answer.

Files for this solution are available to download. Just add the template files to your Perch/templates/content directory and drop the faq.php into your site to try this solution for yourself.