on Tutorials

A How To Guide On Building Custom FAQ Section For Your Plugin

0 comments
Improve WordPress speed
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon

The sole purpose of creating a plugin is to render a stunning user experience. Although a majority of plugins available today come with an easy installation process, there are times when using a particular plugin can turn to be a challenging job. It is here that the role of well-defined documentations and FAQ sections comes into play.

WordPress Plugin Custom FAQ Section

What is being covered in this tutorial?

This tutorial walks you through a detailed process of adding a custom FAQ section into a WordPress plugin. Here, I’ll be using some admin pages which are coupled with jQuery UI for creating a stunning Q&A section/FAQ section which is searchable instantly via the input box with minimum loading time.

Understanding the WordPress plugin architecture

WordPress Plugin Custom FAQ Section

For this tutorial, I’ll be using a plugin which works as the best match for creating a top-level navigation menu. For this plugin, you can create a sub-menu item under the settings menu and the admin page can have the tabbed interface along with the FAQ section. However, in case you don’t have a plugin, you can create a folder in wp-content/plugins directory and copy paste the below code snippet into the file called my-plugin.php:

<?php
/*
Plugin Name: Custom Plugin
plugin URI: http://customplugindomain.com
Description: This is a handy plugin with a built-in FAQ.
Version: 1.0
License: GPL3
*/

add_action('admin_enqueue_scripts','script_files');

function script_files($hook)
{
	wp_enqueue_style('cs-plugin-style', plugin_dir_url( __FILE__ ) . 'faq.css' );
	wp_enqueue_script('cs-plugin-script', plugin_dir_url( __FILE__ ) . 'faq.js', array( 'jquery' ), '1.0.0', true );
}

add_action('admin_menu','plugin_in_admin');

function plugin_in_admin()
{
	add_menu_page('My Plugin', 'My Plugin', 'manage_options', 'my-plugin.php', 'customplugin_admin_page', 'dashicons-tickets', 6 );
	add_submenu_page('my-plugin.php', 'My Plugin FAQ', 'FAQ', 'manage_options', 'my-plugin-faq.php', 'customplugin_admin_faq' );
}

function customplugin_admin_page()
{
	echo '<div class="wrap"><h2>Plugin Main Section</h2></div>';
}

function customplugin_admin_faq()
{
	include('faq.php');
}

If you activate your plugin you should see a top level menu with a FAQ entry underneath. Don’t forget to create faq.php in your plugin folder. This file is pulled in as the content of the FAQ page. In the next tutorial, we will expand this to pull the FAQ entries from the API.

Create HTML for the custom FAQ section

Open the faq.php file and you can use it for creating HTML which will display all the questions and answers. The code associated with the same is shown below:

<div class="wrap">
    <h2>Frequently Asked Questions</h2>
    <form id="mpf-search">
        <input id="mpf-input" type="text" placeholder="start typing to search...">
    </form>
    <div id="mpf-container">
        <div class="mpf-faq-item">
            <h3 class="question">Question</h3>
            <div class="answer">Answer</div>
        </div>
        <div class="mpf-faq-item">
            <h3 class="question">Question</h3>
            <div class="answer">Answer</div>
        </div>
    </div>
</div>

In the above code, you can see a search box along with some HTML for questions and answers has been created.

Style the custom FAQ section

Here, you need to add your own stylesheet. If you’re using WordPress, then you can opt for adding a new stylesheet by simply enqueueing the CSS file and ensuring that the same is applied to just the admin pages under focus. The code associated with the same is shown below:

add_action( 'admin_enqueue_scripts', 'custom_plugin_assets' );

function custom_plugin_assets( $hook )
{
	wp_enqueue_style( 'cs-plugin-style', plugin_dir_url( __FILE__ ) . 'faq.css' );
}

Here, you need to note that all the styles and scripts which have been used in the back-end should be added using a function hooked to the admin_enqueue_scripts.

Now, create faq.css file and use the below code snippet:

#mpf-container {
	max-width: 800px;
}

.mpf-faq-item {
	background: #fff;
	border-radius: 3px;
	margin-bottom: 10px;
	padding: 21px;
}

.mpf-faq-item h3 {
	margin: 0px;
	line-height: 31px;
}

.mpf-faq-item .answer p{
	font-size: 14px;
	line-height: 25px;
}

#mpf-search {
    margin-bottom: 10px;
}

Adding JavaScript to make the searching better

You need to enqueue the Javascript by adding a wp_enqueue_scripts() call into the existing custom_plugin_assets() function as shown below:

add_action( 'admin_enqueue_scripts', 'custom_plugin_assets' );

function custom_plugin_assets( $hook )
{
	wp_enqueue_style('cs-plugin-style', plugin_dir_url( __FILE__ ) . 'faq.css' );
	wp_enqueue_script('cs-plugin-script', plugin_dir_url( __FILE__ ) . 'faq.js', array( 'jquery' ), '1.0.0', true );
}

In the above code, the last parameter is used for forcing the file to get loaded in the website’s footer which is the proper way of including JavaScript.

Add keywords to the custom FAQ section

You can improve the search functionality of your custom FAQ section by equipping the same with keywords, users find handy in looking out for answers to their queries. Here, you can simply add a data attribute to the element containing a specific set of key phrases. Here is the code snippet associated with the same:

<div class='mpf-faq-item' data-keywords='reasons'>
    <h3 class='question'>Why Choose WordPress?</h3>
    <div class='answer'>Just because ...</div>
</div>

<div class='mpf-faq-item' data-keywords='best'>
    <h3 class='question'>Best plugin in the world?</h3>
    <div class='answer'>Of course it is ...</div>
</div>

You can simply grab the keywords using var keywords= $this.data(‘keywords’) and opt for adding keywords.index0f( term )= -1 to the if clause. The entire JS Code for the same is displayed below and should be in your faq.js file:

(function($) {
    $(document).on( 'keyup', '#mpf-input', function(){
        var query = $(this).val().toLowerCase();
        console.log(query);
        var faqs = $('.mpf-faq-item');

        $.each( faqs, function() {
            var $el = $(this);
            var title = $el.find('.question').html().toLowerCase();
            var keywords = $el.data('keywords');

            if( keywords.indexOf( query ) == -1 && title.indexOf( query ) == -1 ) {
                $el.hide();
            } else {
                $el.show();
            }
        })
    });
})(jQuery);

Wrapping up

Custom FAQ section acts as a dash of help for your plugin users. Here’s hoping the above tutorial would have allowed you to dig deeper into creating a usable FAQ system that will make your plugin users more happier and contented.

In the next tutorial, we will cover how to pull your FAQ entries from external API, so you can change them and add them…

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon



Comments are closed.