FAQs grouped by categories in Oxygen

October 17, 2018    Sridhar Katakam    12 Comments
Favorited by: 
2

This members-only tutorial provides the steps to display Frequently Asked Questions grouped by categories in Oxygen.

We are going to

  • register a `faq` Custom Post Type (CPT)
  • register a `faq_category` custom taxonomy attached to the faq CPT
  • enter the question as title and answer as the content for the FAQ entries
  • load jQuery Collapse for the expand-collapse using My Custom Functionality plugin
  • edit FAQs Page with Oxygen editor and use a Code Block with the required PHP, JavaScript and CSS.

https://www.youtube.com/watch?v=cEsznBqMC8Q

In the PHP code, we shall retrieve the terms of the faq_category taxonomy, loop through them and write a custom WP Query to pull all faq entries that belong to that taxonomy and output them in a format suitable for jQuery Collapse.

Step 1

Install and activate Custom Post Type UI plugin.

Go to CPT UI > Add/Edit Post Types and add the FAQ post type.

Go to Add/Edit Taxonomies and add the FAQ Category taxonomy.

Attach it to FAQs.

In the Settings section, set Hierarchical to True so it behaves like categories and not tags.

Step 2

Go to FAQs > Add New and add your FAQ entries. Select the appropriate FAQ category and publish.

Step 3

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site's wp-content/plugins/my-custom-functionality-master.

Upload jquery.collapse.js to the plugin's assets/js directory.

Edit plugin.php and replace the content of custom_enqueue_files() function with

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($37/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.

12 comments on “FAQs grouped by categories in Oxygen”

  1. Thanks for this tutorial Sridhar. I have a question about using this for several different pages, I would like the I am building to have a consistent treatment of listed information and this did nicely for my FAQ page. How do I edit the the array in “custom_enqueue_files()” to work on several pages? Do I repeat the code for each page or is there a way to nest the pages in the block you have in the example? Thanks in advance for your input. Also thanks for this site…I find it helpful as someone who is still working on coding skills.

    Reply

  2. So I worked out a solution for this working on multiple pages. I am now wondering how the order of the items can be set. The default order is not working for me. Thanks!

    Reply

  3. I’m new in this website. I pay and I use oxygen plugin,…and I have a problem with this tutorial… in the code of javascript I see down… with the background coloer red… “uncaught TypeError:jQuery(…).collapse is not a function on line #1

    Reply

  4. Hi,

    I have followed all instructions, however when adding the Javascript i get

    Uncaught TypeError: JQuery(…).collapse is not a function on line #1

    Reply

  5. Hi,

    I have this working on my FAQ page.

    However, how can I get this to work on a template which I will use across my site?

    Or is there an alternative you would use?

    Thanks in advance

    Reply

    1. Try deleting this code in Step 3:

      // if this is not the FAQs Page, abort,
if ( ! is_page( 'faqs' ) ) {
    return;
}
      Reply

  • Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new tutorials by email.

    Join 210 other subscribers

    • magnifiercross
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: