WordPress FAQ Plugin (CMFAQ) - Use Case - How to Create an FAQ Page with Accordion Layout in WordPress

Use Case - How to Create an FAQ Page with Accordion Layout in WordPress

Back to User Guides

Introduction

The WordPress FAQ plugin is a tool that allows you to build a Frequently Asked Questions (FAQ) knowledge base on your WordPress site.

The plugin allows you to choose between several different view layouts, including accordion style.

Accordion-style layouts help keep FAQ sections clean and organized, improving user experience by reducing clutter on the page.

Use Case Front-End

Accordion Style 1 example:

Accordion Style 2 example:

AJAX-powered page with accordion view and category filters:

Use Case Assumptions

In this example use case guide we will consider how to configure an accordion layout for your FAQ page, and how to create an AJAX-powered FAQ section or page.

We assume that you've already bought the plugin, but not installed it yet.

It follows:

• Installing the plugin
• Quick recap
• Accordion settings
• AJAX-powered FAQ page with category filters
• End result

Installing the Plugin

The process is the same for all CM plugins and add-ons.

• Download the plugin from your customer dashboard.
• Log in to WordPress and navigate to the WordPress Admin → Plugins settings.
• Click on Add New.
• Activate it and add the license.

Learn more: Getting Started - Plugin Overview

Accordion Settings

Navigate to the Admin Dashboard → CM FAQ → Options → Appearance tab.

Scroll down and find the QA list appearance section. It contains the following settings:

• Accordion - Allows you to either disable the accordion view, or choose one of two accordion views. The options are:
  • Off - Disables accordion style.
  • Style 1 - Allows to choose accordion style 1.
  • Style 2 - Allows to choose accordion style 2.
• Category icon - Decide if to display a category icon next to each question.
• Collapsed panel icon - Select an icon for collapsed QA pair.
• Expanded panel icon - Select an icon for expanded QA pair.
• Icon size - Select size for collapse/expand panel icons.
• Icon position - Choose the position of the collapse/expand icons - left or right.
• Question font size - Define the font size of the question title.
• Description font size - Define the font size of the question description.
• Space between questions - Define the space between questions.

And there's a set of options for changing the accordion style colors:

• Header background color
• Border color
• Icon color
• Question color
• Description background color
• Description color
• Description links color

Example 1. Let's choose the accordion "Style 1" and configure the settings in the following way:

Here's the result on the front-end:

Example 2. Let's choose the accordion "Style 2" and configure the settings in the following way:

Here's the result on the front-end:

AJAX-Powered FAQ Page With Category Filters

The front-end examples above are shown on the default FAQ index page, which is displayed using the basic shortcode [cm_faq] . The admin can define the front-end categories for that page in the plugin settings.

The plugin also has a shortcode [cm_faq_all] which allows to display only a list of questions. This shortcode has a set of parameters, for example for choosing which categories to display, whether to show or hide category filters, and whether to override the default layout. Let's look at the shortcode parameters in more detail:

• category - Allows you to choose which category to display by using the category name or slug. If the category filters is enabled, the parameter will define which category will be displayed on the page load. Example: [cm_faq_all "category=category1,category2"] .
• orderby - Allows to choose how to order questions - by titles or by number of votes, by using values "title" or "voting" respectively.
• order - Allows to choose the direction of the order - ascending or descending, by using values "asc" or "desc" respectively.
• number - Allows to limit number of displayed questions. For example, you can set the value "5" to display 5 questions by default, and each time the user clicks "Load More", 5 more questions will be loaded below.
• accordion - The value "0" disables the accordion view, the value "1" enables the style 1 accordion, and the value "2" enables the style 2 accordion.
• searchbar - Allows to either show or hide a search bar by using the value "1" or "0" respectively. Overrides the global "Show search bar" option value.
• categoryfilters - Allows to show or hide a category filters by using the value "1" or "0" respectively. Replaces the global "Show categories filter" option value.

Note: Category Filters

The global option Show categories filter can be found in the plugin settings under the General tab.

For our use case, let's use a shortcode that defines the following:

• Define the default category "General".
• Enable category filters.
• Display a search bar
• Use accordion Style 2 view
• Limit the default amount of questions to "3".

The shortcode will be the following:

[cm_faq_all category="general" categoryfilters="1" searchbar="1" number="3" accordion="2"]

Result on the front-end:

End Result

Following instruction found in the plugin and guides, you should be able to configure an accordion layout for your FAQ page, and how to create an AJAX-powered FAQ section or page.

Use Case Front-End

Accordion Style 1 example:

Accordion Style 2 example:

AJAX-powered page with accordion view and category filters:

	More information about the WordPress FAQ Plugin Other WordPress products can be found at CreativeMinds WordPress Store
	Let us know how we can Improve this Product Documentation Page To open a Support Ticket visit our support center