Ajax Search Pro Knowledge Base
Buy Ajax Search Pro!DocumentationGet SupportDevelopment
  • Knowledge Base
  • Safe Coding Guideline
  • Hooks
    • Filters
      • Query & Output
        • asp_query_args
        • asp_query_{type}
        • asp_cached_content
        • asp_pre_get_front_filters
        • asp_before_ajax_output
        • asp_shortcode_output
        • asp_print_search_query
      • Keyword Suggestions
      • Search Results
        • asp_suggested_phrases
        • asp_results
        • asp_cpt_results
        • asp_buddyp_results
        • asp_attachment_results
        • asp_comment_results
        • asp_blog_results
        • asp_terms_results
        • asp_peepso_group_results
        • asp_peepso_activities_results
        • asp_only_keyword_results
        • asp_only_non_keyword_results
        • asp_result_groups
      • CSS & JS
        • asp_load_js
        • asp_load_css
        • asp_load_css_js
      • Template & Output
        • asp_icl_t
      • Index Table Related
        • asp_index_on_save_stop
        • asp_indexing_keywords
        • asp_indexing_string_pre_process
        • asp_indexing_string_post_process
        • asp_post_content_before_tokenize_clear
        • asp_post_content_before_tokenize
        • asp_post_excerpt_before_tokenize
        • asp_post_title_before_tokenize
        • asp_file_contents_before_tokenize
        • asp_post_permalink_before_tokenize
        • asp_index_terms
        • asp_post_custom_field_before_tokenize
        • asp_index_cf_contents_before_tokenize
        • asp_index_before_shortcode_execution
        • asp_index_after_shortcode_execution
    • Templating
      • Filter layouts Templating
      • Result Templating
    • Constants
  • Frontend Filters
    • Taxonomy Filters
      • Restricting results to the same category as the current post object
      • How to automatically check/select filter values based on the archive page?
    • Frontend filters API
  • Tips & Miscellaneous
    • Divi
      • Divi Blogs Live Search and Filter
    • Jet Engine
      • Jet Engine Listing Grid Live Search and Filter
      • Searching Jet Engine Custom Meta Storage fields
    • Tutorials
      • PDF results thumbnails
      • Demo setup: Staff search and Filter
      • Demo Setup: WooCommerce Search
      • Demo setup: WooCommerce Shop Search and Filter
      • Demo Setup: Events Search – Events Manager
      • Demo Setup: Events Search – The Events Calendar
      • Compact ‘pop-out’ search bar placement on specific pages only
      • Index Table – Indexing ACF repeater field titles and contents
      • Change Suggested Phrases conditionally
      • How to add shortcode to the results content?
      • How to add variables to the “redirect to url” or the “show more url”?
      • Indexing Shortcodes within custom field contents
    • Post Types
      • Index Table - Indexing child post contents to parent
      • Limit results to specific post IDs only
      • Filter posts (or CPT) which user can’t access
      • Restricting results by user Groups using the Groups plugin by itthinx
      • Limiting results to specific posts by parent ID
      • Limit results to current page children
      • Excluding posts or CPT by parent ID(s)
      • Searching posts, pages (or any CPT) by specified keywords only, nothing else
      • Showing the post type name in result title or content
      • Searching within given categories/taxonomy terms only
      • Search only in the same category as the current post or page (single page)
      • Search only within the current category (or any taxonomy) archive
      • Filtering pages by page template
    • Taxonomy Terms
      • Displaying taxonomy name in taxonomy term results
      • Limiting taxonomy term results to specific term IDs only
    • WooCommerce
      • Displaying On Sale products only in WooCommerce
      • Ordering product by stock status
      • Making a product in-stock & out of stock filter
      • Add to cart button for Vertical and Horizontal results
      • Get formatted price in result title or in content
      • Showing products in-stock only
      • Showing in-stock and backorder products only
      • Excluding hidden catalog products
      • Showing featured products first
      • How to search products & product SKU?
      • How to search Products by variation SKUs?
      • Search product attributes
      • How to search users by city, state, zip code… ?
    • Compatibility
      • WPML Compatibility issues and fixes
    • Files & Media
      • Searching Image EXIF metadata
    • Other
      • Restrict results from the current author archive page
      • Presetting search options via a custom URL
      • Matomo analytics tracking integration
      • Replace search keywords (whole words)
      • Replace or remove characters from search phrase
      • Adding spaces in search phrase between alphabetics and numbers
      • How to change the results URL to something else?
      • Numbering the results
      • How to use the search without the live ajax feature, as a regular search?
      • Empty search input field on the search results page
      • Singular and Plural keywords index
  • Other
    • SearchQuery
    • REST API
    • Building a custom REST API
    • Javascript API
    • Javascript Hooks
      • asp_redirect_url
      • asp_search_data
      • asp_live_load_html
      • asp_search_html
      • asp_compact_width
    • Theme Functions
