Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Empty plugin with a search field for WP REST API tut
* Plugin Name: SZ WP REST API Tutorial
* Description: It's an example of WP REST API usage for search with autocomplete with vanilla JS
* Plugin URI:
* Author: Sabrina Zeidan
* Author URI:
* License: GNU General Public License v2 or later
* License URI:
defined( 'ABSPATH' ) or die();
class SZ_WP_REST_API_Tut {
function __construct() {
add_action( 'admin_menu', array( $this, 'admin_menu' ) ); //Add an item to the Tools menu
add_filter('plugin_action_links_' . plugin_basename(__FILE__), array( $this, 'plugin_actions_links' ) ); //Add a link on Plugins page
public function admin_menu() {
$hook = add_management_page( 'SZ WP REST API', 'SZ WP REST API', 'manage_options', 'sz-search', array( $this, 'admin_page_content' ), '' ); //Add a page to the Tools menu
add_action( "load-$hook", array( $this, 'admin_page_load' ) );//hook to load stuff on that page
function plugin_actions_links( array $actions ) {
return array_merge( array(
'sz-search' => sprintf('<a href="%s">%s</a>', esc_url( admin_url( 'tools.php?page=sz-search' ) ),esc_html__( 'See it', '' ))), $actions );
function admin_page_load() {
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); // Load needed JavaScript and CSS
function enqueue_scripts() {
function admin_page_content() {
echo '<div class="wrap">';
echo '<h1>' . esc_html_x( 'SZ WP REST API Search with autocomplete with Vanilla JavaScript', 'admin page title', 'sz-wp-rest-api-search' ) . '</h1>';
echo '<p>This is a search field intended to demostrate a result of WP REST API. Does it work? :)</br>';
echo '<p><input type="text" size="80" id="sz-search-field" name="sz-search-field" value="" placeholder="Start typing the title of the post...">';//Our search field
echo '<br><input type="hidden" size="80" id="sz_result_id" name="sz_result_id" value="">';//Hidden field to pass post ID
echo '<br><input type="hidden" size="80" id="sz_result_permalink" name="sz_result_permalink" value="">';//Hidden field to pass post permalink
echo '</div>';
new SZ_WP_REST_API_Tut(); //Let's do it!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment