Multiple Filters

Filtering multiple instances of Ajax Load More

In this example:

Ajax Load More will filter multiple instances by different content types and parameters.

Filtering by multiple instances requires each instance to have a unique id shortcode parameter. The unique id must be referenced as the data-target='{unique_id}’ attribute in the filter navigation.

Note: Multiple filters are also supported with the Filters add-on.



      HTML

      Filtering is achieved by passing updated shortcode parameters as data attributes to the ajaxloadmore.filter public JavaScript function.

      <!-- Filter #1 -->
 <ul>
   <li>
      <button data-target="filter-1" data-repeater="template_41" data-post-type="portfolio" data-button-label="More Work">Work</button>
   </li>
   <li>
      <button data-target="filter-1" data-repeater="template_41" data-post-type="post" data-button-label="More Articles">Articles</button>
   </li>
</ul>
<!-- Filter #2 -->
<ul>
   <li><button data-target="filter-2" data-custom-args="post_parent:1926" data-post-in="" data-button-label="Load More Examples">ALM Examples</button></li>
   <li><button data-target="filter-2" data-custom-args="" data-post-in="4716, 18940, 12202, 3112, 14506, 6558, 4137, 9713, 169781, 3263, 8946" data-button-label="Load More Add-ons">ALM Add-ons</button></li>
</ul>
      HTML

      When filtering multiple instances your Ajax Load More ID must start with a letter – filtering will fail when IDs begin with an integer. e.g. id='d92716152‘

      JavaScript

      The JavaScript used in this example can be found in our main Filtering example.

      The following shortcode was used to create the Multiple Filters example.

      Filter #1

      [ajax_load_more id="filter-1" repeater="template_41" post_type="portfolio" scroll="false" posts_per_page="3" button_label="More Work" css_classes="plain-list"]

      Filter #2

      [ajax_load_more id="filter-2" repeater="template_41" post_type="page" orderby="menu_order" custom_args="post_parent:1926" post_in="" scroll="false" posts_per_page="3" button_label="Load More Examples" css_classes="plain-list"]

      Note: When filtering multiple instances your Ajax Load More ID must start with a letter – filtering will fail when IDs begin with an integer. e.g. id=’f92716152′

      The following Template was used to create the Multiple Filters example.