Powered by GitBook
On this page
  • Prerequesites
  • Configuration
  • Step 1 – Choosing the Event post type to search
  • Step 2 (optional) – Loading the theme
  • Step 3 – Filters box visibility
  • Step 4 – Event date filters
  • Step 5 – Location filter (optional + custom code)
  • Step 6 – Event Category filter
  • Step 7 – Date in results content
  1. Tips & Miscellaneous
  2. Tutorials

Demo Setup: Events Search – Events Manager

PreviousDemo setup: WooCommerce Shop Search and FilterNextDemo Setup: Events Search – The Events Calendar

Last updated 1 year ago

This tutorial will guide you through all the steps to re-create the example when using the plugin. This tutorial is also available for the plugin users.

Prerequesites

All you need is a search instance created (working search bar). If you don’t know what that is, check out:

Configuration

Follow the steps below to recreate the exact same layout as seen on the demo.

Step 1 – Choosing the Event post type to search

Under the General Options -> Sources panel, choose the Events (event) custom post type. In the demo setup we use nothing else, but that post type.

Events Manager - Event post type selection

Step 2 (optional) – Loading the theme

Any theme will work with this tutorial – the demo example uses the Underline Blue Vertical. To load that theme, go to the Theme Options panel and choose it from the list.

Step 3 – Filters box visibility

Under the Frontend search settings -> General panel change the following options:

  • Show search settings switch on the frontend? (optional) – OFF

  • Set the search settings to visible by default? – ON

  • Search settings position – Block or Custom

  • Column Layout – Column

Step 4 – Event date filters

The Event Manager plugin stores the event dates in a datetime format in the _event_start and _event_end custom fields.

Lets make both of the date filters under the Frontend Search Settings -> Custom Fields panel. Use the screenshots below as reference on how to create them.

Step 5 – Location filter (optional + custom code)

The Event Manager plugin stores the Locations ins a custom database table, but their API is very professional, thus it is possible to use it to get the locations as well.

First, let’s make a custom field filter on the _location_id custom field, which stores the ID to the locations.

  • Custom field: _location_id

  • Type: Dropdown

  • Dropdown values:

This will get the location IDs, but we need the titles as well on the front-end. For that, a custom code is required.

add_filter('asp_pre_get_front_filters', 'asp_locations_pre_get_front_filters', 10, 2);
function asp_locations_pre_get_front_filters($filters, $type) {
  if ( $type == 'custom_field' ) {
  	foreach ($filters as $k => $filter) {	
        if ( $filter->data['field'] == '_location_id' && class_exists('EM_Locations') ) {
          $location_ids = array();
          $select_all = false;
          foreach ( $filter->get() as $kk=>$item ) {
            if ( $item->value == '' ) {
              $select_all = $item->label;
            } else if ( is_numeric($item->value) ) {
              $location_ids[] = $item->value;    
            }
          }
          $filter->remove();
          
          $locations = EM_Locations::get( array('location'=>array_unique($location_ids)) );
          $locarr = array();
          if ( is_array($locations) && count($locations) > 0 ) {
            foreach ( $locations as $loc ) {
              if ( isset($locarr[$loc->location_town]) ) {
                $locarr[$loc->location_town] .= '::' . $loc->location_id;
              } else {
                $locarr[$loc->location_town] = $loc->location_id;
              }
            }
            
            if ( $select_all !== false ) {
              $filter->add(array(
                'value' => '',
                'label' => $select_all,
              ));
            }
            
            ksort($locarr);
            foreach ( $locarr as $key => $loc ) {
              if ( !empty($key) && !empty($loc) )
                $filter->add(array(
                  'value' => $loc,
                  'label' => $key,
                ));
            }
          }
          $filters[$k] = $filter;
        }
  	}
  }
  
  return $filters;
}

Step 6 – Event Category filter

The Event Category is a taxonomy, so it is time to create a taxonomy term filter as well. Go to the Frontend Search Settings -> Categories & Taxonomy Terms panel and choose the tribes_event – tribe_events_cat taxonomy, then drag the ‘Use all..’ option to use all of them.

Step 7 – Date in results content

Under the Advanced Options -> Content panel, look for the Advanced Description Field option.

Enter this value there to have the exact same layout as the demo:

That is it. After saving the options and placing the search shortcode somewhere on your site, you should be seeing the same search layout as seen on the demo page.

Theme Selection under Ajax Search Pro
Filter box visibility and layout
Events starting after filter
Events ending before filter

Event category selection
Event category display mode

This field can be used to display custom field values within the results content, using the {field_name} syntax. For more detailed intofmation, please check the .

Advanced description field - Events manager dates
What is this, and where do I put this custom code?
Advanced Title and Description field Documentation
Events Search Demo
Events Manager
The Events Calendar
Ajax Search Pro Documentation – Getting Started