Using the query loop, which is a standard block in WordPress, we will show you how to extract and display information under the following conditions in a specific query loop.
- Extract posts that are associated with the same category (including multiple categories) specified in the post
- Randomly sort and display extracted posts
- The number of items, style, etc. follow the specifications and settings of the query loop block.
This is a feature of plugins and themes commonly called “related articles” and “related posts,” and the appeal is that you can create them using only the standard WordPress query loop without using such dedicated features.
Customization of this page is intended for those who are somewhat familiar with adding code to the theme’s functions.php and setting up query loop blocks.
Sample of displaying related posts using query loop
Since a picture is worth a thousand words, below are the related posts linked to the categories on this page that are actually displayed using the method on this page.
If you could do this with WordPress’ standard query loop, you wouldn’t need a dedicated plugin or a theme that relies on having that feature, and since it’s a standard mechanism, it’s especially compatible with block themes.
The reason why the related posts displayed above and below are different is because they are randomly selected (more on this later).
Example of displaying related posts with featured images
After extracting posted content with eye-catching images, various adjustments are made on the block editor, but the adjustment parts are not explained in detail on this page.
Example of displaying related posts in a simple list format
After extracting posted content with eye-catching images, various adjustments are made on the block editor, but the adjustment parts are not explained in detail on this page.
If you put this under the body of a post template in the site editor, you can automatically display related posts, or you can put it in a sync pattern and display it anywhere in the body.
Code to create related posts using query loop
You’re probably going to say, “Huh? Can you do it? Please tell me how to do it!” so let’s do it right away.
Below is the code for extraction. Paste it into functions.php of the activated theme.
function pwcn_qloop_related_posts( $query, $block ) {
$block = $block->parsed_block;
// Get the category associated with the current post
$categories = get_the_category();
$category_ids = array();
if ($categories) {
foreach ($categories as $category) {
$category_ids[] = $category->cat_ID;
}
}
if (
isset( $block['attrs']['className'] )
&& false !== strpos( $block['attrs']['className'], 'related-posts' )
) {
$query['post_type'] = array('post');
$query['cat'] = $category_ids;
$query['orderby'] = 'rand';
}
return $query;
}
add_filter( 'query_loop_block_query_vars', 'pwcn_qloop_related_posts', 10, 2 );Insert the query loop you want to make into a related post somewhere (this can also be a post template in the site editor or a post created as a test).
The query loop has the following hierarchical structure, so add a class called “related-posts” to “Advanced Settings” → “Additional CSS Classes” in “Post Content”.
- query loop
- Posted content
- Title
- Category
- Featured Image
- Date
- other．．．
- Pagenation
- No results
- Posted content
If you have saved a template or created a test post, please save it as a draft with an appropriate category assigned, and then view or preview it.
Posts associated with the category should be displayed randomly for the number of posts specified by the query loop.
After that, adjust the style etc. (In the sample above, no special style code is written, everything is specified using block options).
As per the purpose of this page, the content of the code is to extract the category associated with the post, and then randomly extract the posts associated with that category from the posted content with a specific CSS class! (Details are omitted).
Personally, I thought there weren’t many conditions for specifying a query loop, but if you learn how to use it like this, you’ll find it very convenient, and it will expand the scope of your site creation.
By the way, please refer to the following page for details on changing the conditions of the query loop.
