[Support request] How to display related posts?

[Nicolas]

Hello,

Please check the URL 1 shared in the PI field.
You will see that at the end of their posts, you can find 2 Related Posts. You also have an arrow to display 2 more. That equals to a total of 4 related posts.

I assume they are offered automatically. I assume the system selects them out of the same Category.
Maybe there is a smart system to also select the closet ones semantically speaking but I’m not sure about that.

How can I do so with GP?

Please note that my questions concerns as much the content selection AND the layout?
How can I reproduce the same layout as on the URL shared? Or do you have a better alternative in mind based on what you have seen through your experience and that would fit well with my blog style (see URL 2 shared)

[Leo]

Hi there,

GP doesn’t have related posts feature built-in.

You can consider using the GB pro with the Query loop block:
https://generateblocks.com/creating-related-posts-with-query-loop-block/

Or a related posts-specific plugin like this:
https://wordpress.org/plugins/contextual-related-posts/

Hope this helps 🙂

[Nicolas]

Hi there,

I need some more help here.
I tried following the tutorial on https://generateblocks.com/creating-related-posts-with-query-loop-block/
Please see here: I selected Categories for TAXONOMIES and the Category Term CUISINE for the sushi post (see url in P.I. field)

Nothing happens. I’m have a feeling I have missed setting something but I do not know what.

Also and anyway, the URL I shared in the PI field is from another them and the Related posts you can see displayed at the bottom of each of their posts is done BY DEFAULT, I mean, with the default theme. It means this is doable. So how can I get the exact same layout with GP please?

I shared a URL 3 where something similar has been done with GP. I was said this was generated automatically.

So my questions are:
1 – How can I get the layout of URL 2 with GP for my blog?
2 – Will I need to add a block manually to each of my posts everytime I need to add the Related Posts block, or is there a way to automate this like for the URL 3?

Thank you

[Ying]

You can add the query loop block into a block element - hook, choose after_entry_content as the hook name, choose posts > all posts as the location.
https://docs.generatepress.com/article/block-element-hook/

But without GenerateBlocks pro, you will NOT be able to exclude the current post from the query loop block.

That is why Leo suggested using a related posts plugin.

[Nicolas]

Hello,

Sorry,

I’m very confused and stuck.
Yin, I started creating what you said.

This is where I’m stuck.

As explained above, my idea is to offer the visitors a grid with 2 columns: In each column I want to display a Related post from the same categories in a nice way. I just need the feature image and title of the post to appear in a nice way that entices clicking.

Where do I go from where I am? WHat are the next steps?
Thank you.

[Ying]

Query loop block has a Grid block, so you don’t need to add it inside a Grid block.

So the structure would be:

- Container 
  - Query loop
    - Grid
      - Container (post template)

You can add a GB image block to show the featured image, and a GB headline block to show the title into the Container (post template).

Set the Container (post template) width to 50%.

[Nicolas]

Thank you Ying.

1. I now have the structure, but I don’t know how to set the Dynamic Data in order to get the feature image. Same with the Large Headings.

2. Also, I cannot seem to duplicate the container so as to get 2 Related posts next to each other.

[David]

I would suggest testing out one of the premade Patterns that you can copy from here ( or add from the GB Pro Patterns library ):

https://generateblocks.com/library/?pattern-category=query-loop

Then you can see they how they are built.

To change the number of columns in a query loop, select the Post Template block inside the Query Loop and set its % width. eg, 50% for 2 column, 33% for 3 columns

[Nicolas]

Thanks to your advice I was able to use a premade patterns and customize it like this.

But:

1 – How do I get rid of the circled part on all my post then?

2 – How can I make sure the 2 posts selected are NOT the same as the post already displayed, and are part of the same Category?

[Ying]

1. The category and post navigation can be disabled at customizer > layout > blog > content > single.

2. GB pro has the option to exclude the current post.

[Nicolas]

1. Thanks.

2. I know for I remember playing with it a few weeks ago, but I cannot remember where I should click.
On the Query Loop? What settings? Where?

3. I would like to keep the Post categorie but display it like here for “Manga” on my GP theme. How to do so please?

[Nicolas]

Hi,

Anyone for my questions above and especially n°3?

Plus can you confirm the option if those settings are correct to exclude the current post from being listed as a related post? In other words, how to avoind having a post being listed as a related post on its own page?

Regards

[Ying]

Your last reply slipped through our support system, sorry about that.

For question 2, try following the instructions here:
https://generateblocks.com/creating-related-posts-with-query-loop-block/

For question 3, is the screenshot taken from a single post or an archive page?

[Nicolas]

For question 3, see URL in PI field (not my site and not using GP theme, but I want the same on my site)
My posts are using the “standard GP posts/settings”. How to add the category tags like on the screenshot? I don’t want to enter into the process of creating a post template. I want the easiest solution to add the Category term at the top of the post like on the screenshot shared while having the possibility to adjust its layout (i.e. changing the background and font colors).

Question 2: Solved. Thank you for the tuto link.

[Fernando]

Hi Nicolas,

3. The easiest way would be through a Block Element – Hook.

Add a GB Headline Element and set the Dynamic Text Type to List of Terms – Categories.

Then hook the ELement to before_entry_title. Example: https://share.getcloudapp.com/BluRmWOx

[Author]

Posts