The BYOB Related Posts Query Box allows you specify a post type (including custom post types) and the taxonomy (including custom taxonomies) that you want to use to determine relatedness. Then for each post using that template it will display other posts using the same taxonomy term (category, tag, etc). Sure it might sound a little complex but really it’s quite simple.
Use it to display posts of the same category. Use it to display products in the same product category. Use it to display featured products, or featured posts. Use it anytime you want to display other posts or custom post types related to the current post in some way.
This box allows you to:
- Specify the post type
- Specify the taxonomy
- Specify the number of posts displayed
- Change the sort order of the posts displayed
- Exclude the current post from the posts displayed
- Use any and all of the standard Query Box elements in the display
- Add a title to the Query Box – similar to a widget title
- Control the HTML tag and class of the title
- Dynamically include the taxonomy name in the title.
Paid members can download this box from the link below. The latest version of the BYOB Related Posts Query Box is 184.108.40.206
This is an introduction to the BYOB Related Posts Query Box. The related post query box allows you to display posts of the same post type that are related to each other by a given taxonomy and it’s a taxonomy of your choice.
Ways to Use the Box
For example, you could add related posts that are related by categories. So if they share the same category then they show up or if they share the same tag.
There are instances in a complex CMS where you may choose to create a custom taxonomy and have them display related posts by a custom taxonomy. In fact, this works with custom post types as well.
It can be used to show related products or if you have a products post type or really, anything that you can imagine as long as it’s a taxonomy and some kind of a post type, you can show related post types and you can define the terms by which you identify relatedness.
Install the Box
We’re going to take a look at this example with posts first and we’re going to do that here on this site. Let’s come over to the dashboard see if already have this one installed. I do not. So we start off by downloading the box and then uploading the box. Choose the file and this is the related-posts-query.zip. Add that box. Say okay to that, come down and put a checkmark beside the box. Save the boxes.
Example Use: Add Related Posts in a Template
Let’s come over to our template editor and to our Single template and open up our Content Area. What we’ll do is we’ll put related posts here before our Post Navigation.
Add Related Posts Query Box
So we can come down and grab this Related Posts Query Box and drag it into the Main Content Column below WP Loop. We’re going to select posts because that’s what we’ve got at the moment and we are going to pick categories as the relationship and we’ll pick two posts to show here. Then the things that we’re going to show are Headline and Excerpt here.
Let’s save this and then view the site. Go to our blog and we’ll look at the post about cherries. Scroll down here to the bottom and now we have two related posts that are showing up here. Bing Cherry and Van Black Cherries.
Change the Styling of the Display
You could instead choose to use simply the name and the image so come back over to HTML and the Single template and instead of the Excerpt we’ll just show a Post Image and this is set for h1.
We’ll set it to p and we’ll link it to the page to change these so that it is centered with no wrap. Then if we want them to sit side by side, we can take this query box element and give it a class. Let’s give it a class of related and then in custom CSS we can give these an explicit width.
Let’s see how wide are the images, is that 200×200? So we could give these things an explicit width under custom CSS so we could say .query_box.related and then say width 33%, float:left, and text-align:center.
Now I may have something that looks entirely different now. Our images and our titles sit side by side here so if we had more of them, more would show here. Or if we change that query box instead of showing only two, we could change the query box so that it shows three.
Responsiveness of the Display
We have three images here. This is going to be responsive. You can see what this looks like. Right now each of these images comes down to this 1/3 third and so then if the phone is flipped over, those can be like this.
If we want them to instead not get any smaller than this then we could give them a media query or we could give them a minimum width. For the moment we’ll give them a minimum width of 200 pixels and save that CSS.
Come back over to our page and refresh that and now, the minimum width is 200 pixels. If we flip the phone around, they both fit in this side by side. I think I lost my…resave that again. I did lose that for a second but now you can see we’ve got all three of them in there, two of them sitting side by side.
Use with Any Kind of Taxonomy
As you can see we have full control over the output of these related posts. This can be used for custom post types as well. So you could use it for related products, you can use it for just about anything as long as it’s got some kind of a taxonomy that you can choose to identify the relatedness and as long as a post has something that is related to it. I hope you find that useful.