Floating Sticky Search Form Icon Button

I am adding the search icon at bottom right area of the WordPress site and opening/or displaying the search form after clicking on the search icon button (see the above the image). I am sharing the full instruction here.

Search Form PHP File

Creates a search form PHP file “toggle-search-form.php” and save into your theme’s folder. Here is the full code of the file:

<?php
/**
 * Search Form
 */
?>

<div class="search-form-wrap form-close">
	<div class="toggle-search-form">
		<h3>
			Search Tutorials
		</h3>
		<form class="search-form" itemprop="potentialAction" itemscope="" itemtype="https://schema.org/SearchAction" method="get" action="<?php echo get_bloginfo('site_url'); ?>/" role="search">
			<label class="search-form-label screen-reader-text" for="searchform-1">Search this website</label>
			<input class="search-form-input" type="search" itemprop="query-input" name="s" id="searchform-1" placeholder="Type here...">
			<input class="search-form-submit" type="submit" value="Search">
			<meta itemprop="target" content="<?php echo get_bloginfo('site_url'); ?>/?s={s}">
		</form>
	</div>
	<div class="toggle-search-btn">
		<span class="dashicons dashicons-search"></span>
	</div>
</div>

Loading Dashicons CSS

Open the functions.php file of your theme and drop this small PHP at end of the file. I am using the WordPress inbuilt Dashicons for search icon and close button.

add_action( 'wp_enqueue_scripts', 'paulc_load_dashicons' );
function paulc_load_dashicons() {
	wp_enqueue_style( 'dashicons' );
}