In-Plugin FAQ

enqueue-script.php

add_action( 'admin_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets( $hook ) {
	if( 'my-plugin_page_myplugin/myplugin-admin-faq' != $hook ) {
		return;
	}

    wp_enqueue_style( 'my-plugin-faq', plugin_dir_url( __FILE__ ) . 'faq.css' );
    wp_enqueue_script( 'my-plugin-faq', plugin_dir_url( __FILE__ ) . 'faq.js', array( 'jquery' ), '1.0', true );
}

enqueue-style.php

add_action( 'admin_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets( $hook ) {
	if( 'my-plugin_page_myplugin/myplugin-admin-faq' != $hook ) {
		return;
	}

    wp_enqueue_style( 'my-plugin-faq', plugin_dir_url( __FILE__ ) . 'faq.css' );
}

faq-search.css

#mpf-search {
	margin:22px 0 22px 0;
	box-sizing:border-box;
	width:600px;
	padding:22px;
	background:#555;
	border-radius:5px;
}

#mpf-search input {
	width:100%;
	border-radius:5px;
	border:0px;	
	padding:6px 11px;
	font-size:18px;
}

faq-structure.php

<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>
		/* As many mpf-faq-item class elements as needed */
	</div>
</div>

faq.css

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

.mpf-faq-item {
	background: #fff;
	border-radius:5px;
	margin-bottom:22px;
	padding:22px;
}

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

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

full-faq.php

