Implementing the `get_search_form()` Function

Ensure that the `get_search_form()` function is used in your theme’s template files where you want the search form to appear. If you were directly including the HTML before, replace it with ``.

Step 2: Styling the Custom Search Form

With the basic HTML structure in place, you can now customize the appearance of the search form using CSS.

Locating the Theme’s Stylesheet

Find your theme’s primary stylesheet, usually named `style.css`. It is located in your theme’s root directory.

Adding CSS Rules

Add CSS rules to your stylesheet to style the elements within the search form. For example:

“`css
.search-form {
display: flex;
align-items: center;
border: 1px solid #ccc;
padding: 5px;
}

.search-field {
flex-grow: 1;
padding: 8px;
border: none;
outline: none;
}

.search-submit {
background-color: #4CAF50;
color: white;
padding: 8px 12px;
border: none;
cursor: pointer;
}

.search-submit:hover {
background-color: #3e8e41;
}
“`

Explanation of the CSS

* `.search-form`: Styles the entire form container. The `display: flex` and `align-items: center` properties help align the input field and submit button horizontally.
* `.search-field`: Styles the search input field. The `flex-grow: 1` property allows the input field to expand and fill the available space.
* `.search-submit`: Styles the submit button. The `background-color`, `color`, and `padding` properties control the button’s appearance. The `cursor: pointer` property changes the cursor to a pointer when hovering over the button.
* `.search-submit:hover`: Styles the submit button when the user hovers over it, providing visual feedback.

Feel free to adjust these styles to match your website’s design.

Step 3: Adding Advanced Features to the Search Form

Enhance the search form’s functionality with advanced features like search suggestions and category filtering.

Search Suggestions (Autocomplete)

Implementing search suggestions can significantly improve the user experience by providing real-time suggestions as the user types.

Using JavaScript and AJAX

This approach involves using JavaScript to listen for changes in the input field, sending AJAX requests to the server to fetch suggestions, and displaying the suggestions in a dropdown.

* **Enqueue a JavaScript file:** Create a JavaScript file (e.g., `custom-search.js`) in your theme’s directory and enqueue it in your theme’s `functions.php` file:

“`php
function my_theme_enqueue_scripts() {
wp_enqueue_script( ‘custom-search’, get_template_directory_uri() . ‘/custom-search.js’, array( ‘jquery’ ), ‘1.0’, true );
wp_localize_script( ‘custom-search’, ‘ajax_object’,
array( ‘ajax_url’ => admin_url( ‘admin-ajax.php’ ) ) );
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_scripts’ );
“`

This code enqueues the JavaScript file and passes the AJAX URL to the script.

* **Implement the JavaScript code:** Add the following code to your `custom-search.js` file:

“`javascript
jQuery(document).ready(function($) {
$(‘#search-field’).keyup(function() {
var searchTerm = $(this).val();

$.ajax({
url: ajax_object.ajax_url,
type: ‘POST’,
data: {
action: ‘get_search_suggestions’,
term: searchTerm
},
success: function(response) {
$(‘#search-suggestions’).html(response);
$(‘#search-suggestions’).show();
}
});
});

$(document).on(‘click’, function(event) {
if (!$(event.target).closest(‘#search-form’).length) {
$(‘#search-suggestions’).hide();
}
});
});
“`

This code listens for keyup events in the search input field, sends an AJAX request to the `get_search_suggestions` action, and displays the suggestions in a `div` with the ID `search-suggestions`. It also hides the suggestions when clicking outside the search form.

* **Create an AJAX handler function:** Add the following code to your theme’s `functions.php` file:

“`php
add_action( ‘wp_ajax_get_search_suggestions’, ‘get_search_suggestions_callback’ );
add_action( ‘wp_ajax_nopriv_get_search_suggestions’, ‘get_search_suggestions_callback’ );

function get_search_suggestions_callback() {
$term = sanitize_text_field( $_POST[‘term’] );

$args = array(
‘s’ => $term,
‘posts_per_page’ => 5, // Limit the number of suggestions
);

$query = new WP_Query( $args );

$suggestions = ”;

if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
$suggestions .= ‘

‘;
}
wp_reset_postdata();
} else {
$suggestions = ‘

‘;
}

echo ‘

‘ . $suggestions . ‘

‘;

wp_die(); // This is required to terminate immediately and return a proper response
}
“`

This function handles the AJAX request, performs a search query, and returns the results as an HTML list.

* **Add the suggestions container to your `searchform.php`:**

“`html