Flexible FAQs Documentation

Last updated by David on July 25, 2020 16:43

Welcome to Flexible FAQs. This guide walks you through everything you need to know to get up and running using the plugin. You’ll be adding FAQs to your site in no time at all!

Where’s My Plugin?

Once a plugin purchase is complete you’ll receive an email containing license and download instructions. In most cases, you’ll receive this almost immediately but occasionally it may take longer. It’s also worth checking your spam/junk mail folder in case it’s ended up in there.

You can also access the plugin license and Zip file directly at any time by logging into your User Dashboard. When logging in make sure to enter the same email used during checkout. If for some reason you haven’t received login details yet you can always manually reset the password via the login screen if necessary.

Installation

Once the plugin Zip file has been downloaded it’s time to install and activate it on your website:

  1. On the site you wish to install the plugin on go to the WordPress admin dashboard and click the Plugins link in the left hand menu.
  2. At the top of the Plugins page click the Add New button, and then on the next page click the Upload Plugin button.
  3. You’ll now see a Choose File button. Click it and select the plugin zip file you downloaded earlier.
  4. Once the plugin has been selected click the Install Now button to begin the installation process.
  5. In a few seconds you should see a Plugin installed successfully message. Click the blue Activate Plugin link underneath to make the plugin ready for use.

As soon as the plugin is activated you’ll be immediately redirected to the license activation page. Enter your license key here and click the Agree & Activate License button.

enter license key

Entering your license key grants you access to all premium features of the plugin. Plus, update notifications will appear in the WordPress admin when a new version of the plugin has been released which provides an easy and convenient way of always staying up-to-date with the latest version.

Once the license key has been activated you’ll be automatically redirected to the welcome page which gives you brief details on what’s new in the latest version, as well as getting started and other information. If it’s your first time using the plugin click on the green Getting Started > button at the top of the welcome page for usage instructions.

Creating Your First FAQ!

Let’s create some FAQs. Start by going to Flexible FAQs > Add New FAQs in the WordPress admin. This will open the main FAQ editor page where we can create a set of FAQs.

Add new FAQ

Enter an FAQ title and click the Add New FAQ Item button. This will open up two input boxes ready for you to enter Question and Answer content for your new FAQ item.

Notice the formatting icons available for Question and Answer content (highlighted in red above). These allow you to customise the content further. For example, you can add images via the WordPress media library to answer content.

When you’ve finished adding your first FAQ item, why not create another one! Simply click the Done button towards the bottom right of the Answer input box to collapse the current FAQ item and give yourself more working space. Then click the Add New FAQ Item button again to add a second FAQ item.

Repeat the same process to add as many individual FAQ items as you wish. It’s worth mentioning here that you don’t have to add ALL of your site FAQs to the same set. In fact, it’s recommended that you add related FAQs together in one or more sets. As you’ll see later, this gives you powerful options for organizing multiple sets of FAQ together using a feature called FAQ Groups.

Click on the Publish button in the meta box to the right of the FAQ editor to save changes. The FAQs are now available to be displayed on the frontend of your site.

Show Me the FAQs!

There are three main types (templates) of FAQ available: Text, Box, and Accordion. The default output of each template is shown below.

Each template has extensive options available for customization, making it very easy to create almost any design you like!

FAQ Themes

As well as having multiple customization options, each FAQ template also includes a set of pre-defined themes to choose from. These are created internally by applying custom values to FAQ settings. This means that each theme is just a collection of custom FAQ settings, any of which can be overridden as required. i.e. You can select a custom theme and just tweak a few settings rather than have to start your FAQ design from scratch!

If you’re using FAQ editor blocks then you have the additional option to create (and save) your own custom themes based on any existing core FAQ theme. This exciting feature makes the theme system a very powerful tool for creating complex FAQs very efficiently.

Take a look at the live demo to see plenty examples of FAQ themes in action. We’ll see how to select and customize FAQ themes in the following sections.

Displaying FAQs on Your Website

Once you’ve created some FAQ items you can easily display them on the frontend of your site, using one of two methods.

You can either use Shortcodes, or editor Blocks (introduced in WordPress 5.0). If you’ve used WordPress for some time then you’ll probably have come across shortcodes at some point. They’re a convenient way of adding complex or dynamic content to your site by entering a simple code, or Shortcode, as it’s called in WordPress.

