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:

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 recommended courses for WordPress development.

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:

• 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

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.

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:

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 favorite things:

If I refresh the page, it changes:

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 favorite 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.

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

Tags:

• custom fields
• custom queries