Building a Page Template in WordPress – Part 4

In the first three articles in this series, we created a custom post type (FAQs). Then, we added our own custom fields and a custom taxonomy to that post type. Now, we’re ready display this new content type to our users. To do this, WordPress allows you to create your own custom page template. In this case, I’ll demonstrate by creating an FAQ page with a Wiki-style table of contents.

Creating The Basic Page Template Structure in WordPress

First things first, we need a fundamental template to work with. In your theme directory, create a new “page-templates” sub-directory if one does not already exist. Inside this sub-directory, create a template-faq.php file.

This code snippet essentially lays the groundwork for our FAQ page:

<?php
/**
 * Template Name: FAQ Template
 *
 * The template for the FAQ page.
 *
 * @package Hestia
 * @since Hestia 1.0
 */

get_header();

do_action('hestia_before_single_page_wrapper');

$table_of_contents = ''; // Initialize an empty string for the table of contents

?>

Here’s a breakdown of what’s happening:

• The Template Name comment informs WordPress that this is a custom template.
• get_header retrieves your website’s header content (logo, navigation, etc.).
• The hestia_before_single_page_wrapper action hook allows you to insert additional elements before the main content area (optional). Note, Hestia is the name of the theme I am currently using.
• We initialize an empty string variable, $table_of_contents, to store our table of contents data later.

Crafting a User-Friendly Table of Contents

Now we’ll construct a dynamic table of contents that automatically populates based on your existing FAQs. This significantly improves user experience by permitting visitors to navigate directly to specific questions that pique their interest.

Here’s the code responsible for building the table of contents outside the loop:

        <div class="faq-nav">
          <h2>Table of Contents</h2>
          <ul id="table-of-contents">
            <?php 
              // Build table of contents outside the loop
              $args = array(
                'post_type' => 'faq',
                'orderby' => array(
                  'meta_value_num' => 'ASC', // Order by numeric meta value (weight)
                ),
                'meta_key' => 'faq_weight',
              );

              $faq_query = new WP_Query($args);

              if ($faq_query->have_posts()) :
                while ($faq_query->have_posts()) :
                  $faq_query->the_post();
                  $title = get_the_title();
                  $id = str_replace(' ', '-', strtolower($title));

                  // Get weight (default to FAQ Page Template in WordPress] to 0 if empty)
                  $weight = get_post_meta(get_the_ID(), 'faq_weight', true);
                  $weight = !empty($weight) ? (int) $weight : 0; // Cast to integer

                  // Build the list item with link (use weight for sorting)
                  $table_of_contents .= '<li><a href="#' . esc_attr($id) . '">' . esc_html($title) . '</a></li>';

                endwhile;
                wp_reset_postdata(); // Reset post data to avoid conflicts
              endif;

              echo $table_of_contents; // Display the table of contents
            ?>
          </ul>
        </div>

Displaying FAQs with Style

Now that we have a dynamic table of contents in place, let’s focus on displaying the actual FAQs. Here’s the code snippet for querying and presenting the FAQs:

        <div class="faq-list">
          <?php
          $args = array(
            'post_type' => 'faq',
            'orderby' => array(
              'meta_value_num' => 'ASC', // Order by numeric meta value (weight)
            ),
            'meta_key' => 'faq_weight',
          );

          $faq_query = new WP_Query($args);

          if ($faq_query->have_posts()) :
            while ($faq_query->have_posts()) :
              $faq_query->the_post();

              $title = get_the_title();
              $id = str_replace(' ', '-', strtolower($title));
              $content = get_the_content();

              // Optional: Include a link if you have a custom field

              echo '<div class="faq-item" id="' . $id . '">';
              echo '<h3>' . $title . '</h3>';
              echo '<div class="faq-answer">' . $content . '</div>';

              // Optional link code (replace "your-link" with actual URL)
              /*
              $link_text = get_post_meta(get_the_ID(), 'faq_link_text', true);
              $link_url = get_post_meta(get_the_ID(), 'faq_link_url', true);

              if (!empty($link_text) && !empty($link_url)) {
                echo '<p><a href="' . esc_url($link_url) . '">' . esc_html($link_text) . '</a></p>';
              }
              */

              echo '</div>';

            endwhile;
            wp_reset_postdata();
          else :
            echo '<p>There are currently no FAQs available.</p>';
          endif;
          ?>
        </div>

Full Code Example of the Page Template in WordPress

