Getting Started with WP FAQ Pro
WP FAQ Pro plugin adds a Menu tab in WP Admin side with the name “FAQ Pro” where you can add new FAQ post, edit and delete.
Screen shows “FAQ Pro” tab and faq post added.
You can also add categories for FAQ. To add a category just got to FAQ Pro -> FAQ Category and add category. Once you add the category in plugin will create a shortcode with category
eg. [sp_faq category="13"]
Screen shows FAQ Category Page view
To add a New FAQ Post Just go to FAQ Pro Tab and add click on Add New and insert FAQ title and content as you add for WordPress post.
Bellow screen shows how to add a FAQ post.
How to Display and Shortcodes
Display a FAQ page is very simple. Just go to Pages-> add New and add page title ie FAQ and add shortcode.
WP FAQ Pro contain 2 shortcodes.
[sp_faq]
[faq-category-grid]
FAQ Shortcode Parameters
-
Limit:
[sp_faq limit="20"]
Display number of FAQ’s items. You can see all post by limit=”-1″. -
Design:
[sp_faq design="design-1"]
Select design for FAQ. Where Designs are design – 1 to design – 15. -
Single Open:
[sp_faq single_open="true"]
Remain open one FAQ at a time. By default value is “true”. Values are “true” OR “false”. -
Default Open FAQ:
[sp_faq default_open_faq="2"]
Default open FAQ on page load. -
Transition Speed:
[sp_faq transition_speed="300"]
Transition speed when user click to open FAQ item. -
Background Color:
[sp_faq background_color="#000"]
You can set background color of FAQ item. -
Active Background Color:
[sp_faq active_bg_color="#000"]
You can set Active background color of FAQ item. -
Font Color:
[sp_faq font_color="#fff"]
You can Set font color of FAQ item. -
Active Font Color:
[sp_faq active_font_color="#fff"]
You can Set Active font color of FAQ item. -
Active Title Color:
[sp_faq active_title_color="#fff"]
You can Set Active Title color of FAQ item. -
Border Color:
[sp_faq border_color="#444"]
You can Set border color of FAQ item. -
Heading Font Size:
[sp_faq heading_font_size="20"]
You can Set font size for FAQ heading. -
Icon Color:
[sp_faq icon_color="white"]
Set the icon color. By default value is “black”. Options are “black” OR white”. -
Icon Type:
[sp_faq icon_type="plus"]
Set the icon type. By default value is “arrow”. Options are “plus” OR arrow”. -
Icon Position:
[sp_faq icon_position="left"]
Set the icon position. By default value is “right”. Options are “left” OR right”. -
Posts:
[sp_faq posts="1,5,6"]
Display only specific FAQ posts. You can pass multiple post id by comma separated. -
Category:
[sp_faq category="11,12,13"]
Display FAQ’s by category. You can pass multiple ids by comma separated. -
Category Name:
[sp_faq category_name="category name"]
Display FAQ’s category name. -
Schema:
[sp_faq schema="true"]
Enable FAQ schema markup. Values are “true” OR “false” -
Pagination:
[sp_faq pagination="true"]
Show/Hide pagination links. Values are “true” OR “false” -
Pagination Type:
[sp_faq pagination_type="numeric"]
Pagination type works when pagination set to true. Two types can be used for pagination “numeric” and “prev-next”. -
Display Child Category:
[sp_faq include_cat_child="true"]
Display child category FAQ. Values are “true” OR “false”. -
Exclude Post:
[sp_faq exclude_post="1,5,6"]
Exclude some FAQ post which you do not want to display. You can pass multiple post id by comma separated. -
Exclude Category:
[sp_faq exclude_cat="1,5,6"]
Exclude some FAQ category which you do not want to display. You can pass multiple category id by comma separated. -
Order:
[sp_faq order="DESC"]
Set the FAQ’s order. By default value is “DESC”. Options are “DESC” OR ASC”. -
Order By:
[sp_faq orderby="post_date"]
Display FAQ in your order. By default value is “post_date”. Options are “ID”, “title”, “post_date”, “modified”, “rand”, “menu_order”. -
Query Offset
[sp_faq query_offset="5"]
This will hide first five post. E.g I have set offset 5 then it will skip first five post.
Note: This will not work with limit=-1. -
Extra Class:
[sp_faq extra_class=""]
You can add extra class here.
Note: Extra class added as parent so using extra class you customize your design.
FAQ Category Grid Shortcode Parameters
-
Limit:
[faq-category-grid limit="20"]
Display number of FAQ. You can see all FAQ by limit=”-1″. -
Grid:
[faq-category-grid grid="2"]
Display FAQ’s category in grid view. -
Border Color:
[faq-category-grid border_color="#444"]
You can Set border color of FAQ box. -
Background Color:
[faq-category-grid background_color="#000"]
You can Set background color of FAQ item. -
Button Background Color:
[faq-category-grid btn_bg_color="#000"]
You can Set background color of FAQ button. -
Hover Button Background Color:
[faq-category-grid btn_hover_bg_color ="#000"]
You can Set background color of FAQ hover button . -
Button Font Color:
[faq-category-grid btn_font_color="#000"]
You can Set font color of FAQ button. -
Hover Button Font Color:
[faq-category-grid btn_hover_font_color="#000"]
You can Set font color of FAQ hover button. -
Font Color:
[faq-category-grid font_color="#fff"]
You can Set font color of FAQ item. -
Font Size:
[faq-category-grid font_size=""]
You can Set font size of Faq. -
Link Target:
[faq-category-grid link_target="self"]
Open link in a same window or in a new tab. Values are “self” OR “blank”. -
Show More Button:
[faq-category-grid show_more_button="Show More"]
Change show more button text. -
Show Less Button:
[faq-category-grid show_less_button="Show Less"]
Change show less button text. -
Posts:
[faq-category-grid posts="1,5,6"]
Display only specific FAQ posts. You can pass multiple post id by comma separated. -
Post To Show:
[faq-category-grid post_to_show="2"]
Display FAQ post at a time in category block, others will be toggle. -
Display Post Count:
[faq-category-grid display_post_count="false"]
Display FAQ post count with category name. Options are ‘”true” or “false”. -
Exclude Post:
[faq-category-grid exclude_post="1,5,6"]
Exclude some FAQ post which you do not want to display. You can pass multiple post id by comma separated. -
Category:
[faq-category-grid cats="1,2,3"]
Display FAQ’s for specific category. You can pass multiple ids by comma separated. -
Display Child Category:
[faq-category-grid include_cat_child="true"]
Display child category slides. Values are “true” OR “false”. -
Exclude Category:
[faq-category-grid exclude_cat="1,5,6"]
Exclude some FAQ category which you do not want to display. You can pass multiple category id by comma separated. -
Order:
[faq-category-grid order="DESC"]
Set the FAQ’s order. By default value is “DESC”. Options are “DESC” OR “ASC”. -
Order By:
[faq-category-grid orderby="post_date"]
Set the FAQ’s sort by. By default value is “post_date”. Options are “ID”, “title”, “post_date”, “modified”, “rand”, “menu_order”. -
Category Order:
[faq-category-grid cat_order="ASC"]
Set the FAQ category order. Options are “DESC” OR “ASC”. -
Category Order By:
[faq-category-grid cat_orderby="name"]
Order FAQ category. Default value is “name”. Options are “name”, “slug”, “id” OR “count”. -
Cat Limit:
[faq-category-grid cat_limit="10"]
Limit the number of FAQ’s category. Leave empty for all. -
Extra Class:
[faq-category-grid extra_class=""]
You can add extra class here.
Note: Extra class added as parent so using extra class you customize your design.
Shortcode Builder
Check the Result of any Shortcode with Preview using “Shortcode Builder“
Please Go To Admin Menu -> wp-faq-pro -> Shortcode Builder.
Gutenberg Blocks
Please go to page or post and add “Gutenberg Blocks“.
Faq Post Type Slug Setting
Please go to the FAQ Setting page. You can change Post Type slug and Category slug with your desired your text.
FAQ’s with Custom Order
You can display FAQ’s in custom order with Drag & Drop interface. Click on ‘Sort FAQs’ link on FAQ’s listing page, Drag FAQ’s row and click the ‘Save Sort Order’ button to save.
Note: Put orderby="menu_order" order="ASC"
parameter in FAQ shortcode for custom ordering.
Working with WooCommerce
A) Display FAQ under product description section. To Enable, check Enable WooCommerce FAQ and add
WooCommerce FAQ Tab Text
B) Once Enable WooCommerce FAQ is checked, you can find a FAQ PRO tab under Product meta section. Just enable FAQ and add the shortcode with parameter needed.
Template Structure + Overriding templates via a theme
The template files of wp faq contain the markup and template structure for the front-end of your site. If you open these files you’ll notice they all contain many hooks which will allow you to add / move content without having to edit the template files themselves. This method protects even further against any upgrade issues as the template files can be left completely untouched.
Alternatively, you can edit these files in an upgrade safe way through overrides. Simply copy it into a directory within your theme named /wp-faq-pro, keeping the same file structure.
The copied file will now override the faq pro default template file. Do not edit these files within the core plugin itself as they are overwritten during the upgrade process and any customizations will be lost.
The following template files can be found within the /wp-faq-pro/templates/ directory:
-
Click Here To See Template Hierarchy
- faq
- content.php
- loop-start.php
- loop-end.php
-
faq-grid
- content.php
- loop-start.php
- loop-end.php
- pagination.php