WordPress User Search (Frontend) – The EASIEST Way!

I was recently been hired on Upwork (yes I still use it, following my rant), to extend on a ‘social network’ that is built with WordPress. This is my first BIG project, besides working on larger sites. The client had a developer working on it previously, but they couldn’t continue due to unforeseen circumstances – so they hired me.

At heart, I knew it was going to be a challenge, but I still applied. I have some development knowledge as far as building social networks, but not with WordPress. The best bit about this project was that I was being paid to learn. That made it more fun and fulfilling.

I built some really amazing functionality, like extending the follow profile code, blocking profile code and a user-generated newsfeed based on who they followed and who they had blocked.

But there was one task that really got to me. The user search functionality. As you know, WordPress’s default search.php file in any theme will just have a loop that will display only posts and pages associated with that search term.

And where I had never tackled something alike before, I decided to search on Google. Definitely not what I wanted, and I just knew that from the size of there snippets – that there was no need for lengthy code.

As a result, I gave up the searching and took a look at the good old WordPress Codex. Guess what, the answer was right in front of my eyes.

Thanks to WP_User_Query(), the search form now allows users to search for other users registered.

Let me show you.

Creating the form

The start of any search journey always begins with the search bar/form. I created a super-basic search form in the searchform.php file, which we can then call with get_search_form().

<form class="form-inline" action="<?php home_url( '/' ); ?>" method="get">
    <input class="form-control" type="text" name="s" id="search" placeholder="Search <?php get_bloginfo( 'name' ); ?>..." value="<?php get_search_query(); ?>" />
    <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
</form>

I’m using Bootstrap 4’s framework for the amazing styling, but you can use whatever you want. I’m also using Font Awesome for their amazing icon library, again this is optional, but button values are so 2017 – in my opinion.

Creating the loop arguments

Once a user has searched, the default result page is search.php. So this is where we will need to put our loop. Using WP_User_Query() we can pull in user information associated with the search query.

<?php $s_query = get_search_query(); ?>

First, we need to assign the current searched term to a variable so we can use it in our WP_User_Query() arguments.

<?php
$args = array(
    'search' => '*' . esc_attr( $s_query ) . '*',
    array(
        'key'     => 'first_name',
        'value'   => $search_term,
        'compare' => 'LIKE'
    ),
    array(
        'key'     => 'last_name',
        'value'   => $search_term,
        'compare' => 'LIKE'
    )
);
?>

Now we can create our arguments. Firstly the ‘search’ parameter searches for a specific query, in this case, it will refer to what the user has entered into the search form. It uses a wildcard ‘*’, to ensure it searches the whole string for that search query.

For example, if we had a user called Harry and we searched for ‘ha’, it would still return Harry, because the wildcard searches for 0 or more characters. We also wrap this in esc_attr() to ensure that we do not input HTML from the search query into the loop.

We’re calling what we want to search for in the database using the ‘key’, ‘value’ and ‘compare’ parameters. We need to wrap them in an array as they come as a set, rather than individual parameters. You can see we’re searching the database for 'first_name' and 'last_name'.

Creating the loop

We’re not going to be an ordinary post loop, instead we’ll be using a foreach loop – yup, my new favourite WP loop.

<?php $user_query = new WP_User_Query( $args ); ?>

First things first we need to store the WP_User_Query() function within a variable and include our variable of $args within the WP_User_Query() function. Confusing, but we need to call this so we can pull the correct data associated with the search query within the loop.

<?php if ( ! empty( $user_query->get_results() ) ) {
    foreach ( $user_query->get_results() as $user ) {
        echo '<p><a href="' . home_url( '/' ) . 'user/' . $user->user_nicename . '/">' . $user->display_name . '</a><p>';
    }
} else {
    echo 'There are no users matching your search.';
} ?>

Last, we have the loop. We need to create an if statement that checks whether there are actually results available to return for the search query. If there are users associated with that search query, return them and if not, then do something. Now we run the loop inside of the if statement, using foreach we can set the $user_query variable as $user to pull specific information within the loop.

Due to the client having Ultimate Member installed, the permalink structure for user profiles is completely different to the generic WordPress author profile pages. So, I had to use the home_url() function to help creating a nice anchor. Within that anchor, we call the users display_name which is generally their full name. It can differ.

To finish our first if statement for whether there’s data associated with the search term, we give people a little message letting them know that there aren’t any users matching their search.

And that wraps it up. Oh, one last thing – make sure you indent your code correctly – don’t make it messy for other people that are working on that project with you.

Sources