WP Manifestindependent plugin directory
manifest / utilities / sls-faqs

Starlabs FAQ Filter

This is a custom FAQ plugin built on wordpress.

by Starlabs · github.com/starlabs-technology/sls-faqs

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/starlabs-technology/sls-faqs/archive/refs/heads/main.zip
Readme github.com/starlabs-technology/sls-faqs ↗

A fully accessible FAQ manager for WordPress with category filtering, tabbed UI, import/export, and complete customization.

Author: Star Labs Technology Text Domain: starlabs-faq

Table of Contents

Overview

SLS FAQs (Starlabs FAQ Filter) is a clean, accessible FAQ management plugin built on WordPress's Custom Post Type system. Create FAQ items, organize them into categories, and display them on any page with a beautiful tabbed filtering interface — all rendered with proper WAI-ARIA attributes for full accessibility compliance. The plugin includes built-in import/export, a custom CSS editor, and extensive developer hooks for customization.

The Problem It Solves

FAQ sections are one of the most common elements on websites, yet most solutions fall short:

  • Accordion plugins don't support categorization or filtering
  • Page builder FAQ widgets are locked into a specific builder ecosystem
  • Manual HTML FAQs are impossible to maintain and lack interactivity
  • Third-party FAQ services add external dependencies and cost money
  • Most FAQ plugins ignore accessibility — no keyboard navigation, no ARIA attributes, no screen reader support

SLS FAQs addresses all of these issues:

  • Category-based filtering with a tabbed UI — users can filter FAQs by topic
  • Works everywhere — renders via a simple shortcode, compatible with any theme or page builder
  • Easy to maintain — FAQs are managed as a Custom Post Type with familiar WordPress UI
  • Fully accessible — WAI-ARIA roles, keyboard navigation (arrow keys, Home/End), aria-selected, focus management
  • Deep linking — URL hash support lets you link directly to a specific category tab
  • Import/Export — Move FAQs between sites with JSON export/import
  • No external dependencies — Pure WordPress, self-hosted, zero API calls
  • Dark mode + print styles built in

Key Features