<?php
/**
 * Template Name: FAQ Template
 *
 * The template for the FAQ page.
 *
 * @package Hestia
 * @since Hestia 1.0
 */

get_header();

do_action('hestia_before_single_page_wrapper');

$table_of_contents = ''; // Initialize an empty string for the table of contents

?>
<div class="<?php echo hestia_layout(); ?>">
  <?php
  $class_to_add = '';
  if (class_exists('WooCommerce', false) && !is_cart()) {
    $class_to_add = 'blog-post-wrapper';
  }
  ?>
  <div class="blog-post <?php echo esc_attr($class_to_add); ?>">
    <div class="container">
      <div class="col-md-8 page-content-wrap col-md-offset-2">

        <div class="faq-nav">
          <h2>Table of Contents</h2>
          <ul id="table-of-contents">
            <?php 
            // Build table of contents outside the loop
            $args = array(
              'post_type' => 'faq',
              'orderby' => array(
                'meta_value_num' => 'ASC', // Order by numeric meta value (weight)
              ),
              'meta_key' => 'faq_weight',
            );

            $faq_query = new WP_Query($args);

            if ($faq_query->have_posts()) :
              while ($faq_query->have_posts()) :
                $faq_query->the_post();
                $title = get_the_title();
                $id = str_replace(' ', '-', strtolower($title));

                // Get weight (default to 0 if empty)
                $weight = get_post_meta(get_the_ID(), 'faq_weight', true);
                $weight = !empty($weight) ? (int) $weight : 0; // Cast to integer

                // Build the list item with link (use weight for sorting)
                $table_of_contents .= '<li><a href="#' . esc_attr($id) . '">' . esc_html($title) . '</a></li>';

              endwhile;
            endif;

            echo $table_of_contents; // Display the built table of contents
            wp_reset_postdata(); // Reset post data
            ?>
          </ul>
        </div>

        <?php
        // Display FAQs with weight sorting
        $args = array(
          'post_type' => 'faq',
          'orderby' => array(
            'meta_value_num' => 'ASC', // Order by numeric meta value (weight)
          ),
          'meta_key' => 'faq_weight',
        );

        $faq_query = new WP_Query($args);

        if ($faq_query->have_posts()) :
          while ($faq_query->have_posts()) :
            $faq_query->the_post();
            $title = get_the_title();
            $id = str_replace(' ', '-', strtolower($title));

            echo '<h2 id="' . esc_attr($id) . '">' . esc_html($title) . '</h2>'; // Display the question (title)
            echo '<p>' . wp_kses_post(get_the_content()) . '</p>'; // Display the answer using get_the_content

            // Display the link (custom field - optional)
            $link = get_post_meta(get_the_ID(), 'faq_link', true);
            if ($link) {
              echo '<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
                      <div class="wp-block-button">
                        <a class="wp-block-button__link wp-element-button" href="' . esc_url($link) . '">Read more…</a>
                      </div>
                    </div>';
            }

          endwhile;
        else :
          echo '<p>No FAQs found.</p>';
        endif;

        wp_reset_postdata(); // Reset post data
        ?>

      </div>
    </div>
  </div>
</div>

<?php get_footer(); ?>

Benefits of the WordPress Page Template

By creating a custom FAQ page template, you’ve achieved several things:

• Enhanced User Experience: Visitors can easily navigate to specific questions through the dynamic table of contents, saving them time and frustration.
• Improved Organization: FAQs are displayed in a clear and structured format, making them easy to read and understand.
• Flexibility and Customization: You have complete control over the design and layout of your FAQ page.

Beyond the Basics

This guide has provided a solid foundation for building a custom FAQ page template in WordPress. However, there’s always room for further customization. Here are some additional ideas I’ve considered:

• Accordion Style: Utilize JavaScript to create an accordion-style FAQ section where users can click to expand and collapse individual questions.
• Search Functionality: Integrate a search bar to allow users to quickly find specific questions within your FAQs.
• Category System: We created a category system for better organization. We can use it here to help organize similar questions together.

Remember, the key is to prioritize user experience and make your FAQ page as helpful and informative as possible.

Conclusion: Custom Page Template in WordPress

Building a custom FAQ page template in WordPress is a rewarding process that empowers you to create a user-friendly and informative experience for your website visitors. By following these steps and exploring further customization options, you can craft an FAQ page that stands out and leaves a lasting impression.