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:
- Registering a custom post type called “favorite”
- Creating a meta box for the post editing screen for our new post type
- Adding some fields to that metabox
- Adding some favorite things and filling in our metabox fields for each of those
- Running a custom query to fetch data on our favorite things
- Storing what the query gives us in an array of variables
- Outputting it as text on the site
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:
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.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox – free!
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:
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:
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!