Custom Sort

This document explains how to use the custom sort filter available in the Divi FilterGrid plugin.

Divi FilterGrid has a Sorting section in the module’s Content tab that allows you to turn sorting on and off, choose the position of the sort dropdown, and enable sort for date, title, default query sort, etc. These options will be displayed in a dropdown followed by an ascending/descending icon, allowing users to control both the “orderby” and the “order” separately.

If you prefer to combine the order and orderby into one dropdown and remove the order icon, you can add the custom code below to your child theme’s functions.php file:

For this to work, the Show Sort Dropdown toggle in the module’s Content tab -> Sorting section must be turned on. You’ll also need to set the module’s CSS ID to “custom-sorting” so this only applies to Divi FilterGrid modules with that ID. The CSS ID can be added in the module’s Advanced tab. If you want this to apply to all Divi FilterGrid modules, remove the if statement completely (delete lines 4 and 31).

In the code above, the data-value for each option must have a value that matches an available WordPress orderby parameter. The value “default” can also be used. Setting the option’s data-value to “default” will order the results by the selected Order By option in the module’s Query section. For example, posts can be ordered by a custom field in the module’s settings. This option can then be added to the sort dropdown by setting an option’s data-value to “default”.

The data-order-value for each option must have a value of either “ASC” (ascending) or “DESC” (descending). The code above will also use the Sort Text field from the module’s Sorting section for the dropdown placeholder text. To override this, you can replace $props[‘orderby_text‘] with the text you want to use.

Custom Fields

Lines 16 and 17 show how to add a custom field sort option. For custom fields, the data attributes needs to be set as follows:

• data-value: meta_value
• data-order: ASC or DESC
• data-cf: enter the custom field name here
• data-cf-type: enter the custom field data type here. CHAR for characters. NUMERIC for numbers. View the WP codex for all possible data types.