Using CMB2 to Create an FAQ

If you aren’t already familiar, CMB2 is a metabox, custom fields, and forms library for WordPress. And well…as Justin pointed out, what is it good for? Absolutely everything! With seemingly endless options, it can sometimes be difficult to decide on how to implement these types of customizations.

Well, what if you have a lot of questions? And just as many answers? Look no further. Let’s create a ‘Frequently Asked Questions’ section.

For the purposes of this, I installed CMB2 within my theme rather than within a separate plugin. Important to note: depending on the purpose of your data/if it is theme dependent, you might want it to stick around if your theme changes someday so the plugin route might be preferable!

First off, follow the directions to set up the ideal file structure for CMB2 within your theme.

Second, we need to define our metabox and the particular customizations we would like. In our case, we’re going to be creating a metabox that has groupings within it. Those groupings will be our question and answer pairings.

add_action( 'cmb2_admin_init', 'wds_faq_metaboxes' );

/**
 * Define the metabox and field configurations.
 */
function wds_faq_metaboxes() {

    /**
     * Initiate the metabox!
     */
    $cmb = new_cmb2_box( array(
        'id'           => 'faq_metabox',
        'title'        => __( 'Frequently Asked Questions', 'wds' ),
        'object_types' => array( 'page', ), // Post type
        'show_on'      => array( 'id' => array( 19, ) ), // Uses specific post IDs to display this metabox only on that page
    ) );

    //Creates grouping
    $group_field_id = $cmb->add_field( array(
        'id'      => 'qa_group',
        'type'    => 'group',
        'options' => array(
            'group_title'   => __( 'Question {#}', 'wds' ),
            'add_button'    => __( 'Add Another Question', 'wds' ),
            'remove_button' => __( 'Remove Question', 'wds' ),
            'sortable'      => true,
        ),
    ) );

    // Id's for group's fields only need to be unique for the group. Prefix is not needed.
    $cmb->add_group_field( $group_field_id, array(
            'name' => 'Question',
            'id'   => 'question',
            'type' => 'text',
    ) );

    $cmb->add_group_field( $group_field_id, array(
            'name' => 'Answer',
            'description' => '',
            'id'   => 'answer',
            'type' => 'textarea_small',
    ) );
}

Let’s break down this code snippet:

• We’re adding an ‘FAQ’ metabox to the ‘page’ post type with an ID of 19 (which corresponds with my own local FAQ page)
• ‘show_on’ adds the condition indicating when to display the metabox
• On line 19, we add a repeatable grouping. Following on line 31, this contains two additional fields – the question and coordinating answer.

Great! Now on the appropriate page, our new metabox will appear. One of the great things about this setup is that it easily allows questions to be added, rearranged and/or deleted.

Now let’s display that information.

<?php while ( have_posts() ) : the_post(); ?>

    <?php
        $qa_entries = get_post_meta( get_the_ID(), 'qa_group', true );
        $i = 1; //sets variable-counter
    ?>

    <ul class="questions">

        <?php foreach ( $qa_entries as $value) { ?>

            <li><a href="#q-<?php echo $i++;?>"><?php echo esc_html( $value['question'] ) ?></a></li>

        <?php } ?>

    </ul> <!--/.questions-->

        <?php
            $i = 1; //resets counter

        foreach ( $qa_entries as $value) { ?>

            <h4 id="q-<?php echo $i++;?>"><?php echo esc_html( $value['question'] ) ?></h4>
            <p><?php echo esc_html( $value['answer'] ) ?></p>

        <?php } ?>

<?php endwhile; // End of the loop. ?>

We retrieve the information by getting the post meta from qa_group. We set a variable counter ($i) to 1, which will allow us to match up our questions and answers in our links a little further down in our foreach loops. From there, we use one foreach loop to create a list of question links. We use the variable counter to link to unique IDs that coordinate with each question.

Then we reset our variable counter and create a second foreach loop to create a list of the answer content, this time using the variable as the ID that is being linked to in the top section.

Voilà! Here’s a screen cap of a basic example. When clicked, it will go to the coordinating section with the answer.Add this to your tool belt as one of the many things CMB2 can assist you in creating. Have any questions or clarifications? Let me know below.