How to Create a Custom jQuery FAQ Accordion for WordPress (Step-by-Step)

One of our readers recently reached out asking how to add an FAQ accordion to their WordPress site. While plugins exist for this, we've helped thousands of users build custom solutions. In this hands-on guide, drawn from years of WordPress development experience, we'll create a lightweight jQuery FAQ accordion using a simple plugin. This method ensures performance, customization, and no bloat.

What Is an Accordion?

In web design, an accordion is a space-saving UI element with expandable panels. Click a header to reveal or hide content below—ideal for FAQs. We've featured similar accordions on our free WordPress setup guides. See the example screenshot below:

Video Walkthrough

Subscribe to WPBeginner for step-by-step videos like this.

If video isn't your style or you need more details, read on for our complete written tutorial.

Prerequisites: Set Up Your FAQs

First, create an FAQ section with a 'question' custom post type. Follow our detailed tutorial on adding an FAQ section to WordPress. This registers the post type and lets you add questions/titles with answers as content, ordered via menu_order.

Build the Plugin

WordPress includes jQuery, but jQuery UI themes come from CDN. We'll build a plugin with a shortcode to display FAQs and auto-enqueue scripts/CSS.

On your desktop, create a folder named 'my-faq-accordion'. In a text editor (e.g., VS Code or Notepad++), create 'my-faq-accordion.php' and paste this production-ready code:

<?php
/**
 * Plugin Name: My FAQ Accordion
 * Description: Simple jQuery accordion for FAQ custom post types.
 * Version: 1.0
 * Author: Your Site
 */

function my_faq_enqueue_assets() {
    wp_register_style( 'jquery-ui-humanity', 'https://code.jquery.com/ui/1.13.2/themes/humanity/jquery-ui.css', array(), '1.13.2' );
    wp_enqueue_style( 'jquery-ui-humanity' );
    wp_enqueue_script( 'jquery-ui-accordion' );
}
add_action( 'wp_enqueue_scripts', 'my_faq_enqueue_assets' );

function faq_accordion_shortcode() {
    $args = array(
        'posts_per_page' => 10,
        'orderby'        => 'menu_order',
        'order'          => 'ASC',
        'post_type'      => 'question',
        'post_status'    => 'publish'
    );
    $faqs = get_posts( $args );
    if ( empty( $faqs ) ) {
        return '<p>No FAQs available yet.</p>';
    }
    $output = '<div id="faq-accordion">';
    foreach ( $faqs as $faq ) {
        setup_postdata( $faq );
        $output .= sprintf(
            '<h3>%s</h3><div>%s</div>',
            esc_html( get_the_title() ),
            wpautop( get_the_content() )
        );
    }
    $output .= '</div>';

    // Inline JS for accordion
    $output .= '<script>
    jQuery(document).ready(function($) {
        $("#faq-accordion").accordion({
            heightStyle: "content",
            collapsible: true
        });
    });
    </script>';

    wp_reset_postdata();
    return $output;
}
add_shortcode( 'faq_accordion', 'faq_accordion_shortcode' );

Save the file. That's it—no separate JS needed, as we've inlined it safely.

Upload the 'my-faq-accordion' folder to /wp-content/plugins/ via FTP or your host's file manager. Activate it in WordPress Admin > Plugins.

Add the Accordion to a Page

Create a new page: Pages > Add New. Title it 'FAQ'. In the editor, insert:

[faq_accordion]

Publish and preview. Your FAQs now appear as a sleek, interactive accordion!

Customize Styles and Colors

This uses jQuery UI's 'humanity' theme from CDN. Swap it in the enqueue function with options like 'smoothness', 'cupertino', or 'redmond'. Browse and download from jQuery UI ThemeRoller, then host locally for speed.

We've used this setup on production sites for years—reliable and user-friendly. Questions? Drop a comment below.