Hostinicon
GET HOSTING FROM $3.95/MO PLUS A FREE YEAR ON TUTS+ (RRP $180). HURRY OFFER LIMITED. Check it out
Advertisement

Create an FAQ Accordion for WordPress With jQuery UI

by
Gift

Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo

Creating an FAQ section for your WordPress website is incredibly simple. We're going to use WordPress Custom Post Types for the questions & answers. Then we'll use a jQuery UI accordion to make a nice cross-browser accordion widget. Finally we'll assign a shortcode so that we can put our FAQ on any page or post.

We'll be creating this:


Step 1 Create the Directory and Files

  1. Create a new folder inside your theme folder called faq
  2. Inside the 'faq' folder, create a new file called faq.php
  3. Create another file called faq.js

Step 2 Include the faq.php File

In your functions.php (located in the root directory of your theme) – include the faq.php file you created at the top.


Step 3 Create the Custom Post Type

  1. To register the Custom Post Type, we are going to hook into the init action. We are using an anonymous function as the second parameter to help keep everything encapsulated in one place. This helps with readability and maintainability.
  2. Set up $labels and $args as seen below.
  3. At the end we call register_post_type('FAQ', $args)
  4. Now if you go into your Admin area you will see a new option in the menu – FAQ (as seen in the image below)
  5. Click Add New Question and enter a few Questions and Answers so that we have something to work with later on. Use the title field for the question, and the main content field for the answer. This allows us to enter any type of content into our answer (such as images & videos) as well as text.

Step 4 Include jQuery, jQuery UI, and faq.js

  1. Load jQuery
  2. Load jQuery UI
  3. Load the stylesheet for the jQuery UI library
  4. Load our custom script faq.js

You'll notice we only used one wp_enqueue_script call, because it's important the JavaScript files are loaded in order as they are dependent on each other. Setting jquery-ui-accordion as a dependency makes sure this happens.


Step 5 Setup the Shortcode

Because we want to be able to put our FAQ Accordion on any page/post, we're going to generate a shortcode. Using a shortcode means that we only have to type [faq] inside any post/page in the WordPress Editor to display our FAQ.


Step 6 Get the FAQ Questions & Answers

We can get the data from our custom post type by using the get_posts() function.

  1. numberposts – Here you can limit how many FAQ questions are retrieved
  2. orderby and order – Allows us to change the order of the questions
  3. post_type – This is how we tell WordPress to only fetch our custom post type

Step 7 Generate the Markup for the jQuery UI Accordion

This is the markup needed for the jQuery UI Accordion :

We can generate this by looping over the $posts array.

  1. First we use $faq to store the start of our HTML – we open up a div with an id of wptuts-accordion
  2. Next we start looping through all the posts and adding the result of sprintf to the $faq variable.
  3. sprintf will replace %1$s with the value retrieved from $post->post_title and %2$s with the value returned from $post->post_content
  4. We run $post->post_content through wpautop() to ensure it displays as it was authored in the admin area.
  5. Finally we close off the div and return $faq to output the HTML onto our page.

The Full Shortcode


Final Step

Phew! If you have got this far, well done – you're nearly there! At the moment we've managed to output all the data needed for our accordion, all that's left to do is place this in faq.js:

Advertisement