Wordpress plugin: Working with REST api - rest

Question

Before I start, I want to tell you guys that I have no experience in anything Wordpress related. I do have worked in PHP and Codeigniter before.
User Case
The user enters a preferred feature in a form (Air conditioning, etc.).
When the user submits the form, the feature will be send to a REST API.
The results of the REST API ( a list of cars with AC ) will be shown on the page.
It should roughly look something like this.
What i have so far
An empty plugin that is shown in the Wordpress admin panel.
Question(s)
How do create the front-end for this plugin?
How and where do I create the form action?
How do I access the form action?
What I have/know so far
I know there are some action hooks that will place your content in the header and footer by creating something like:
<php add_action('wp_footer', 'mp_footer'); ?>

Answer 1

In your empty plugins php file place this:
function get_search_results(){
$args = array( 's' => $_GET['term'] );
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
echo '<li>'.get_the_title().'</li>';
}
} else {
echo "Nothing Found";
}
die();
}
add_action( 'wp_ajax_get_search', 'get_search_results' );
add_action( 'wp_ajax_nopriv_get_search', 'get_search_results' );
function get_searchbox( $atts ){
ob_start(); ?>
<form id="searchform">
<input type="text" id="searchbox">
<button type="submit">Search</button>
</form>
<ul id="search-result"></ul>
<?php
$output = ob_get_clean();
return $output;
}
add_shortcode( 'searchbox', 'get_searchbox' );
function add_search_script() {
wp_enqueue_script( 'search', plugins_url( '/search.js' , __FILE__ ), array( 'jquery' ) );
wp_localize_script( 'search', 'search_ajax', array( 'url'=>admin_url( 'admin-ajax.php' ), 'action'=>'get_search' ) );
}
add_action( 'wp_enqueue_scripts', 'add_search_script' );
In your plugin's directory create a new javascript file - search.js and place this:
jQuery(function($){
$('#searchform').submit(function(e){
e.preventDefault();
$.ajax({
url: search_ajax.url,
data: { 'action': search_ajax.action, 'term': $('#searchbox').val() }
}).done(function(r) {
$('#search-result').html(r);
});
});
});
Now you can use shortcode [searchbox] in your wordpress page to get your searchbox.
In php you can get same result with <? echo do_shortcode('[searchbox]') ?>
Explanation:
When we add [searchbox] shortcode, it is processed and replaced with a form via get_searchbox() function.
In jQuery code On form submit we are sending an action : get_search (defined in wp_localize_script).
Server receives that request via wp_ajax_get_search and processes get_search_results() and returns an output.
In jQuery done(function(r){ r is the response from server. Use that data to manipulate your html.
action is the essential part of REST api in wordpress. We need not have a url. Instead we define an action and for that action return a response.
Once you understand this, modify the action and response according to your need.
Helpful articles: Daniel's, wpmudev