Nearly 80% of the sites that I build for clients include an FAQ (or, Frequently Asked Questions) page. In some cases, more than one is required by the client, depending upon the nature and size of their business and site. Now, in essence, this is just another page within the WordPress site. However, a good FAQ page has conventions that are expected by the site user that aren’t necessarily intuitive for most site owners to implement and maintain. That is to say, most business owners don’t write code, and shouldn’t be expected to if we build their sites well.
Why We Should Automate the FAQ Page
A prime example of this is anchor links. On a typical FAQ page, there is a list of the questions at the top of the page, or in a sidebar. Each question in this list hyperlinks to the location on the page where the body of that question begins. So, click on the title of the question, and you jump to that question lower on the page. WordPress’ recommended way of adding anchor links to content isn’t a good answer if the site owner doesn’t code.
For the uninitiated: creating an anchor link involves the following basic markup. In the link at the top of the page (the question title, in this case), a basic anchor tag is created, pointing to a unique ID on the page instead of a URL:
Then, lower on the page, you would place the body of the question, with the beginning of some portion of the content (it should be the containing element, but could also be a heading tag or something similar) having the unique ID that the link above is referencing, like so:
I think that asking the site owner to write this is a bad idea for a number of reasons:
- They’re going to copy and paste. This never ends well.
- They have to organize the page each time they’re entering a new question or editing the content. This is complex for someone who doesn’t code, and will involve switching back and forth between Visual and Text modes…again, this won’t end well.
- Perhaps most importantly: Markup should never be placed in the WYSIWYG. This is very, very bad practice.
So, when building a site with one or more FAQ pages, I want to completely automate this process for the site owner. To do this, we’re going to create an FAQ page just as we would any other page in WordPress, and the client should feel free to add any introductory content that they want for the top of the page here. The questions themselves, however, will be a Custom Post Type. I recommend building your custom post types with Pods. You will find Pods indispensable to your site development for many reasons, but the ease with which it permits you to create Custom Post Types is one of the primary reasons to fall in love with it. Install and activate Pods, and let’s create the post type.
Building the FAQ Custom Post Type Using Pods
First, select Pods Admin > Add New from the admin toolbar in your WordPress dashboard. Then select “Create New.”
On the following screen, select “Custom Post Type” for the Content Type. We’ll set both titles to be “FAQ.”
Next, you’ll be presented with the custom options for your Custom Post Type. We don’t need any special fields, here…we’ll be working with the base fields that any other post in WordPress would include out of the box: Title and Editor. So, why not make this a post category instead of creating a Custom Post Type? The short answer is that you could do that if you wanted. I don’t think it’s best practice. Also, using a Custom Post Type leads to a cleaner workflow for the site owner, less chance of confusion or accidental mis-categorization (i.e.: having a news post show up on the FAQ page), and we really want WordPress to think of FAQ posts independently of other posts, because they’re so specific.
So, on the next screen, navigate to the “Advanced Options” tab. User Capability should be set to “Post.” I don’t recommend excluding these from search, but that may vary depending upon the needs of your site. Check “Enable Archive Page” if you want a dedicated archive page in your theme for these. In my experience, most FAQs don’t exceed one page, so this generally isn’t necessary, but, again, this can vary from site to site. You don’t want these to be hierarchical (like a page), so make certain that option is unchecked. Otherwise, leave the defaults checked for the upper section.
Next, at the bottom of the page, under “Supports”, we’re going to check “Title,” “Editor,” and “Revisions” at a minimum. These should be self-explanatory: FAQ posts will have a title field, a standard WYSIWYG editor, and have access to WordPress’ revisions capability. You may want to add “Excerpt” as well, depending on special use cases that you may foresee with your site. Of course, you can always come back and edit any of these options later. That’s all we’ll need for this post type.
Under “Admin UI,” you can leave the defaults checked, and add a spiffy dashicon under “Menu Icon” for a nice, professional look. Also, you can place it in your admin toolbar how you like by editing the value in the “Menu Position” field. This is helpful to the site owner, because you can organize most frequently used items at the top, and less frequently used items at the bottom, for example, or just keep post types together. The reference that you’ll need for that is here (look for the menu_position parameter). You can also leave the defaults under the “Labels” tab.
And, that’s it! Click “Save Pod,” and you’re done.
The Code
Since we’re adding custom code to display this post type, you have a couple of options. You can create a custom template if that would be the best choice for your project. My general approach is to add a function that I call in my page.php template that uses a switch statement to check for page ID’s, and then includes template parts as needed. I like this approach because it keeps the code modularized and clean, but it’s up to you and the needs of your project. That’s outside of the scope of this demo, but contact me or add a comment if you need help with that.
However you include it in your theme, the code that we’re going to write basically consists of the following:
- Write a custom query for the FAQ Custom Post Type
- We’ll run the loop twice: once for the list of questions at the top, and again for the full questions at the bottom.
- For each post, we’ll leverage the title, the content, and the post ID in order to create our FAQ page with anchor links.
So, let’s begin by establishing the query. At the top of the Pod that you used to create your Custom Post Type, you’ll find the internal reference for the post type.
If you titled the post type “FAQ”, then it should be “faq”, but if you used a different title, check to be sure.
The first thing that we want to appear is the list of question titles with our hyperlinks. Using the markup that we saw above, you’ll see the basics. Each question needs a unique ID. There are complex ways to do this, but the easiest and most reliable way to make it completely automated and out of the site owner’s way is to simply use the post’s ID. So, first, establish a containing element and either an unordered or ordered list, depending on your design preferences. Then, we’ll open the loop, and populate the question titles and hyperlinks as the list items. After the query above, then, use the following:
Notice that we’re closing the while loop here, but not the if statement yet. That’s because we’re about to open another loop using the same query to get the actual post contents. I’m placing each question in an article tag, using the post ID as the identifier. This will always match up with the ID used in the hyperlinks above, so that link will always jump to the corresponding section of the page. I also used a class of “faq-entry” here, to give you an idea of how you can target these for styling purposes.
I also like to add an edit link to each post for the site owner, for a nice user experience, as this is frequently how a site owner will navigate to a post that they would like to edit.
Close the loop, and let’s reset the query just to be safe, depending upon what else you may have going on in this page. Then close the containing element, and you’re all set.
I recommend adding some other flourishes, like a back-to-top scroll, as FAQ pages tend to be long.
There you have it…a simple way to build automated FAQ pages in your WordPress custom theme or child theme. Try this out, and let me know how it works for you!