How to Add Related Posts to Astra

Sample of Related Posts with Text: How to Add Related Posts to Astra

Many clients have asked how to add related posts to Astra. So I decided it was time to write a tutorial.

While there are a few Related Post plugins in the WordPress repository, why add the overhead if you can add Related Posts to Astra using blocks?

This post assumes that you are using the free Astra theme and Gutenberg and have basic knowledge of both.

But if you are new to Astra, you might want to read my earlier tutorial to help you get started.

And if you’ve never worked with Gutenberg before, now is the time to get serious and sign up for Gutenberg training.

Topics

Below are the main topics you’ll find in this post:

Install Ultimate AddOns for Gutenberg
Add Related Posts to Astra with Post Grid Block
Add Related Posts to Astra with Advanced Columns Block
Save a Reusable Block
Modify a Reusable Block
Exclude Current Post

Assuming you’re familiar with Astra and Gutenberg, let’s dig into how to add related posts to Astra.

Install Ultimate AddOns for Gutenberg

The first thing you’ll want to do is to install the free Ultimate AddOns for Gutenberg (UAG) plugin.

This plugin will give you a rich assortment of unique blocks to help you build your site.

And you’ll likely use these blocks all the time for your pages and posts. For example, the Section and Advanced Column blocks will give you granular control over the page/post structure you wish to achieve including columns.

Additionally, these Gutenberg blocks will help you design your WordPress pages and posts without needing to write code or hire a developer.

You can see how this plugin will give you so much more flexibility and extends the Gutenberg block editor.

So let’s read on to learn about two UAG blocks you can use to add related posts to Astra.

Add Related Posts to Astra with Post Grid Block

The first way is to add related posts to Astra is by using the Post Grid block.

This block allows you to automatically populate the post grid with posts based on the category or tag you select.

This is the easiest method but your posts will need to have a related category or tag in order for you to specify which posts should populate the post grid block.

For example, you’ll note on my website there is a related post block at the bottom of each Astra post. And it looks like this:

Sample Related Post Block

Sample Post Grid with Astra chosen as category: 6 posts in 2 rows of 3

For this example I am using the Post Grid block with category setting of “Astra” to fill the block. Here’s how.

Add Post Grid Block

To add related posts to Astra using the Post Grid block, click the “+” and add a Post Grid block:

blank

By default the grid will bring up all post categories with a maximum of 6 posts.

And by default it shows the title, author, date, comment and excerpt, which on my site looks like this:

blank

But this isn’t quite what I want because it’s bringing up all of my posts, not just the Astra related posts.

So keep reading to see how I fix this to look exactly how I want it.

Update Post Grid Block Settings

First, we need to adjust a few of the default settings in the block editor.

To customize that Post Grid block, from the editor click on the block to get to the block settings (screenshot below):

Post Grid Block Settings

Change the settings as follows:

  1. Choose the taxonomy (categories or tags): “Categories”
  2. Choose the appropriate category: “Astra”
  3. Select number of posts per page: 6
  4. Sort by descending date; in other words, newest to oldest
  5. Put in 3 columns of equal height

After adjusting the above settings we have the Post Grid showing just the Astra related posts:

blank

Better but still not exactly what I want.

I only want the featured image to show on top of the title.

And I don’t want to see the metadata, excerpt or Read More button.

So I will change the following settings as shown in the example below:

Sample Settings for Post Grid Block
blank

TIP ~ The Read More button settings will not display in the block editor if the Show Excerpt button is OFF. But the Read More button itself will show in your post grid by default.

So if you don’t want the Read More button to display, you’ll need to toggle Show Excerpt setting ON, then toggle off the Read More button.

And now my grid looks like this, which is exactly what I wanted!

blank

At this point I can save this Post Grid as a Reusable Block. And it will be available to me in any post I want.

Save as Reusable Block

To create a reusable block, select the Post Grid you just created then click the 3 dots and select “Add to Reusable Blocks.”

blank

Give the block a name. This block is now available to be reused in any post or page.

How to modify a reusable block on a specific page or post

There may be a time where you want to modify your reusable related post block.

Perhaps you want to change the category or tag that it’s using.

To do so, you need to perform the following steps:

  1. Add the reusable block to your post or page
  2. Convert the block to a regular block
  3. Edit the newly converted block as needed

Refer to the short demo below:

How to convert reusable block to regular block

blank

The block can now be edited without affecting the original reusable block, which is being used site-wide.

Excluding Current Post on a Post

The ability to exclude the current post from the post grid is relatively new.

Just turn on the setting to exclude current post as follows:

blank

TIP ~ “Exclude Current Post” setting only works on a post, not a page.

This means that the “Exclude Current Post” setting will be ignored when you add the post grid block to a page.

There is a technical solution that involves using a filter in functions.php to identify and exclude specific post/page IDs.

Unfortunately, that is beyond the scope of this article but a developer should be able to help you.

Add Related Posts to Astra with Advanced Columns Block

Now we’ll look at a second method to add related posts to Astra using the Advanced Columns block.

You might want to do this to highlight certain posts that aren’t necessarily related by category or post.

But this method means you will have to manually change this block each time you want to update which posts display in it.

And that also means we will need to manually choose the image and title we wish to go into each column.

Let’s see how.

Add Advanced Column Block

First, add an Advanced Columns block to your post or page.

Click the “+” sign and look for Advanced Columns.

blank

The following screen displays:

blank

Choose the number of columns you want.

For our example, I will choose 3 columns.

Then for each column I’ll add an image block and put a caption under it for the title.

Finally we’ll set a link for both.

Now take a look at this demo that shows you how easy it is to set up the related posts in an Advanced Column block:

blank

The final step is to add a link to each of the images above.

To do so, click the image and then click the link icon to add the post URL:

blank

That’s it!

Once done formatting the Advanced Columns block, you can save it as a reusable block.

Wrapping Up

By now you see how easy it is to add related posts to Astra.

By using the Post Grid block, you can automatically populate the posts.

And you can exclude the current post by turning on “Exclude Current Post” setting from within the block editor.

Or if you want to manually choose the posts, you can use an Advanced Columns block.

Simply choose the number of columns you want, and manually format each column as you wish.

In this tutorial, we added an image with a caption as the title and set a link to the post URL.

We also saw how easy it is to create a reusable block to be used in other posts or pages.

And how to convert a reusable block to a regular block. The possibilities are great!

Remember, the Post Grid and Advanced Columns are just two of the many useful blocks available to you with Ultimate Addons for Gutenberg plugin.

Please feel free to leave any questions or comments below. I’m happy to help!


Related Posts

Subscribe
Notify of
guest
2 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Lin Pearson
6 days ago

As a beginner with Astra I still have a lot to learn.
Your series of tutorials is such a help, and this one on Related Posts is just what I needed!
Your clearly written step-by-step approach, together with the excellent explanatory graphics, presents the information in a way exactly suited to my learning style. So I carefully followed each stage and the end result was styled exactly as I wanted it!
Thanks, Michelle, for this tutorial, and all the others in your Astra collection. They are a treasure!

Scroll to Top

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close