Feature Description
Custom Post Type FAQs stored as a proper CPT (faq) with title, content, excerpt, and sort order
Category Taxonomy Hierarchical faq_category taxonomy for organizing FAQs by topic
Tabbed Filtering Front-end category tabs with smooth show/hide filtering
Category Badges Each FAQ displays its primary category as a colored badge
Deep Linking URL hash (#category-slug) activates the matching tab on page load
Full Accessibility WAI-ARIA tablist, roving tabindex, keyboard navigation
Shortcode [starlabs_faqs] with attributes for categories, ordering, pagination
Additional CSS CodeMirror-powered CSS editor for custom styling
Import / Export JSON-based import/export with optional upsert-by-slug
Danger Zone One-click bulk delete with safety confirmations
Dark Mode Automatic dark mode via prefers-color-scheme with CSS custom properties
Print Styles Tabs hidden, all FAQs expanded, clean print layout
Reduced Motion Respects prefers-reduced-motion: reduce
Conditional Loading CSS and JS only loaded on pages where the shortcode is used
Developer Hooks 8+ filters for deep customization

How It Works

Architecture

  1. Custom Post Type — FAQs are stored as faq posts with support for title, editor (answer content), excerpt, and menu order (for sorting)
  2. Taxonomy — faq_category is a hierarchical taxonomy (like WordPress categories) for organizing FAQs into topics
  3. Shortcode — [starlabs_faqs] queries FAQ posts, groups them by category, and renders a tabbed filtering interface
  4. Front-End JS — Handles tab switching, keyboard navigation, URL hash updates, and show/hide filtering with ARIA attribute management
  5. Conditional Assets — CSS and JS are only enqueued on pages where the shortcode is detected, keeping other pages lightweight

Data Flow

WordPress Admin → Create FAQ Posts → Assign Categories
                                        ↓
Frontend Page → [starlabs_faqs] Shortcode → WP_Query → Render Tabs + Items
                                                          ↓
                                                   JavaScript → Tab Filtering + Keyboard Nav + Hash Updates

Installation

  1. Download or clone the plugin into your WordPress /wp-content/plugins/ directory
  2. Ensure the folder is named sls-faqs
  3. Go to WordPress Admin → Plugins and activate Starlabs FAQ Filter
  4. Navigate to SLS FAQs in the admin sidebar to start creating FAQs

Usage

Creating FAQs

  1. Go to SLS FAQs → Add New FAQ
  2. Enter the question as the post title
  3. Write the answer in the content editor (supports rich text, images, etc.)
  4. Optionally add an excerpt for a short preview
  5. Set the Order (Page Attributes → Order) to control sort position
  6. Assign one or more FAQ Categories
  7. Click Publish

Organizing with Categories

  1. Go to SLS FAQs → FAQ Categories
  2. Create categories to group your FAQs by topic (e.g., "Billing", "Technical", "Account")
  3. Categories appear as filter tabs on the front end
  4. Categories are hierarchical — you can create parent/child structures

Displaying FAQs with Shortcode

Add the shortcode to any page, post, or widget area:

[starlabs_faqs]

Display only specific categories:

[starlabs_faqs categories="billing,technical"]

Customize ordering:

[starlabs_faqs orderby="title" order="DESC"]

Limit the number of FAQs shown:

[starlabs_faqs per_page="10"]

Hide the "All" tab:

[starlabs_faqs show_all_tab="false"]

Additional CSS

  1. Go to SLS FAQs → Additional CSS
  2. Use the CodeMirror editor to write custom CSS
  3. Styles are injected inline after the base FAQ stylesheet
  4. Use CSS custom properties (see CSS Custom Properties) for theming

Import & Export

Exporting FAQs

  1. Go to SLS FAQs → Tools
  2. Click Export FAQs
  3. A JSON file downloads containing all FAQ posts and their categories

Importing FAQs

  1. Go to SLS FAQs → Tools
  2. Upload a JSON file previously exported from the plugin
  3. Choose whether to upsert by slug (update existing FAQs with matching slugs) or create new ones
  4. Click Import

Uninstall Options

By default, deleting the plugin preserves your FAQ data. To enable full cleanup:

  1. Go to SLS FAQs → Tools
  2. In the Danger Zone section, toggle "Delete all FAQ data on plugin uninstall"
  3. When the plugin is deleted via WordPress, all FAQ posts and categories will be removed

Shortcode Reference

[starlabs_faqs categories="SLUGS" per_page="NUM" orderby="FIELD" order="DIR" show_all_tab="BOOL" update_hash="BOOL"]
Attribute Default Options Description
categories (all) Comma-separated slugs Filter to specific categories
per_page -1 Any integer Number of FAQs to show (-1 = all)
orderby menu_order menu_order, title, date Sort field
order ASC ASC, DESC Sort direction
show_all_tab true true, false Show/hide the "All" tab
update_hash true true, false Update URL hash on tab change

Smart Behavior

When exactly one category slug is passed, the tabs auto-hide (since there's nothing to filter). JavaScript is dequeued for performance. This can be overridden via the starlabs_faq_render_tabs filter.

Front-End Display

Tabbed Category Filtering

The shortcode renders a tab bar with one tab per category plus an "All" tab. Clicking a tab filters the FAQ list to show only items in that category. The filtering is instant (CSS-based hide/show) with no page reload.

Category Badges

Each FAQ item displays a colored badge showing its primary category. The primary category is determined alphabetically by default, but can be overridden with the starlabs_faq_primary_term filter.

Deep Linking

  • Clicking a tab updates the URL hash (e.g., #billing)
  • Loading a page with a hash in the URL automatically activates the matching tab
  • This enables linking directly to a specific FAQ category

Accessibility

The tabbed interface follows WAI-ARIA Authoring Practices:

  • Tab bar has role="tablist"
  • Each tab has role="tab" with aria-selected and aria-controls
  • Tab panels have role="tabpanel" with aria-labelledby
  • Keyboard navigation:
    • ← / → — Move between tabs
    • Home / End — Jump to first/last tab
    • Enter / Space — Activate focused tab
  • Roving tabindex for proper focus management

Dark Mode

The plugin automatically adapts to the user's system preference using prefers-color-scheme: dark. All colors are defined as CSS custom properties, making them easy to override.

Print Styles

When printing, the plugin automatically:

  • Hides the tab bar
  • Expands all FAQ items
  • Removes decorative elements
  • Provides a clean, readable layout

Developer Reference

Filters

Filter Parameters Description
starlabs_faq_force_assets (bool) Force CSS/JS loading on all pages (useful for page builders)
starlabs_faq_disable_default_css (bool) Completely dequeue the base FAQ stylesheet
starlabs_faq_all_label (string) Customize the "All" tab label text
starlabs_faq_query_args (array) Modify the WP_Query arguments for FAQ retrieval
starlabs_faq_render_item (string, int) Override the HTML output for individual FAQ items
starlabs_faq_primary_term (WP_Term, array) Choose which term is displayed as the "primary" badge
starlabs_faq_render_tabs (bool) Override whether the tab bar renders
starlabs_faq_admin_capability (string) Change the required capability (default: manage_options)

CSS Custom Properties

Override these variables to theme the FAQ display:

:root {
  --faq-bg: #ffffff;           /* Item background */
  --faq-bg-open: #f8f9fa;     /* Open item background */
  --faq-border: #e0e0e0;      /* Item border color */
  --faq-border-strong: #ccc;  /* Strong border */
  --faq-text: #1a1a1a;        /* Text color */
  --faq-muted: #666;          /* Muted/secondary text */
  --faq-accent: #0073aa;      /* Accent color (active tab, badges) */
  --faq-radius: 6px;          /* Border radius */
  --faq-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Box shadow */
}

Constants

Constant Description
STARLABS_FAQ_FILE Main plugin file path
STARLABS_FAQ_DIR Plugin directory path
STARLABS_FAQ_URL Plugin directory URL
STARLABS_FAQ_OPT_CUSTOM_CSS Option key for Additional CSS content
STARLABS_FAQ_OPT_DELETE_ON_UNINSTALL Option key for uninstall behavior toggle
Starlabs_FAQ_Plugin::VERSION Plugin version (1.3.2)
Starlabs_FAQ_Plugin::SLUG Plugin slug (starlabs-faq)

File Structure

sls-faqs/
├── starlabs-faqs.php          # Main plugin bootstrap
├── uninstall.php              # Uninstall routine (respects delete option)
├── README.md                  # This file
├── assets/
│   ├── css/
│   │   └── faq.css            # Front-end styles (CSS vars, dark mode, print, animation)
│   ├── js/
│   │   └── faq.js             # Front-end tabs, filtering, keyboard nav, hash management
│   └── images/
│       └── sls-light-logo.png # Star Labs branding logo
└── includes/
    ├── helpers.php            # Utility functions (versioning, flash notices, branding)
    ├── class-plugin.php       # CPT + taxonomy registration, activation/deactivation
    ├── class-frontend.php     # Shortcode [starlabs_faqs], conditional asset enqueue
    ├── class-admin.php        # Additional CSS page, CodeMirror editor, CPT branding
    ├── class-help.php         # Help / usage guide admin page
    └── class-tools.php        # Tools page: Export/Import, Uninstall settings, Danger Zone

Admin Pages

The plugin adds the following pages under the SLS FAQs menu:

Page Description
SLS FAQs List all FAQ posts (WordPress CPT list table)
Add New FAQ Create a new FAQ item
FAQ Categories Manage FAQ categories (WordPress taxonomy UI)
Additional CSS CodeMirror editor for custom FAQ styles
Help Quick-start guide with shortcode examples and usage tips
Tools Export/Import JSON, uninstall settings, danger zone (bulk delete)

Requirements

  • WordPress 6.0 or higher
  • PHP 7.4 or higher
  • No external dependencies — uses only WordPress core APIs
  • Compatible with any theme
  • Compatible with page builders (use starlabs_faq_force_assets filter if assets aren't loading)

Uninstall Behavior

When the plugin is deactivated, nothing is removed — all FAQ posts, categories, and settings are preserved.

When the plugin is deleted (via WordPress Plugins page):

  • Default behavior: Options are removed, but FAQ posts and categories are preserved
  • If "Delete all FAQ data" is enabled (in Tools → Danger Zone): All FAQ posts, categories, and options are permanently deleted

License

This plugin is licensed under the GNU General Public License v2.0 or later.

Built with ❤️ by Star Labs Technology