Plugin-free FAQ page snippet


Hi Everyone,

Just thought I'd share how to create a FAQ page without using a plugin.

First, create your page template file for the FAQ page.

Then, enqueue the accordion add-on:

// Enqueue the UIkit accordion add-on.
add_action( 'beans_uikit_enqueue_scripts', 'my_theme_enqueue_uikit_assets' );
function my_theme_enqueue_uikit_assets() {
    beans_uikit_enqueue_components( array( 'accordion' ), 'add-ons' );
}

Then, add your FAQ entries in an array of arrays and iterate over them to print them to the page. In my example, I'm replacing the beans_loop_template with my FAQ:

// Replace main content
beans_modify_action_callback( 'beans_loop_template', 'my_theme_replace_main_content' );
function my_theme_replace_main_content() {

    // FAQs
    $faq_data = array(
        "Section Heading 1" =>
            array(
                'FAQ Title 1' => '<p>Answer to FAQ 1 that can include HTML, all wrapped inside a paragraph tag.</p>',
                'FAQ Title 2' => '<p>Answer to FAQ 2 that can include HTML, all wrapped inside a paragraph tag.</p>'
            ),
        "Section Heading 2" =>
            array(
                'FAQ Title 1' => '<p>Answer to FAQ 1 that can include HTML, all wrapped inside a paragraph tag.</p>'
        )
    );

    echo '
    <div class="uk-container uk-container-center">
        <div class="uk-accordion" data-uk-accordion="{showfirst: false}">';
        foreach($faq_data as $section_heading => $data) {
            if (is_array($data)) {
                echo '<h2>' . $section_heading . '</h2>';
                foreach ($data as $faq_title => $faq_answer) {
                    echo '<h3 class="uk-accordion-title uk-h4">' . $faq_title . '</h3>';
                    echo '<div class="uk-accordion-content">' . $faq_answer . '</div>';
                }
            }
        }
    echo '
        </div>
    </div>';
}

Close by loading beans:

// Remove sidebar by setting the layout to content only
beans_add_filter( 'beans_layout', 'c' );

// Load document which is always needed at the bottom of template files
beans_load_document();

I like to add a down-carat to the left of the heading, which changes to an up-carat when the FAQ entry is active, so in my CSS file I add:

/* Up/down carat icons before H3
*  Choose other icons here: http://fontawesome.io/cheatsheet/
*  Change NNNN below with your FAQ page's ID
*/

.page-id-NNNN div.uk-accordion h3.uk-accordion-title::before {
    content: "\f107";
    display: inline-block;
    font-family: FontAwesome;
    font-size: 14px;
    margin-right: 8px;
}

.page-id-NNNN div.uk-accordion h3.uk-accordion-title.uk-active::before {
    content: "\f106";
}

Hope my little snippet helps someone create a FAQ quickly and easily!

Edited 2 weeks, 1 day ago by Brian Jones


I like this! Good timing too, I have to make an FAQ soon.

Write a reply

Login or register to write a reply, it's free!