Adding Ajax Search Box at Astra Header Search form

Ajax Search Box

You can easily add the toggle search form at Astra theme header. Theme have inbuilt option in customizer about it. Search icon is appearing at right side of the header menu. I shall add the Ajax logic in this inbuilt search form and it will fetch the search result based on search key without the page refresh. I am sharing the full steps at below:

Minimum Requirements:

  1. Astra Theme
  2. Astra Child Theme (you can use your built-in astra child theme)

Enabling The Search Icon At Header

  • Login to Dashboard
  • Navigate to Appearance -> Customize link
  • Click on Layout -> Header -> Primary Header
  • Select “Search” option from Last Item In Menu drop down list
  • Click on Publish button
  • Close the customizer now
  • Go to home page and you will see the search icon at right side of header menu

Now we shall implement the wp_ajax_ action into this existing search form.

Creating Ajax Nonce

For security purposes we need a ajax nonce. We shall add this nonce as a hidden input field into Astra search form. Without edit the core files of Astra theme, you can do it. There have a filter astra_get_search for search form HTML markup. You can easily alter the existing search form HTML with custom HTML markup.

Open the functions.php of your Astra child theme and add this PHP snippets:

function wpbb_ajak_search( $search_html, $option ) {
	if( empty( $option ) )
		return $search_html;
	if( "search" !== astra_get_option( $option ) && "header-main-rt-section" !== $option )
		return $search_html;
	$nonce = wp_create_nonce( "ajax-search-nonce" );
	$nonce_input = sprintf('<input type="hidden" name="ajax_search_nonce" class="ajax-search-nonce" value="%s" />', $nonce );
	$search_html = str_replace( '</form>', $nonce_input . "\n</form>", $search_html );
	return $search_html;
add_filter( 'astra_get_search', 'wpbb_ajak_search', 10, 2 );

wp_create_nonce function is creating a security nonce. I used the str_replace PHP function and added the nonce hidden input field before the </form> HTML markup.

Rest of the contents are only available to members. You must subscribe the MEMBERSHIP plan. You already subscribe the plan? Login at below.



  1. Rob on May 27, 2019 at 7:28 am


    I insert the snippet in the function.php and add a search function as the last item. But I didnt see populating results while typing. Can you kindly advise? Thank you.

Leave a Comment

You must be logged in to post a comment.


Get free weekly PRO Beaver Builder Tutorials