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.
Table of Contents
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
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:
[code lang=”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’);
}
[/code]
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:
[code lang=”html”]
<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>
[/code]
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:
[code lang=”php”]
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’ );
}
[/code]
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:
[code lang=”css”]
#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;
}
[/code]
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:
[code lang=”php”]
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 );
}
[/code]
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:
[code lang=”html”]
<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>
[/code]
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:
[code lang=”js”]
(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);
[/code]
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…