tailwind-wordpress-template/searchform.php at main · xowei/tailwind-wordpress-template · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?php

/**
 * Search form template file.
 *
 * Defines the markup and controls for the reusable site search form.
 *
 * @package tailwind_wordpress_template
 * @since 1.0.0
 */

if (!defined('ABSPATH')) {
  exit;
}
?>

<form
  role="search"
  method="get"
  class="search-form flex items-stretch"
  action="<?php echo esc_url(home_url('/')); ?>"
>
  <label
    class="sr-only"
    for="search-field"
  ><?php echo __('Search'); ?></label>

  <input
    type="search"
    id="search-field"
    class="search-field transition-all duration-300 px-4 py-2 bg-white text-gray-900 placeholder-gray-500 border border-gray-300 focus:outline-none hover:border-gray-400 hover:ring-gray-400  w-full"
    placeholder="<?php echo __('Enter search keywords...', 'tailwind_wordpress_template'); ?>"
    value="<?php echo get_search_query(); ?>"
    name="s"
    required
  />

  <button
    type="submit"
    class="search-submit flex items-center justify-center px-6 py-2 bg-primary-600 text-white hover:bg-primary-700 transition-colors duration-200"
    aria-label="<?php echo __('Search'); ?>"
  >
    <?php render_icon('icon-search'); ?>
  </button>
</form>