Tabbed FAQ

وضاحت

Tabbed FAQ creates a structured FAQ system using a custom post type and category taxonomy, rendered via a shortcode. It is framework-agnostic (no Elementor or page builder required) and designed for large FAQ sets, SEO safety, and easy customization.

Features include:
* Custom Post Type for FAQs
* Custom taxonomy for FAQ categories
* Horizontal, scrollable category tabs with arrow controls
* Accordion-style questions and answers
* FAQPage JSON-LD schema output
* CSV importer for bulk creation and updates
* Shortcode-based rendering

Data Structure

Custom Post Type:
Post Type: tabbed_faq
Supports: Title, Editor, Menu Order, Revisions

Each FAQ:
* Title = Question
* Content = Answer

Taxonomy:
Taxonomy: tabbed_faq_category
Used to generate the category tabs

Usage

Use the shortcode:

[tabbed_faq]

The shortcode can be placed in:
* Pages
* Posts
* Shortcode blocks
* PHP templates using do_shortcode()

Shortcode Attributes

show_all_tab (default: 1)
Show an “All” tab at the beginning.

all_tab_label (default: All)
Label for the “All” tab.

default_category (default: all)
Category slug to load first.

posts_per_page (default: 300)
Maximum FAQs per category.

orderby (default: menu_order)
Sorting field.

order (default: ASC)
Sort direction.

include_categories (default: empty)
Comma-separated category slugs to include.

exclude_categories (default: empty)
Comma-separated category slugs to exclude.

schema_mode (default: all)
Controls schema output.
Possible values:
* all – include all FAQs on the page (recommended)
* active – include only the default category

Examples:

[tabbed_faq]

[tabbed_faq default_category=”vehicle-care”]

[tabbed_faq include_categories=”technical,services”]

[tabbed_faq schema_mode=”active”]

FAQ Schema Behavior

By default (schema_mode=”all”):

• Outputs a single FAQPage JSON-LD block
• Includes all FAQs rendered on the page
• Merges schema from multiple shortcodes into one block

When using schema_mode=”active”:

• Only FAQs from the default category are included in schema

Schema output:
* Is generated from actual FAQ content
* Is printed once per page in the document head
* Is safe for SEO and Google FAQ guidelines

CSV Importer

Accessible via:
FAQs → Import FAQs

CSV requirements:
* Header row required
* UTF-8 encoded CSV

Supported columns:

category (required)
Category name or slug

question (required)
FAQ question

answer (required)
FAQ answer (HTML allowed)

id (optional)
Existing FAQ post ID to update

slug (optional)
Post slug to match/update

Update modes:
* Prefer ID, then Slug (default)
* Slug only
* Always create new

If no match is found, a new FAQ is created automatically.

Styling

Default styles are located at:
assets/css/tabbed-faq.css

Key CSS selectors:
.tabbed-faq
.tabbed-faq__tabs
.tabbed-faq__tab
.tabbed-faq__accordion
.tabbed-faq__item
.tabbed-faq__toggle
.tabbed-faq__answer

Styles may be overridden in the theme or by dequeuing the stylesheet.

JavaScript

JavaScript file:
assets/js/tabbed-faq.js

Handles:
* Tab switching
* Horizontal tab scrolling
* Accordion open/close behavior
* ARIA attribute updates

No external dependencies.

Accessibility

• Tabs use proper tablist and tab roles
• Accordion buttons use aria-expanded and aria-controls
• Only one accordion item is open per category at a time

Performance

• Uses get_posts() for data retrieval
• No AJAX requests
• Schema generated once per page
• Suitable for large FAQ sets

Uninstall

Deactivating the plugin:
* Removes frontend output
* Does not delete FAQ posts or categories

Manual cleanup requires deleting tabbed_faq posts and taxonomy terms.