Related Posts

Display related posts in your blog post page

Code Level




Example Description

In this example we add a repeater to our blog post page to display posts that share the same hashtag. We also added a repeater to display Popular posts.

Example Code

How We Built It


For this example we used one of the database collections automatically added to your site if you have a blog:

  • Blog/Posts collection: Contains information about each blog post.


Page Elements

In the Post page on our site we added 2 repeaters. 

  • Popular posts repeater: Displays the 3 most popular posts. Connected to Blog/Posts collection via the Popular Posts dataset

  • Related posts repeater: Displays 3 posts related to the current post. Connected to Blog/Posts collection via code.

The repeaters contain page elements to display data from the blog posts and buttons connected to the relevant post page URLs.



We added a Popular Posts dataset to connect data in our Blog/Posts collection with the popular posts repeater. We set the following in the dataset’s settings: 

  • Number of items to display is 3 so only 3 posts are displayed in the repeater

  • Sort the Like Count from high to low so the most popular posts are displayed



We added the following code to the Post page:

  1. Import the modules we need to work with data and navigation.

  2. When the Post page loads, run the getAndLoadRelatedPosts() function with the current post data:

    1. Get the current post’s data using the getPost() function.

    2. Query the Blog/Posts collection, checking for the first 3 posts that are not the current post and contain any of the current post’s hashtags. 

    3. Load the related posts repeater with the data, triggering the onItemReady event handler.

  3. Add an wixLocation.onChange() event to call this function again after the user clicks on a related post

  4. In the onItemReady() handler, set the post title, image, and date and post url link for each repeater item from the 3 items in the related post data.

APIs We Used

Related Articles

Related Examples

Add to Cart Gallery

Let customers to add products to their cart


Hide and Show Elements

Hide and show elements in response to user interactions


Hide and Show Elements

Hide and show elements in response to user interactions