What should our website have? Some of you maybe will be answering high-quality content, or perhaps you will be answering strong brand identity. Well, those aren’t the wrong answers. But, in our opinion, everything will be useless if a website doesn’t have helpful navigation.
Navigation contributes to user experience; it helps you allow users to access the information they want as quickly as possible by presenting an enjoyable, intuitive layout while increasing ease of use. Providing a feature that allows users to sort contents in alphabetical order is one of the ways for our website to have helpful navigation.
This article will show how to allow users to sort posts alphabetically in Elementor.
Steps to Allow Users to Sort Posts in Alphabetical Order 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 plugin—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 that 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:
- A – Z
- Z – A
Here, we removed the unused sorting list and edited the sorting list’s title.
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.
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 Posts Widget
Next, we will apply the instruction in Step 3. As we mentioned in Step 3, 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 set it to Title. Afterward, go to the Order option and select the order to ASC (ascending).
That’s it. Now, you can sort the posts in alphabetical 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
Alphabetical sort is best when you have an enormous amount of data, in this case, posts. This article shows how to allow users to sort posts alphabetically in Elementor. With the help of the Sorting Filter widget by JetSmartFilters, creating sort posts alphabetically is very easy and makes the filtering user oriented.
JetSmartFilters have 17 filtering widgets. Here are some filter types offered by JetSmartFilters.
