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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?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.
|
1 2 3 4 |
add_action( 'wp_enqueue_scripts', 'paulc_load_dashicons' ); function paulc_load_dashicons() { wp_enqueue_style( 'dashicons' ); } |
The rest of the content is available for Pro members. Click on the PAY NOW button to enable access to this content.
$5.00Pay Now
* Payment is non-refundable.
Paid members will be able to login below to see the restricted content.
Reviews
There are no reviews yet.