WordPress plugin: Working with REST api

3 Views

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

Read More
  • 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.
Wireframe

What i have so far
An empty plugin that is shown in the WordPress admin panel.
Plugin

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'); ?>
Post Views: 3

Related posts

1 comment

  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:

    1. When we add [searchbox] shortcode, it is processed and replaced with a form via get_searchbox() function.
    2. In jQuery code On form submit we are sending an action : get_search (defined in wp_localize_script).
    3. Server receives that request via wp_ajax_get_search and processes get_search_results() and returns an output.
    4. 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

Comments are closed.