Custom Queries in WordPress: Creating a Button That Runs a Query

One of the things I love about WordPress is the way you can use the WP_Query class to create your own custom query. This can query anything you want for the database – and I mean anything. Posts, custom posts, taxonomies, authors, custom fields, user login status: you name it, you can include it in your query arguments.

But imagine you want to give your site visitors the option to run, repeat or update a query that you’ve added on your site. Is it possible to provide a button that lets them do that?

The answer is yes.

In this post, I’m going to show you a really simple technique for adding a button to a page in your site that runs a custom query. I’ll use the query I created for an earlier post which queried custom fields and output a list of random “favorite things”.

The query as it stands is already an interesting one, that uses the 'rnd' argument to find and display custom fields values at random. It also uses an array of variables to store data from three posts and then output them all together in one paragraph.

I’ll show you how to add to that query by creating a button on the page that lets your users run the query again and display more random favorite things.

What You’ll Need

To follow along with this post, you’ll need the following:

  • A testing or development installation of WordPress and
  • A code editor.

This post is quite advanced, so if at any point you get stuck, you might want to pause and spend some time on our Academy courses in WordPress development. My intermediate course gives you a good grounding in all of the code I’ll be using in this post.

Note: The code to accompany this tutorial is available on GitHub.

A Recap on Our Code So Far

Let’s recap on the code so far. In my earlier post I showed you how to write a plugin that does a few things:

You can find the full plugin code on GitHub (and in my earlier post), but in this post we’ll be working on the last function in our plugin, that outputs the query:

And here’s what’s output on the site:

More Favourite things output in a paragraph

So what we’re going to add is a button beneath the “favorite things” paragraph that lets users run the query again and see some more favorite things.

This will consist of two stages:

  • Editing the query in our plugin
  • Adding styling for the button (including enqueuing the style sheet correctly).

Let’s start by editing that query.

Editing the Query

Adding a button consists of adding a line to the query arguments, and then adding the markup for the button beneath the paragraph with the favorite things list.

Let’s start with the query arguments.

Find this section of your plugin’s code:

Below that, add this line:

That checks if the button that we’re going to create has been clicked and if so, updates the query. Now let’s add the button.

Find this section of the same function:

Add a new line to it so it reads like this:

This adds a button which links not to another page on your site but to a function to update the query arguments. So when the button is clicked, it updates the query arguments and runs it again.

Now save your file and take a look at your site. Mine looks like this:

Favourite things list with link to refresh query but no styling

My link is there and if I click on it, it refreshes the query. But it doesn’t look like a button. So let’s add some styling.

Creating and Enqueuing the Stylesheet

In your plugin folder, add a new folder called css. Inside that, add a new file called style.css. This will contain all the styles for our plugin.

For the stylesheet to work, you need to enqueue it correctly. In your main plugin file, add this function:

This correctly enqueues the stylesheet in your plugin.

Now to add some styling.

Adding Styling to Our Button

Open the stylesheet you just created. You’ll need to style the .button class as well as the link it contains. My styling is below, but you might want to amend your colors:

Now my button looks like this:

Favorite things list with link to refresh query with styling

That’s better! You might want to spend some time tweaking your CSS, adding hover effects or changing the color of the text. But I recommend keeping it simple.

Letting Your Users Refresh a Query is Simpler Than You Might Think

The code we added to our query to add that button consisted of just two lines. As you can see, creating a button so that your website visitors can refresh a query is very simple. Add those two lines of code, create some styling and you’re all set!