Take a look at the example inside the box below.
- We have a search box.
- We have category select box.
- We have a list of posts.
- We have a “load more” button.
- When we type anything on the search box it automatically filters the listed posts.
- If we select anything on the category, it filters the posts by category.
- Dynamically, the search box and the category select box work together. If we select a category, and type in keywords, it will only search and filter the post lists under that category.
Demo Example:
So how did I do that? It is simple, look at the code down below. Add it to your functions.php file.
// These lines of code register the 'custom_filter_posts' function to be called when an AJAX request with the action 'custom_filter_posts' is received.
add_action('wp_ajax_custom_filter_posts', 'custom_filter_posts');
add_action('wp_ajax_nopriv_custom_filter_posts', 'custom_filter_posts');
function custom_filter_posts() {
// These lines retrieve the keyword, category, page number, and posts per page values from the AJAX request's parameters. If any of these parameters are not provided, they default to empty string, 1, and the default number of posts per page respectively.
$keyword = isset($_GET['keyword']) ? $_GET['keyword'] : '';
$category = isset($_GET['category']) ? $_GET['category'] : '';
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$posts_per_page = isset($_GET['posts_per_page']) ? $_GET['posts_per_page'] : get_option('posts_per_page');
// These lines construct arguments for the WP_Query object which will be used to fetch posts from the database.
$args = array(
'post_type' => array('post'), // Include both posts and pages
'posts_per_page' => $posts_per_page, // Number of posts to display per page
'paged' => $page, // Current page number
's' => $keyword, // Search keyword
);
// Add category filter if a category is selected
if (!empty($category)) {
$args['tax_query'] = array(
array(
'taxonomy' => 'category', // Taxonomy to filter (in this case, category)
'field' => 'term_id', // Use term ID to filter
'terms' => $category, // The selected category ID
),
);
}
// Perform the query to retrieve posts based on the provided arguments.
$query = new WP_Query($args);
// Check if posts were found
if ($query->have_posts()) :
// Loop through each post in the query result
while ($query->have_posts()) : $query->the_post();
// Display each post's title and excerpt
echo '<div class="search-result">';
echo '<h3><a href="' . get_permalink() . '">' . get_the_title() . '</a></h3>';
echo '<small>' . get_the_excerpt() . '</small>';
echo '</div>';
endwhile;
else :
// If no posts were found, display 'No more posts'
echo 'No more posts';
endif;
// Reset post data to ensure that global variables are restored to their original state after the query
wp_reset_postdata();
// Terminate the script execution
die();
}
// Register shortcode
function custom_search_shortcode() {
ob_start(); // Start output buffering
?>
<div style="border: 2px solid #000; padding: 30px; ">
<form role="search" method="get" class="search-form" id="custom-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label>
<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ); ?></span>
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ); ?>" value="<?php echo get_search_query(); ?>" name="s" id="search-keyword"/>
</label>
<label>
<?php
$categories = get_categories();
if ( $categories ) {
echo '<select name="category" id="search-category">';
echo '<option value="">Select Category</option>';
foreach ( $categories as $category ) {
echo '<option value="' . $category->term_id . '">' . $category->name . '</option>';
}
echo '</select>';
}
?>
</label>
</form>
<br />
<div id="search-results"></div>
<button id="load-more-btn">Load More</button>
</div>
<script>
jQuery(document).ready(function($) {
var postsPerPage = 3; // Number of posts to load initially
var currentPage = 1; // Current page
var keyword = $('#search-keyword').val();
var category = $('#search-category').val();
// Function to load posts
function loadPosts() {
$.ajax({
type: 'GET',
url: '<?php echo esc_url( admin_url('admin-ajax.php') ); ?>',
data: {
action: 'custom_filter_posts',
keyword: keyword,
category: category,
page: currentPage,
posts_per_page: postsPerPage
},
success: function(response) {
$('#search-results').append(response);
}
});
}
// Load initial posts
loadPosts();
// Load more posts when the button is clicked
$('#load-more-btn').on('click', function() {
currentPage++; // Increment current page
loadPosts(); // Load more posts
});
// Trigger search when the keyword input changes
$('#search-keyword').on('input', function() {
keyword = $(this).val(); // Update keyword
currentPage = 1; // Reset current page
$('#search-results').empty(); // Clear existing results
loadPosts(); // Load posts with updated keyword
});
// Trigger search when the category dropdown changes
$('#search-category').on('change', function() {
category = $(this).val(); // Update category
currentPage = 1; // Reset current page
$('#search-results').empty(); // Clear existing results
loadPosts(); // Load posts with updated category
});
});
</script>
<?php
return ob_get_clean(); // Return the buffered content and clean the buffer
}
add_shortcode('custom_search', 'custom_search_shortcode'); // Register the shortcode
Then on your page, add this shortcode [ custom_search ]
If you are familliar with PHP and WordPress, just read through the code comments and try to understand.