How to Allow Users to Sort Posts by Date in Elementor

Updated: October 7, 2022

People tend to forget what happens in the middle. In psychology, it’s called the primacy and recency effect. Psychology has proved that people remember things that occur at the beginning and the end. In terms of navigation on the website, you should give users the freedom to consume your content (posts) in their way. Providing a feature that allows users to sort content by date is one of the ways for your website to have flexibility for your users.

Commonly there are two types of sort posts by date/time as below:

  • Sort by latest (Chronological Order)
  • Sort by oldest (Reverse Chronological Order)

This tutorial will show you how to allow users to sort posts by date in Elementor.

Steps to o Allow Users to Sort Posts by Date in Elementor

Step 1: Install and Activate JetSmartFilters

Until this article is made, Elementor doesn’t have a feature to sort contents in alphabetical order by default. So, you’ll need the help of a third-party add-on. In this tutorial, we use the Sorting Filter widget by JetSmartFilters add-on.

You can purchase JetSmartFilters for a single plugin or buy a bundle of Crocoblock plugins — download JetSmartFilters on its official website. Please install and activate it once you have downloaded it.

Step 2: Add the Sorting Filter Widget

Go to your Elementor editor. You can create new content or select existing content. In this example, we will create a new page. Alright, let’s get started!

On your WordPress dashboard, go to the Pages -> Add New. Give a title, then click the Edit with Elementor button that will bring you to the Elemento editor.

Select the Sorting Filter widget from the widget panel and then drag and drop it into the canvas area.

Step 3: Edit and Style up the Sorting Filter Widget

We are going to apply some changes to this widget. On the Content settings tab, go to the This filter for option, then set it to Elementor Pro Posts. Once you set the filter to the Elemento Pro Posts, the instruction text will appear. Follow the instruction by copying the text jet-smart-filters query ID we will use later.

You can also edit the Placeholder if you want to.

Next, we move to the Sorting List settings. By default, you will get four sorting lists. In this example, we only need two sorting lists as below:

  • Latest
  • Oldest

Here, we removed the unused sorting list and applied some changes as below:

  • Latest
    • Order By: Date
    • Order: DESC (Descending)
  • Oldest
    • Order By: Date
    • Order: ASC (Ascending)

Step 4: Add the Elementor Posts Widget

Please select the Posts widget from the widget panel and then drag and drop them into the canvas area. Please make sure that you already have some posts on your site.

Note: The Posts widget is only available on Elementor Pro; ensure that you’ve upgraded to the pro version.

As you can see from the image above, by default, you will get three columns and six posts per page, and the posts displayed are ordered by date (recent posts).

First, we will change the number of posts per page. On the Layout settings block, go to Post Per Page and set it to 9.

Step 5: Add the Query ID of the Posts Widget

Next, we will apply the instruction in Step 3 that you need to copy the query ID.

Alright, go to the Query settings block, then find the Query ID option. Paste the query ID that you’ve copied into the Query ID field.

Next, go to the Order by option and make sure that you have already settled it to Date, and for the Order option to DSC (descending).

That’s it. Now you can sort the posts by date order. You can also add the pagination and edit or style up your page as your preference. To see how it worked, publish your page by clicking the PUBLISH button and test it in the new window.

The Bottom Line

This article has shown you how to allow users to sort posts by date in Elementor. With the help of the Sorting Filter widget by JetSmartFilters, creating sort posts by date is very easy and makes the filtering user-oriented.

JetSmartFilters have 17 filtering widgets. Here are some filter types offered by JetSmartFilters.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.