Editor blocks are an entirely new way to create content using visual building blocks ‘stacked’ on top of one another. The main advantage is that the editing experience is 100% visual, and you can make changes and see results in real-time directly inside the editor window. This is in contrast to shortcodes, which don’t render anything inside the editor. Instead, to see results of changes to shortcodes, you typically need to refer back-and-forth between the editor and frontend.

The Flexible FAQs plugin includes both shortcodes and editor blocks which gives you the choice of how to add FAQs to your site. Either approach is fine but we recommend using FAQ blocks where possible, especially for new WordPress sites. The new block-based editor is rapidly becoming the standard way to create and manage content in WordPress, so by using blocks you’re effectively future-proofing your site.

There are legitimate uses of shortcodes though which is why they’re still so popular. For example, if you’re using a page builder plugin to create WordPress pages then you’ll need to use shortcodes. Also, some sites do not have the block editor enabled, in which case you’ll also need to use shortcodes.

Using Blocks to Display FAQs

If you’re using WordPress version 5.0 or above the block editor will be enabled by default. Open up an existing page or create a new one to display the block editor. Enter a page title and select the FAQ block you wish to use. There are separate FAQ blocks available for each of the three templates (Text, Box, and Accordion).

Note: If you don’t see any FAQ blocks in the list of recently used blocks (i.e. because none have been selected before) then you can either scroll down to the Flexible FAQs blocks section or just type in ‘FAQ’ in the search box. Either method will allow you to insert the FAQ block of your choice.

Once the block has been added to the editor you’ll see a dropdown menu prompting you for a set of FAQs. Select the set of FAQs you created earlier to display them inside the editor. Here’s what it should look like: (the 2nd FAQ item has been manually expanded to show answer content)

When the FAQ block is selected the options panel is shown on the right-hand side of the editor. Use the various options to customize the look and feel of your FAQs, such as choosing a custom theme.

You can then take it one step further and customize the selected core FAQ theme. To do this, click the gear icon to the right of the Select FAQ Theme dropdown in the block inspector panel and select Customize Theme. This will reveal several option sections that you can use to customize the current theme. In the following screenshot, the FAQ Question text has been customized.

There are many other options you can use to customize FAQs and the list is growing with each plugin release. If you wish to save your customizations then you can once again click the gear icon and select Create Custom Theme. This will display a dialog to prompt you to save changes to the current theme.

Once a custom user theme has been created it’s saved to the database and can be reused in other FAQ blocks too! What’s more, you can even use your custom theme as a base to create additional custom themes. It’s really that flexible.

If you need to edit a custom themes title, or description then click the gear icon and select Manage Custom Themes. This will display another dialog where you can edit the details of any custom theme. You can also delete custom themes here too.

To view FAQs on the frontend save your page changes and click Preview.

Using Shortcodes to Display FAQs

To add FAQs via a shortcode simply add this to a page: [flexible-faqs id="123"]

The id shortcode attribute is the WordPress post ID for the set of FAQs you created earlier. To find the correct id for a specific set of FAQs go to Flexible FAQs > All FAQs in the WordPress admin and look in the ID column, and use it to update the shortcode id attribute.

Save the current page in the WordPress editor and view it on the front end by clicking Preview.

By default, the shortcode uses the text FAQ template but this can be updated along with a multitude of other settings via various shortcode attributes. For example, to set the FAQ shortcode to use the box template instead update the shortcode as follows:

[flexible-faqs id="123" template="box-expand"]

Shortcode Attributes

There are too many FAQ shortcode attributes to memorize so this section serves as a reference for every single attribute available for the [flexible-faqs] shortcode.

The full list of shortcode attributes is shown below, together with the default value for each one highlighted in green.