<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'>What is WordPress?</h3>
			<div class='answer'>
				<p>
				WordPress is open source web software that you can install on your web server to create your website, blog, community or network. WordPress started out as a tool for blogging, but has evolved into a full-fledged Content Management System (CMS), capable of powering websites, networks and communities.
				</p>
			</div>
		</div>
		<div class='mpf-faq-item'>
			<h3 class='question'>Why Choose WordPress?</h3>
			<div class='answer'>
				<p>
				One of the principal advantages of WordPress is that you are in control. Unlike remote-hosted scripts such as Blogger and LiveJournal, you host WordPress on your own server. Installation is very simple, as is the configuration. Unlike other software programs, there are not a million files to chmod nor are there dozens of templates to edit just to get your site set up and looking the way you want.
				</p>
				<p>
				Also, Blog pages in WordPress are generated on the fly whenever a page is requested, so you do not have multiple archive pages clogging up your web space. Waiting for pages to rebuild is a thing of the past because template changes are made in scant seconds.
				</p>
				<p>
				WordPress is built following W3C standards for XHTML and CSS, ensuring that your site is more easily rendered across standards-compliant browsers. Other browsers are supported with a few hacks; it’s a reality of the web that hacks are necessary.
				</p>
				<p>
				Aggregator support is built-in with a number of standard RSS configurations already done for you, as well as Atom. Following standards makes your WordPress site easier to manage, increases its longevity for future Internet technology adoption, and helps give your site the widest audience possible.
				</p>
			</div>
		</div>
		<div class='mpf-faq-item'>
			<h3 class='question'>What are WordPress features?</h3>
			<div class='answer'>
				<p>
				WordPress has an extensive list of features and, as it is constantly evolving, this list of features is constantly growing. Check out the up-to-date list of features.
				</p>
			</div>
		</div>
		<div class='mpf-faq-item'>
			<h3 class='question'>When was WordPress first released?</h3>
			<div class='answer'>
				<p>
				WordPress started out life as a fork of b2/cafelog by Matt Mullenweg and Mike Little. The first version was released in 2003
				</p>
			</div>
		</div>
		<div class='mpf-faq-item'>
			<h3 class='question'>How is WordPress licensed?</h3>
			<div class='answer'>
				<p>
				WordPress is licensed under the GNU General Public License (GPL).
				</p>
			</div>
		</div>
		<div class='mpf-faq-item'>
			<h3 class='question'>What is the GPL?</h3>
			<div class='answer'>
				<p>
				The GPL is an open source license. This means you are free to modify and redistribute the source code under certain conditions. You can read more about why we chose the GPL on the License Page.
				</p>
			</div>
		</div>
		<div class='mpf-faq-item'>
			<h3 class='question'>What’s the difference between WordPress.org and WordPress.com?</h3>
			<div class='answer'>
				<p>
				WordPress.com is a blog network run by Automattic. It uses WordPress software, but individual blogs are hosted and managed by WordPress.com. This is a free service with premium addons and upgrades.
				</p>
				<p>
				Here at WordPress.org, you can download WordPress, the web software that WordPress.com runs on. Once you’ve downloaded it, you can upload it to a web server and run your own WordPress website.
				</p>
				<p>
				There is useful information about this distinction on the WordPress.com website.
				</p>
			</div>
		</div>
		<div class='mpf-faq-item'>
			<h3 class='question'>Can I transfer my blog from WordPress.com to a self-hosted WordPress installation?</h3>
			<div class='answer'>
				<p>
				Yes, it is possible to move from WordPress.com to a self-hosted installation. This guide from Problogger will help you through the steps.
				</p>
			</div>
		</div>
		<div class='mpf-faq-item'>
			<h3 class='question'>How Is WordPress related to other blogging applications?</h3>
			<div class='answer'>
				<p>
				WordPress was primarily inspired by Noah Greys Greymatter open-source web log and journal software. It is related to b2, sort of a second cousin twice removed. You can use WordPress to post your own stories, ideas, rants, reviews, links, and pictures of your toothless Uncle Ernie at the wedding reception, if you choose. In addition, you can customize the look and feel of your site. Numerous themes are available and may be modified in many different ways. Through the use of WordPress Themes, you can quickly change the look and style of your site. You can also extend WordPress' functionality through the use of Plugins. Plugins let you create the website or blog that suits your needs. As you can see, its functionality exceeds or at least is similar to what is available in most blogging tools today.
				</p>
			</div>
		</div>
		<div class='mpf-faq-item'>
			<h3 class='question'>Can I transfer my blog or website from other services to a self-hosted WordPress installation?</h3>
			<div class='answer'>
				<p>
				You can transfer any blog or website from any service you wish. We have a list of guides which will help you to transfer from your specific platform.
				</p>
			</div>
		</div>
		<div class='mpf-faq-item'>
			<h3 class='question'>Do I need to know PHP to use WordPress?</h3>
			<div class='answer'>
				<p>
				No. You should be able to use WordPress through the user interface, without ever having to touch PHP.
				</p>
				<p>
				The only time you would modify your WordPress website with PHP would be when integrating some of the plugins. There are a small number of plugins that still require manual edits to your files. In most cases, clear instructions are usually given within a text file with the plugin.
				</p>
				<p>
				Other than that, you would not be changing any of the PHP files.
				</p>
				<p>
				For advanced information check out Know Your Sources
				</p>
			</div>
		</div>
		<div class='mpf-faq-item'>
			<h3 class='question'>I don't know what all the WordPress terms mean: where can I get help?</h3>
			<div class='answer'>
				<p>
				The WordPress Codex has a Glossary where you can find definitions of many of the key phrases associated with WordPress.
				</p>
			</div>
		</div>

	</div>

</div>

keywords.html

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

keywords.js

(function($) {
	$(document).on( 'keyup', '#mpf-input', function(){
		var query = $(this).val().toLowerCase();
		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 );

search.js

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

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

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

		})
	});
})( jQuery );

starter.php

<?php
/*
Plugin Name: My Plugin
plugin URI: http://myplugindomain.com
Description: This is a nifty plugin with a built-in FAQ.
version: 1.0
Author: Daniel Pataki
Author URI: http://danielpataki.com
License: GPL2
*/
add_action( 'admin_menu', 'my_admin_menu' );

function my_admin_menu() {
	add_menu_page( 'My Plugin', 'My Plugin', 'manage_options', 'myplugin/myplugin-admin-page.php', 'myplguin_admin_page', 'dashicons-tickets', 6  );
	add_submenu_page( 'myplugin/myplugin-admin-page.php', 'My Plugin FAQ', 'FAQ', 'manage_options', 'myplugin/myplugin-admin-faq.php', 'myplguin_admin_faq' ); 
}

function myplguin_admin_page() {
	echo '<div class="wrap"><h2>This Is The Main Admin Page</h2></div>';
}

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