How to: Update WordPress Search to Use $_POST

When your website visitors can’t find something on your site, instead of clicking through every page, they search.

This is why having an optimized search on your website is crucial – it improves user experience, engagement, and reduces bounce rates.

While WordPress comes with a built-in search engine for your site, you have to make it usable for your visitors (which includes improving your search results page).

Typically, the WordPress search works by adding a search form to your site, consisting of a text input field that submits the search query to the server and the built-in query variable using the letter “s”, which represents a search query.

The code for a typical WordPress search form looks something like this:

<form method="GET" action="/" role="search">
     <label for="search-input">Search</label>
     <input type="search" name="s" id="search-input">
</form>

As you can see, the input field has the “name” attribute set as “s” and the “method” for the form is set to “GET”. This will display the search results on the url https://www.yourwebsite.org/?s=search-query since the “GET” method is used for the form.

While this works great in most cases, there are some times where you may not want to include the search query in the URL, but still display relevant search results. For example – if you’re worried at all about users’ searches being sent publicly to the server, you’d want to hide the query from being shared in the URL.

Here’s how to make the switch.

Switching from $_GET to $_POST

To prevent the search terms from appearing in the URL, we need to update the search form to use the “POST” method instead of “GET”. This can be achieved by simply updating the “method” in the above form code to “POST” which will remove the query parameter from the URL.

<form method="POST" action="/" role="search">

In addition to updating the form method, we also need to tell WordPress the search query and update the WP_Query class accordingly. In the below code, we’ll use the “pre_get_posts” hook and, inside its callback function, check to see if a search is being performed and if the search query is present. If both are true, we set the search parameter for the WP_Query class.

function process_post_search_query() {
     if ( is_search() && ! empty( $_POST['s'] ) ) {
          set_query_var( 's', sanitize_text_field( $_POST['s'] ) );
     }
}
add_action( 'pre_get_posts', 'process_post_search_query' );

After making these updates, WordPress will display the relevant search results without displaying the query in the URL.

Creating Shareable Search Results Links

One of the drawbacks of updating the WordPress search to use the “POST” method is that you can’t simply share the URL of a certain search results page. To overcome this, we can create a button that can be clicked to copy the search results URL.

To do this, we’ll first add the button to the search results page using the following code.

<?php
$home_url = home_url( '/' );
$curr_search_query = get_search_query();
$current_page = get_query_var('paged') ? intval( get_query_var('paged') ) : 1;
if ( $current_page > 1 ) :
     $curr_copy_link = $home_url . 'page/' . $current_page . '/?s=' . urlencode($curr_search_query);
else :
     $curr_copy_link = $home_url . '?s=' . urlencode($curr_search_query);
endif;
?>

<button type="button" class="search-share" data-search="<?=$curr_copy_link;?>">Click to Share Link</button>

In this code, we use the home_url() function to retrieve the website’s URL and store it in the $home_url variable. Then, we save the search query in the $curr_search_query variable using the get_search_query() function, as well as the current search results page number in the $current_page variable. (We do that by checking if the “paged” variable is set using the get_query_var(‘paged’) function and, if it is, assigning the value to the $current_page variable. Otherwise, we set the value to 1 for the first page.)

Now, we’ll create a link and assign it to the $curr_copy_link variable, whose URL will be https://www.yourwebsite.com/?s=[$curr_search_query] or https://www.yourwebsite.org/page/[$current_page]/?s=[$curr_search_query] if the current search page number is greater than 1. The $curr_copy_link variable is added as a “data-search” attribute to the button with the “class” of “search-share”.

We will also need to add this jQuery code, which will copy the link to the user’s clipboard when the button is clicked.

$('button.search-share').on('click', function(e){
     e.preventDefault();
     var curr = $(this);
     navigator.clipboard.writeText(curr.attr('data-search'));
});

How it works: we listen for an onClick event on the button and, in the callback function, we use the Clipboard API’s writeText method to copy the link to the user’s clipboard. Now, the user can simply paste the link to share the results of a search query on your website.

By simply adjusting a few lines of code, you can update your WordPress website’s search to use the “POST” method and remove query parameters from being displayed in the URL.

If you would also like to update the search functionality on your website or for any other WordPress or website development needs, reach out to us.