Creating a Fun Random “Favorite Things” List Using Custom Fields

Creating a Fun Random “Favorite Things” List Using Custom Fields

Custom fields are an often under-used aspect of WordPress. But with a bit of imagination and some custom code, you can do all sorts of fun things with them.

In this post, I’m going to show you how to combine custom fields (or post metadata if you’re being particular) with the WP_Query class to output a list of favorite things on a website with some information about them. The list will be random and it will be more than just the default list you get if you use the get_post_meta() function.

Here’s what it will look like:

Favourite things output in a paragraph

What You’ll Need

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

  • A testing or development installation of WordPress
  • A code editor
  • Some knowledge of registering post types, working with custom fields and using WP_Query.

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 grounding in all of the code I’ll be using in this post.

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

So let’s get cracking!

What We’ll Be Doing

To generate the information on our favorite things, we’ll be doing a few things:

That’s quite a lot to cover and I won’t be going into a lot of detail for each section. But I will be providing links to posts and tutorials where you can learn more about the techniques and functions I’m using as we go along.

Let’s start with the custom post type.

Registering Our Custom Post Type

First, you’ll need to create a new plugin – I’m assuming you know how to do that, but if you’re unsure, check out our guide to writing plugins.

Now in your plugin, add the code to register the custom post type:

Note that the 'supports' parameter doesn’t include a few of the things you normally would for a new post type, such as 'editor' and 'custom-fields'. That’s deliberate: I don’t want to add normal content to this post type, and I don’t want access to the custom fields interface because we’ll be adding a metabox for that.

Now let’s add that metabox.

Adding a Metabox in Our Post Editing Screen

Now, still in your plugin, you need to add a metabox for users to input information about this particular favorite thing. We’re going to include two fields: what’s good about it, and what’s not so good.

First, you need the code to create the metabox:

Next, the callback function to populate it:

Then the function to save any data that’s input to it:

There’s a lot of code there, but none of it is much different from what you would use when creating any meta box. If you need a grounding in creating meta boxes, check out our Intermediate WordPress Development academy course and our post on the subject.

Now if I open the editing screen for my custom post type, I’ll see the meta box, but no content editing box because I didn’t include that when registering the post type:

The next thing to do is add some favorite things with the best and worst things about them. I’ve added some of my favorite things to my site:

Some posts added to the favourite custom post type, shown in the WordPress admin

Creating the Query

Now for the fun part. We need to run a query to fetch three random favorite things form the database. WordPress makes that simple by giving us the option to use the orderby argument for our query with a value of rand.

Here’s the code to define the arguments and set up the query, as well as kicking off the loop:

Now instead of running a standard loop and outputting data for each post at a time, we’re going to save the relevant data to an array of variables. This involves three things:

  • Creating a variable called $currentpost, which starts with a value of 0 but then goes up by one after each loop, using $currentpost++.
  • Adding the title of each post to our array, using $favorite[$currentpost] = get_the_title();
  • Adding each of the two custom fields to our array, using get_post_meta().

Here’s the code:

Now we’ve got that array of variables populated, we can output some data. Note that we’ve already closed the loop and reset the query: we don’t need to be in the loop to output this data as we’ve already stored it in our array.

This is all going to go inside a section element, echoing out some text along with the values from each of our three posts:

The final step is to run the function in our theme. You can do this by adding the wpmu_output_favorite() function to a theme template file in your theme, or by hooking it to an action hook if your theme has one. I’m using the free Blog Way theme in my demo site, so I’m going to hook my function to the blog_way_before_primary hook that it provides for adding content at the top of the page:

I’m also going to place my code inside a conditional tag (inside the function) to ensure it’s only output on the home page of my site:

So here’s the function to output the content in full:

Now if I visit my demonstration site, I see text at the top of the page with randomly generated information about my favourite things:

Favourite things output in a paragraph

If I refresh the page, it changes:

More Favourite things output in a paragraph

Combining Custom Fields and Custom Queries Can Be Powerful

As you’ve seen from this example, using custom fields along with a custom query gives you a lot of flexibility. In this case I’ve used it to generate a paragraph with information about my favourite things, which refreshes at random when I refresh the page.

You could apply this technique to other uses of custom fields, allowing you to display post metadata in whatever way you want. And if you alter the arguments for the query, you can change it form a random list to a more targeted one. You could even use meta_query as one of your query arguments to query for posts with a certain value in the custom field.

Rachel McCollin
Have you used custom fields along with custom queries to output data in unique ways? Let us know your ideas in the comments!