*Attribute included in free plugin version
Shortcode Attribute Possible Values Description
id* (null) | 123 (must be valid post ID) (required) The post ID of the FAQs to be displayed. Find this via Flexible FAQs > All FAQs in the WordPress admin (ID column).
group* (null) | 123 (must be valid FAQ group ID) Use this to display multiple sets of FAQs. Find the FAQ Group IDs via Flexible FAQs > FAQ Groups (ID column).
template* text-expand | box-expand | accordion-expand Template used to render the FAQs.
icon* arrow1 | arrow2 | arrow3 | plus1 | plus2 Icon used to trigger FAQ expand/collapse action.
rotate_icon* true | false Controls whether icon rotates when an FAQ item is expanded.
q_color* (inherited) (any valid CSS color) FAQ question color.
q_bg_color* (inherited) (any valid CSS color) FAQ question background color.
a_color* (inherited) (any valid CSS color) FAQ answer color.
faq_separator* true | false Enable a separator element between each FAQ item.
q_a_separator* true | false Enable separator between each Question & Answer.
q_bg_color_expanded (inherited) (any valid CSS color) FAQ question background color when in expanded state.
a_bg_color (inherited) (any valid CSS color) FAQ answer background color.
faq_border (null) | {"literal":"1 #a0d6d4 solid"} Border around each FAQ item. Specify as an object, having a ‘literal’ property with a valid CSS border as the value. Don’t add units to the border thickness.
q_a_separator_border (inherited) | {"literal":"1 #a0d6d4 solid"} Border between Question & Answer. Specify as an object, having a ‘literal’ property with a valid CSS border as the value. Don’t add units to the border thickness.
faq_separator_border (inherited) | {"literal":"1 #a0d6d4 solid"} Border between FAQ items. Specify as an object, having a ‘literal’ property with a valid CSS border as the value. Don’t add units to the border thickness.
faq_border_radius (null) | {"literal":"10px"} Border radius between FAQ items. Specify as an object, having a ‘literal’ property with a valid CSS border radius as the value.
inner_q_border_radius (null) | {"literal":"10px"} Question border radius. Specify as an object, having a ‘literal’ property with a valid CSS border radius as the value.
inner_a_border_radius (null) | {"literal":"10px"} Answer border radius. Specify as an object, having a ‘literal’ property with a valid CSS border radius as the value.
container_border (null) | {"literal":"10px"} FAQ container border radius. Specify as an object, having a ‘literal’ property with a valid CSS border radius as the value.
a_padding (null) | {"literal":"10px"} Answer padding. Specify as an object, having a ‘literal’ property with a valid CSS padding as the value.
q_padding (null) | {"literal":"10px"} Questions padding. Specify as an object, having a ‘literal’ property with a valid CSS padding as the value.
a_margin (null) | {"literal":"10px"} Answer margin. Specify as an object, having a ‘literal’ property with a valid CSS margin as the value.
q_margin (null) | {"literal":"10px"} Questions margin. Specify as an object, having a ‘literal’ property with a valid CSS margin as the value.
description (null) | This is a custom description. FAQ description. Displayed before the first FAQ item.
width (inherited) | 600 FAQ container width. Specify a numerical value only. Default unit is pixels.
container_width_unit px | % | em | rem FAQ container width unit.
margin_between_faqs (null) | 50 Margin between FAQ items. Specify a numerical value only. Default unit is pixels.
q_hover_color (null) | #5984c5 Question hover color. Any valid CSS color.
q_hover_color_expanded (null) | #5984c5 Question hover color when expanded. Any valid CSS color.
faq_box_shadow (null) | 0 10px 12px -8px #d2d2d2 FAQ item box shadow. Any valid CSS box shadow.
faq_container_box_shadow (null) | 0 10px 12px -8px #d2d2d2 FAQ container box shadow. Any valid CSS box shadow.
icon_align true | false Aligns FAQ expand icon to the right if true, or left if false.
no_icon false | true Hides the FAQ expand icon if true.
icon_margin (null) | {"literal":"10px"} Margin around the FAQ expand icon. Specify as an object, having a ‘literal’ property with a valid CSS margin as the value.
icon_expand_color #aaa (any valid CSS color) Icon color (when in collapsed state).
icon_collapse_color (null) (any valid CSS color) Icon color (when in expanded state).
icon_expand_bg_color #aaa (any valid CSS color) Icon background color (when in collapsed state).
icon_collapse_bg_color (null) (any valid CSS color) Icon background color (when in expanded state).
align_faq_container (null) | left | center | right Align FAQ container.
faq_post_title true | false Display the FAQ custom post title.
custom_title (null) | This is a Custom Title Override the default post title.
align_to_faq false | true Align FAQ container to post title and description. This is most effectively used in conjunction with width and align shortcode attributes.
q_bold true | false Display question text in bold format. Disable this to support custom formatting (italics, bold, underline etc.).

