How to Create a Customizable Recent Posts List
Ever wish your Recent Posts list had just a few more customization options? Well, now you can personalize yours with a Repeater.
The Repeater lets you sort by title, date, view count, likes, comments and more. Choose how many posts to display - add three to your sidebar or take up space with six!
You can also design each element (image, text, button) separately. This means you can customize the layout, color and design of your Recent Posts list to your heart’s desire.
The Final Product
How to Make an Amazing Recent Posts List
First, make sure you’ve added the Blog to your site.
Step 1. Add Content Manager to your site.
Check that the Content Manager is added to your site. Go to the Editor > Add (+) > Content Manager > Add to Site. (If you see the icon on the left side of the Editor, you’ve added it already.) Close the “Create a New Page” window that pops up.
On the left sidebar, click open the Content Manager > Add Content Elements > Dataset. A small Dataset should appear on your page. (This won’t be visible to visitors on your live site.)
Click the Dataset > Settings > Choose a Collection > Blog > Posts. Give it a name, and input the number of items to display in your slideshow. Now your feed will show All Posts.
To customize which posts to display, click on +Add Filter to display only certain types of posts, like featured posts or those with the most views. Add Filter.
5. Click on +Add Sort, and set the Field to “Published Date” and Order to “New → Old”.
Step 2. Add a Repeater to your site and customize it as your Recent Posts list.
Go to Add (+) > Lists & Grids > Repeaters. Choose any Repeater with space for images.
Drag the Repeater to your site. This is the template for your Recent Posts list.
3. Customization time! Click on the Repeater and, in the buttons that appear, adjust the Layout and Animation effects as you like. You can also click on each individual element in the post to edit it or customize the design. Adjust the border, corners, shadow, image filters and more. Play around with different ways to display your posts to suit your style.
4. You can even add or delete the elements -- just note that removing one element in one of the containers will remove the same element in all the containers.
Step 3. Connect the Repeater to your Posts.
1. Click on the Connect to Data icon > Connect a Dataset > your collection. Then, under Components, connect each item: cover image, descriptions (excerpt) and so on. If you’re not sure which component is which, click on it and it will be highlighted in the repeater.
2. Be sure especially to connect the Button to Post Page URL, so your readers can click on it to enter the post. If the Repeater you chose doesn't have a Button to begin with, you can easily select one by going to the left side of the Editor and click Add (+) > Button. Drag and drop it in the container within your Repeater. Now if you return to your Repeater's Dataset settings > Components, connect the Button to Post Page URL.
3. You won’t see your posts appear just yet in the Repeater, since the Editor only displays the template. Once you hit Preview, you’ll be able to see all your posts in the Repeater as it will appear on your live site.
So there you have it - a brand-new Recent Posts list that stands out from the crowd. Feel free to try these tips out and let us know how it went!
Want to play around with more customization and just a little bit of code? Check out Velo by Wix.
