FAQ Shortcode

Last Updated on

The frequently asked questions or FAQ shortcode makes it easy to list questions and answers that are commonly asked.

In this article we’ll explain how to create and display FAQ posts, and configure their settings.

To see the FAQ shortcode in action, check out the demo page.

FAQ shortcode - demo

In this article


Creating FAQ Posts

Before displaying the FAQs, some posts should be created to be used in the FAQ shortcode.

To create a FAQ post:

1
From the WordPress left menu, go to Faqs > Add New.

FAQ shortcode - add new post

2
Enter a title, fill out the necessary information and click on Publish.

Categorizing the Items

Categorization provides an easy way to organize the items and gives you lots of flexibility when you need to show only specific items. Configuring categories for the FAQ items follows the WordPress convention.


Displaying the FAQs

To add the FAQ shortcode to a page:

1
Add or edit an existing page.
2
In the Visual Composer section, click on the + button.

FAQ shortcode - visual composer section

3
In the Add Element pop-up screen, search for FAQ and click on it to be added to the page.

FAQ shortcode - add element

4
When the shortcode is added, a new pop-up screen called FAQ Settings will open that allows you to configure the shortcode settings.

FAQ shortcode - faq settings

5
Configure the settings as required.
SettingDescription
Style Displays the FAQs in a fancy or simple style.
[All] Link Title Changes the all link title.
Sortable? Displays the sortable filter navigation.
Count Sets a custom amount of FAQ items to be displayed.
Pane Content Background Color Sets the background color for the FAQ content.
6
Click on Save Changes and publish or update the page to check the result. It will show all the available FAQ items.

Showing Specific Items

There are two settings in the FAQ settings pop-up that allow you to show the items based on specific categories or IDs: Select Specific Categories and Select Specific Posts.

SettingDescription
Select Specific Categories Shows items only from the specified categories.
Select Specific Posts Shows only the specified items.
x
Note: To learn more about these two settings, read the Configuring specific items in a shortcode article.

Altering the Items Sorting

There are two settings in the FAQ settings pop-up that allow you to alter the items’ sorting: Order and Orderby

By default, the order and orderby settings are set to Ascending and Date therefore it sorts the older items ahead of the newer items.

SettingDescription
Order Sets the ascending or descending order of the Orderby parameter.
Orderby Sorts the items based on the selected parameter (date, menu order, title, …).
x
Note: To learn more about these two settings, read the Configuring a shortcode’s sorting settings article.

Configuring the Visibility for Devices

To make the FAQ shortcode visible/hidden on different devices, there is a setting in the FAQ settings pop-up called Visibility for Devices. Using this setting is easy and straightforward but if you need a step-by-step tutorial, read the Configuring the visibility for Devices article.

Adding an Extra Class Name

The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.

You can read the Adding custom CSS class to a shortcode article for further explanation.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket