This tutorial will show you how to create a front-end user search for WordPress.
Before we begin, please realize that there are several ways to do this. That’s the beauty of WordPress! I’m going to share my technique which uses a combination of PHP and jQuery. We’ll also use url parameters to help control our search terms.
Let’s take a look at all the moving parts and then we’ll wrap up with a complete example (bottom of page). I would advise understanding how this works before blindly copying and pasting, as is my advice with any tutorial 🙂
The User Search Query
Let’s start with the query. We’ll be using WP_User_Query class, which is WP’s core query for users. We’ll also query our users by search term on 3 user fields:
- First Name
- Last Name
Lastly, we’ll store the query results in an array using get_results() and then we’ll loop through them. If results don’t exist we’ll display a “No Results” alert.
Here’s the code.
<?php // user search query arguments $user_search_args = array ( 'order' => 'ASC', 'orderby' => 'display_name', 'search' => '*' . esc_attr( $search_term ) . '*', 'meta_query' => array( 'relation' => 'OR', array( 'key' => 'first_name', 'value' => $search_term, 'compare' => 'LIKE' ), array( 'key' => 'last_name', 'value' => $search_term, 'compare' => 'LIKE' ), array( 'key' => 'user_email', 'value' => $search_term , 'compare' => 'LIKE' ) ) ); // user query $user_search_query = new WP_User_Query( $user_search_args ); // Get the results $users = $user_search_query->get_results(); // Array of WP_User objects if ( !empty( $users ) ) : ?> <ul> <?php foreach ( $users as $user ) : ?> <li> <h5><?php echo $user->first_name . ' ' . $user->last_name; ?></h5> <label><?php echo $user->user_email; ?></label> </li> <?php endforeach; ?> </ul> <?php else : ?> <div class="alert"> <h3>No Results</h3> <hr/> <p>Sorry... there were no results found for this search term.</p> </div> <!--/.alert--> <?php endif; ?>
The Search Form
We’ll create a basic form that allows for a single keyword search. Instead of using native form actions, we’ll attach some jQuery to make the form store the searched keyword and then redirect to the proper URL with that search term as a query parameter.
IMPORTANT – replace the window.location.href below with the page you want to use on your website.
<!-- Search Form -->
<form id="user-search-form">
<label>Search members by name or email:</label>
<input type="text" placeholder="Enter search term..." id="search-term" />
<input type="submit" value="Search" />
</form>
<!--/#user-search-form-->
<!-- Search jQuery -->
<script type="text/javascript">
$(document).ready(function(){
// search form redirect
$('#user-search-form').on('submit', function(e){
e.preventDefault();
var searchTerm = $('#search-term').val();
window.location.href = 'https://yourwebsite.com/user-search/?search_term=' + searchTerm + '';
});
});
</script>
The URL Parameter
Finally, we’ll put some logic in our page [or post] template that looks for a URL parameter. If the search term exists we’ll use it for the query. If not, we’ll set the variable to blank (—).
Here’s the code that we’ll use to look for a URL parameter.
if ( isset($_GET["search_term"]) ) {
$search_term = $_GET["search_term"];
} else {
$search_term = "---";
}
The Full Example
Now let’s wrap all this together in a custom page template to see how it looks. This example assumes you’re using a page with the slug /user-search/ as your custom page template.
<?php
/*
Template Name: User Search
*/
if ( isset($_GET["search_term"]) ) {
$search_term = $_GET["search_term"];
} else {
$search_term = "---";
}
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<div class="page-header">
<h1>User Search:</h1>
<p><i class="fa fa-search"></i> Search Term = <strong><?php echo $search_term; ?></strong></p>
</div>
<!--/.page-header-->
<div class="page-content">
<form id="user-search-form">
<label>Search members by name or email:</label>
<input type="text" placeholder="Enter search term..." id="search-term" />
<input type="submit" value="Search" />
</form>
<!--/#user-search-form-->
<?php
// user search query arguments
$user_search_args = array (
'order' => 'ASC',
'orderby' => 'display_name',
'search' => '*' . esc_attr( $search_term ) . '*',
'meta_query' => array(
'relation' => 'OR',
array(
'key' => 'first_name',
'value' => $search_term,
'compare' => 'LIKE'
),
array(
'key' => 'last_name',
'value' => $search_term,
'compare' => 'LIKE'
),
array(
'key' => 'user_email',
'value' => $search_term ,
'compare' => 'LIKE'
)
)
);
// user query
$user_search_query = new WP_User_Query( $user_search_args );
// Get the results
$users = $user_search_query->get_results();
// Array of WP_User objects
if ( !empty( $users ) ) :
?>
<ul>
<?php foreach ( $users as $user ) : ?>
<li>
<h5><?php echo $user->first_name . ' ' . $user->last_name; ?></h5>
<label><?php echo $user->user_email; ?></label>
</li>
<?php endforeach; ?>
</ul>
<?php else : ?>
<div class="alert">
<h3>No Results</h3>
<hr/>
<p>Sorry... there were no results found for this search term.</p>
</div>
<!--/.alert-->
<?php endif; ?>
</div>
<!--/.page-content-->
<?php endwhile; ?>
</main>
<!--/.site-main-->
</div>
<!--/.content-area-->
<!-- Search jQuery -->
<script type="text/javascript">
$(document).ready(function(){
// search form redirect
$('#user-search-form').on('submit', function(e){
e.preventDefault();
var searchTerm = $('#search-term').val();
window.location.href = 'https://yourwebsite.com/user-search/?search_term=' + searchTerm + '';
});
});
</script>
<?php get_footer(); ?>
And there you have it, folkers! A clean and powerful front-end user search for WordPress.
Please share your thoughts in the comments below!
Discussion