Here’s an example that demonstrates how to use each FAQ shortcode attribute:

[flexible-faqs id='1234' template="box-expand" icon="arrow3" rotate_icon="true" q_color="red" q_bg_color="blue" a_color="green" faq_separator="true" q_a_separator="true" q_bg_color_expanded="orange" a_bg_color="pink" faq_border='{"literal": "4 red solid"}' q_a_separator_border='{"literal": "10 gold solid"}' faq_separator_border='{"literal": "10 pink solid"}' faq_border_radius='{"literal":"10px"}' inner_q_border_radius='{"literal":"10px"}' inner_a_border_radius='{"literal":"10px"}' container_border='{"literal": "5 green dotted"}' a_padding='{"literal":"10px 5px"}' q_padding='{"literal":"20px"}' a_margin='{"literal":"20px"}' q_margin='{"literal":"20px"}' description="This is a custom description" width="75" container_width_unit="%" margin_between_faqs="70" q_hover_color="brown" q_color_expanded="red" faq_box_shadow="10px -20px" faq_container_box_shadow="5px 5px 10px" icon_align="false" no_icon="false" icon_margin="0px" icon_expand_color="yellow" icon_collapse_color="pink" icon_expand_bg_color="red" icon_collapse_bg_color="green" align_faq_container="true" faq_post_title="true" custom_title="Hello there." align_to_faq="true" q_bold="true"]

Working with FAQ Items

This section introduces extra bits and pieces of information that make working with FAQs more efficient.

Managing Sets of FAQs

Just like posts and pages, sets of FAQs are stored in the WordPress database and can be accessed in the same way. To see a list of all currently defined FAQs go to Flexible FAQS > All FAQs in the WordPress admin.

Use this page to launch the FAQ editor for a specific set of FAQs. You can also add FAQs you no longer want to the trash just like you would for posts and pages.

Other Ways to Expand/Collapse FAQ Items

We’ve already seen how to collapse FAQ items by clicking the Done button (located towards the bottom right of the Answer input field) but how do you expand a collapsed FAQ?

This can be achieved by either double-clicking (1) anywhere in the title bar of an FAQ item or, single-clicking (2) on the pencil icon that appears when it’s hovered over. You can use either of these methods to collapse an FAQ item too.

Reordering FAQ Items

By default, FAQ items will appear on the frontend of your site in the same order as they appear in the FAQ editor. To reorder FAQ items simply hover over the icon to the left of an FAQ item title bar. The mouse icon will change to a cross-shaped icon indicating that you can drag the FAQ item up or down to reorder the FAQ list as required.

After re-ordering FAQ items don’t forget to save your changes. The next time FAQs are displayed on the frontend they will reflect the updated order.

Note: You can only reorder collapsed FAQ items. So it’s usually a good idea to collapse all FAQs before attempting to reorder them.

Deleting An FAQ Item

To delete an existing FAQ item from inside the FAQ editor simply hover over the title bar of the FAQ item you wish to delete and click the Remove FAQ Item ‘X’ shaped icon when it appears. You’ll be asked for confirmation before the FAQ item is removed to prevent accidental deletion by the user.

FAQ Groups

FAQ Groups are a convenient way to manage multiple sets of individual FAQs and work in a very similar way to Post Categories. There are two ways to create an FAQ Group.

Perhaps the easiest method is via the post editor when editing a set of FAQs. On the right-hand side of the page is the FAQ Groups meta box. Use this to assign the current set of FAQs to one or more existing groups, or create a new one.

The other way to create an FAQ Group is via Flexible FAQs > FAQ Groups in the WordPress admin. Here, you can also edit existing FAQ Groups, or even delete a group.

Using FAQ Groups

For blocks, to display an FAQ Group instead of a single set of FAQs click the toggle button to the right of the Select single set of FAQs dropdown label. Then simply select any FAQ Group via the same dropdown.

To show a group of FAQs using shortcodes use the group shortcode attribute instead of id:

[flexible-faqs group="123" template="box-expand"]

This specifies that a group of FAQs should be displayed rather than a single set.

Still Have Questions?

We want to hear from you! If there’s any aspect of the plugin that you still need help with or have any questions or comments then please get in touch. We’re here to help. Do you think the documentation needs additional information or screenshots etc? If so you can contact us directly here.

First published October 29, 2018