{"id":47184,"date":"2025-03-04T15:12:31","date_gmt":"2025-03-04T15:12:31","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=47184"},"modified":"2025-07-03T08:16:49","modified_gmt":"2025-07-03T08:16:49","slug":"how-to-use-sorting-filter-with-repeater-field","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-use-sorting-filter-with-repeater-field\/","title":{"rendered":"How to Use Sorting Filter with Repeater Field"},"content":{"rendered":"\n

In this tutorial, we will describe how to use the Sorting Filter <\/strong>to sort the repeater items. <\/p>\n\n\n\n

In our example, we will create a \u201cTour Packages\u201d repeater field and will filter the packages by their name, price, and tour duration.<\/p>\n\n\n\n

Creating Repeater<\/h2>\n\n\n\n

First, you need a \u201cRepeater\u201d field created for default or custom post types<\/a>, Custom Content Types<\/strong><\/a>, taxonomies<\/a>, relations<\/a>, users (in meta boxes)<\/a>, and options pages<\/a>. It can be crafted with the JetEngine <\/em>and ACF <\/em>plugins.<\/p>\n\n\n\n

For our case, we go to the WordPress Dashboard > JetEngine > Post Types <\/em><\/strong>and open a \u201cTours\u201d CPT<\/strong><\/a> to edit it.<\/p>\n\n\n\n

We unroll the Meta fields <\/strong>tab and press the \u201cNew Meta Field<\/strong>\u201d button.<\/p>\n\n\n\n

We fill in the Label <\/strong>and Name\/ID<\/strong> and pick the \u201cRepeater\u201d Field type<\/strong>.<\/p>\n\n\n\n

By clicking the \u201cNew Repeater Field<\/strong>\u201d button, we add three fields: \u201cPackage Name\u201d with \u201cText<\/a>\u201d type, \u201cPrice\u201d with \u201cNumber<\/a>\u201d type, and \u201cDuration\u201d with \u201cNumber\u201d type.<\/p>\n\n\n\n

Then, we save the settings by pressing the \u201cUpdate Post Type<\/strong>\u201d button.<\/p>\n\n\n\n

\"custom<\/a><\/div>\n\n\n\n

Filling in the Repeater Fields<\/h2>\n\n\n\n

Next, we head to the CPT<\/strong> tab on the WordPress Dashboard<\/strong> and create a \u201cBali Tour\u201d custom post.<\/p>\n\n\n\n

We add four tour packages (repeater items) by filling in the repeater fields and save the post.<\/p>\n\n\n\n

\"repeater<\/a><\/div>\n\n\n\n

Creating a Listing with the Repeater Source<\/h2>\n\n\n\n

Go to WordPress Dashboard > JetEngine > Listings\/Components <\/em><\/strong>and push the \u201cAdd New Item<\/strong>\u201d button.<\/p>\n\n\n\n

Choose the \u201cRepeater Field<\/a>\u201d as the Listing source<\/strong>, pick the post type in the From post type<\/strong> field, choose the Repeater source <\/strong>(\u201cJetEngine\u201d in this case and set the field name in the Repeater field <\/strong>(or Repeater option <\/strong>if it’s from the JetEngine<\/em> Options Page<\/strong>).<\/p>\n\n\n\n

Afterward, enter the Listing item name<\/strong>, select the Listing view<\/strong> (\u201cBlocks (Gutenberg)\u201d, for example), and hit the \u201cCreate Listing Item<\/strong>\u201d button.<\/p>\n\n\n\n

\"listing<\/a><\/div>\n\n\n\n

In the editor, display the values from the repeater fields, using the Dynamic Field<\/strong><\/a>. Select the \u201cRepeater Field\u201d SOURCE <\/strong>and enter the field names within the \u201cRepeater\u201d to the OBJECT FIELD \/ META FIELD \/ REPEATER KEY \/ COMPONENT PROP<\/strong> field.<\/p>\n\n\n\n

\"dynamic<\/a><\/div>\n\n\n\n

Customize the Listing template<\/strong> according to your needs and save the settings.<\/p>\n\n\n\n

Creating a Repeater Query<\/h2>\n\n\n\n

Custom query creation is mandatory to filter the repeater items.<\/p>\n\n\n\n

Navigate to the WordPress Dashboard > JetEngine > Query Builder <\/em><\/strong>tab and press the \u201cAdd New<\/strong>\u201d button.<\/p>\n\n\n\n

Enter the Name <\/strong>and choose the \u201cRepeater Query<\/a>\u201d Query Type<\/strong>.<\/p>\n\n\n\n

\"jetengine<\/a><\/div>\n\n\n\n

Then, scroll down and set the query source. In our case, we pick the \u201cJetEngine Meta Field\u201d Source <\/strong>and select the required JetEngine Field<\/strong>.<\/p>\n\n\n\n

If you want to display repeater items on the Single Post page, leave the Object ID<\/strong> field empty. <\/p>\n\n\n\n

To display repeater items on a static page, enter the post ID in the Object ID<\/strong> field to pull them from the specified source.<\/p>\n\n\n\n

That\u2019s all about the required query settings. Now, you can set additional settings as you wish.<\/p>\n\n\n\n

For instance, you can define a custom order for items before applying the sorting filter.<\/p>\n\n\n\n

To do this, in the Order & Order By<\/strong> section, we press the \u201cAdd new sorting parameter<\/strong>\u201d button.<\/p>\n\n\n\n

We set the \u201cRepeater Field\u201d option in the Order By<\/strong> field, enter the \u201cPackage Name\u201d field name in the Field Name\/ID<\/strong> field, and pick the \u201cAlphabetical (a, b, c)\u201d Ordering Type <\/strong>and the \u201cFrom highest to lowest values (3, 2, 1; c, b, a)\u201d Order<\/strong>.<\/p>\n\n\n\n

In that way, the repeater items will be ordered in the reverse alphabetical order by the text in the \u201cPackage Name\u201d field (by the titles).<\/p>\n\n\n\n

\"jetengine<\/a><\/div>\n\n\n\n

Placing the Sorting Filter and Listing Grid on the Single Post Page<\/h2>\n\n\n\n

A custom Single Post page template can be created with the JetThemeCore <\/em>plugin, as described in the How to Create a Single Template for Custom Post Type<\/strong><\/a> article.<\/p>\n\n\n\n

Open a Single Post template in any editor. You can add two columns to the layout.<\/p>\n\n\n\n

In the second column, we add the Listing Grid<\/strong><\/a> and set the just-created Listing <\/strong>in the General <\/strong>settings tab.<\/p>\n\n\n\n

Then, unroll the Custom Query <\/strong>tab, activate the Use Custom Query <\/strong>toggle, and set the just-built CUSTOM QUERY<\/strong>.<\/p>\n\n\n\n

\"listing<\/a><\/div>\n\n\n\n

Next, place the Sorting <\/strong>filter on the page and pick the \u201cListing Grid\u201d option in the THIS FILTER FOR <\/strong>field in the General <\/strong>setting tab.<\/p>\n\n\n\n

Unfold the Sorting List<\/strong> tab, where you can set the sorting parameters.<\/p>\n\n\n\n

To set the sorting by the \u201cText\u201d field values, select the \u201cMeta key\u201d option in the ORDER BY <\/strong>dropdown.<\/p>\n\n\n\n

For example, we adjust two criteria to sort by title with such settings:<\/p>\n\n\n\n