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!

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