Ajax call from Theme to Plugin in wordpress

Ajax call from Theme to Plugin in wordpress.

Today i am describing the Ajax call process from theme to plugin in wordpres CMS.
In this plugin functionality search data from frontend with ajax call and show results in Popup box and for popup i am using the Thickbox JS.

Lets start first create Plugin :

1. Create folder in wordpress plugins directory. Path of the directory as /wp-content/plugins/your-plugin-name for example /wp-content/plugins/franchise-map.

2. Create franchise-map.php file in current created folder. 'admin_menu' hook is used add the your plugin menu link into wordpress Admin sidebarand the code of file as:

<?php

// ADMIN MENU HOOK
add_action( 'admin_menu', 'franchise_map_admin_menu' );

// FUNCTION ADMIN MENU
function franchise_map_admin_menu() {
add_menu_page( 'Franchise Map', 'Franchise Map', 'manage_options', 'franchise-map', 'franchise_map_admin_page', 'dashicons-tickets', 6  );
}

// FUNCTION FRANCHISE CONTENT
function franchise_map_admin_page()
{
require_once(plugin_dir_path( __FILE__ ).'/template-home.php');
}

?>

3. In this step add custom search box with help of plugin on front-end under navigation.'wp_nav_menu_items' hook is used to add the html content into navigation position on frontend theme. The function add_franchise_search_form_to_menu() used to create the custom search box design, you can design it according to your requirements and changes its id/classes accordingly. The code for this will in plugin file as:

<?php
// FILTER WP NAV
add_filter('wp_nav_menu_items', 'add_franchise_search_form_to_menu', 50, 2);

// ADD SEARCH BOX IN NAV FUNCTION
function add_franchise_search_form_to_menu($items, $args) {
 $items .= '<li class="my-nav-menu-search">';
 $items .= '<div id="franchise-form">';
 $items .= '<input type="text" name="franchise-search" id="franchise-search" placeholder="Enter text" style="width:200px;height:30px;margin:0px;"  required />';
 $items .= '<a class="thickbox" id="thickbox_fs" href="#TB_inline?width=800&height=550&inlineId=my-content-id" style="float:right;display:block;"><input type="button" name="franchise-submit" id="franchise-submit" Value="Search" class="button" style="width:80px;height:36px;margin-top:0px;margin-bottom:0px; color:#fff;font-size:13px;text-align:center;margin-right:30px;background-color:#253993;line-height:0px;"  /></a>';
 $items .= '</li>';
  return $items;
}

?>

4.  After that add popup box functionality in frontend using plugin. In this above custom search box id's is used to get data using jQuery. 'get_footer' hook is help us to add jQuery content in footer of your theme. 'add_thickbox' is used to include the default ThickBox js and css files into our code.The code below for reference as:

<?php
// LIGHTBOX CALL FUNCTION IN HEADER
add_action('get_footer','franchise_add_lightbox_content');

// LIGHTBOX CONTENT
function franchise_add_lightbox_content()
{
// add thickbox content
add_thickbox();
?>
<p>Loading..</p>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#thickbox_fs").bind("click", function() {
var stext = jQuery('#franchise-search').val();
jQuery.ajax({
 type:'POST',
 data:{stext:stext},
 url: "<?php echo plugins_url( 'template-search-results.php', __FILE__ ) ?>",
 success: function(value) {
jQuery('#TB_ajaxContent').html(value);
 }
});
});
});
</script>
<?php } ?>

Note: template-search-results.php is plugin file which will retrieve the search data from front-end custom search box and your further calculations goes here.
This is the file called via ajax and here you can code as per your need. Below file code is only for reference purpose.

<?php
require_once('../../../wp-load.php' );
global $wpdb;

if($_POST){
if(isset($_POST['stext'])){
$table_name2 = $wpdb->prefix . "_fr_county";
$table_name1 = $wpdb->prefix . "_fr_franchise";

$data1 = $wpdb->get_var($wpdb->prepare("SELECT county_code FROM ".$table_name2." WHERE zip=%d", $_POST['stext']));

$results = $wpdb->get_results($wpdb->prepare("SELECT * FROM ".$table_name1." WHERE county_codes LIKE '%s' ORDER BY franchise_name ASC",'%'.$data1.'%'));
echo "Results ".count($results);
echo "<table><tr><th>Franchise Name</th><th>Phone</th><th>Website</th><th>Email</th></tr>";

foreach($results as $res){
echo "<tr>";
echo "<td>".$res->franchise_name."</td>";
echo "<td>".$res->phone."</td>";
echo "<td>".$res->website."</td>";
echo "<td>".$res->email."</td>";
echo "</tr>";
}
echo "</table>";
}
}
?>