Slider Revolution WP
09.27.2016
Custom Filter Button Order
SPECIAL NOTE: This FAQ is now only applicable to older versions of the plugin.
Now you can customize the order of your filter buttons by dragging the filter options on top of one another with your mouse as shown here:
Version 1.0.7 of Essential Grid introduced a new feature in the Grid’s main settings called “API / JavaScript”. In this section, you can paste custom JavaScript that will be included with the Grid when added to one of your pages.
If you don’t have version 1.0.7 or higher, register the plugin, and then in then click on the Search for Updates button and you’ll be able to automatically update.
Below is an example script that will reorder the filter buttons on the page, based on a custom order that you designate. Each “case” part of the “switch” statement represents the text currently being used for a filter button, in lowercase letters. Add or remove “case” items to the “switch” statement, and edit the text to match a custom filter button order for your particular Grid (make sure to use lowercase letters only).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
(function() { var filters = jQuery('.esg-filter-wrapper'), buttons = [], $this, len, i; filters.children().each(function() { $this = jQuery(this); // edit the items inside this clode block switch($this.text().toLowerCase()) { // button #1 text case 'todas': buttons[0] = $this; break; // button #2 text case 'disney': buttons[1] = $this; break; // button #3 text case 'marvel': buttons[2] = $this; break; // button #4 text case 'sanrio': buttons[3] = $this; break; // button #5 text case 'warner bros': buttons[4] = $this; break; // button #6 text case 'nickelodeon': buttons[5] = $this; break; // button #7 text case 'mattel': buttons[6] = $this; break; // button #8 text case 'outras': buttons[7] = $this; break; } }); len = buttons.length; for(i = 0; i < len; i++) { $this = buttons[i]; if($this) $this.appendTo(filters); } })(); |
After editing the above script to match your custom button order, paste it into the “Custom JavaScript section and click “Save Grid” as shown in the following screenshot:
