Hello guys! Today we are going to create a WordPress Ajax search without a plugin. I’ll also recommend the best free and paid WordPress Ajax search plugins.
First, we need to create an HTML search box [input field] so users can search. Put it anywhere on the page template—index.php, archive.php, page.php, or anywhere you want to show the search box.
Add the below code where you want to display an Ajax search box on the page.
<div class="search_box">
<form action="/" method="get" autocomplete="off">
<input type="text" name="s" placeholder="Search Code..." id="keyword" class="input_search" onkeyup="fetch()">
<button>
Search
</button>
</form>
<div class="search_result" id="datafetch">
<ul>
<li>Please wait...</li>
</ul>
</div>
</div>```
Add the below code inside the function.php file, which is located at “wp-content/your-theme/function.php“.
```php
<?php
/*
==================
Simple Ajax Search
======================
*/
// add the ajax fetch js
add_action( 'wp_footer', 'fetch_ajax' );
function fetch_ajax() {
?>
<script type="text/javascript">
function fetch(){
jQuery.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'post',
data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
success: function(data) {
jQuery('#datafetch').html( data );
}
});
}
</script>
<?php
}
// the ajax function
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){
$the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('page','news') ) );
if( $the_query->have_posts() ) :?>
<ul>
<?php while( $the_query->have_posts() ): $the_query->the_post(); ?>
<li><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></li>
<?php endwhile; ?>
</ul>
<?php wp_reset_postdata();
endif;
die();
}
How to add simple search form in WordPress without plugin?
- Open the theme file where you want to display the search form. This is mostly in the header.php or sidebar.php file.
- Add the below code to the file where you want to display the search form:
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label for="search-field">Search</label>
<input type="search" id="search-field" name="s" value="<?php echo get_search_query(); ?>">
<input type="submit" value="Search">
</form>
- Save the file and refresh the page to see the custom search form.
Top comments (0)