Displaying Your Routes on the Frontend

Once you have configured the plugin and added some routes, you need to display the filter and results on a page on your website. There are two methods to do this: using Gutenberg Blocks (recommended) or using Shortcodes.

Method 1: Gutenberg Blocks (Recommended)

If you are using the modern WordPress Block Editor (Gutenberg), this is the easiest and most visual way to set up your route filtering page.

  1. Create a new Page in WordPress (or edit an existing one).
  2. Click the 'Add Block' button (the '+' icon) to open the block library.
  3. Search for "Route Finder" or scroll to the "Route Finder" category.
  4. You will see two available blocks:
    • Route Filter Form: This block displays the interactive filter controls (sliders, dropdowns, etc.).
    • Route Filter Results: This block displays the list of routes that match the user's filter criteria.
  5. Add the Route Filter Form block to your page content.
  6. Add the Route Filter Results block to the same page, usually directly below the form.
  7. Save the page. That's it! The plugin will handle the communication between the form and the results block automatically.

In the editor, it will look something like this:

Method 2: Shortcodes

If you are using the Classic WordPress Editor, or need to place the filters inside another plugin or page builder, you can use shortcodes.

  1. Create a new Page in WordPress (or edit an existing one).
  2. In the text editor, you will need to add two shortcodes:
    • [route_filter_form]: This will display the filter form.
    • [rfcc_filter_results]: This will display the results.
  3. Place these shortcodes one after the other in the page content.
  4. Save the page.

Your page content should look like this:


[route_filter_form]

[rfcc_filter_results]

Important: For the filtering to work correctly, both the form and the results (either as blocks or shortcodes) must be present on the same page.