Related Posts

Blog

Display related posts in your blog post page

Play with the example below to see what you can do:

Open this example as a template so you can see how everything works in the Editor. 

What We Built

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.

How We Built It

Collection

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

 

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.

 

Data

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

 

Code

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.

Example Code

arrow&v

Example Demonstrates

Coding with Repeaters

Database Collections

To start using Corvid:  Go to the Wix Editor > Dev Mode > Turn on Dev Mode