Shortcode Management
Note: While shortcodes are available, the recommended way to display your route filter and results is by using our Gutenberg Blocks. They are easier to use and require no configuration. Please see the Configuration & Setup guide for more details.
Shortcodes are available for users of the Classic Editor or for embedding routes into other plugins or page builders. You can add them to any page, post, or widget that processes shortcodes.
[route_filter_form] & [rfcc_filter_results]
To create a complete, interactive route filtering page, you need to use these two shortcodes together on the same page.
[route_filter_form]: This shortcode displays the interactive filter controls (sliders, dropdowns, etc.).[rfcc_filter_results]: This shortcode displays the list of routes that match the user's filter criteria.
Usage Example
Create a new page and add the following shortcodes to the content area. They must both be on the same page to function correctly.
[route_filter_form]
[rfcc_filter_results]
[rfcc_route_card]
This shortcode is used to display a single, detailed route card. It's perfect for embedding a specific route into a blog post or a dedicated page.
Parameters
id(required): The ID of the route you want to display.show_map: Whether to include the interactive route map. Can betrueorfalse. Defaults totrue.show_description: Controls the visibility of the route description. Can beauto(uses global setting),true, orfalse.show_external_links: Controls the visibility of links to services like Strava. Can beauto,true, orfalse.compact: Set totruefor a smaller, more compact layout with fewer details. Defaults tofalse.width: A CSS value for the card's width (e.g.,100%,500px). Defaults to100%.map_height: A CSS value for the map's height (e.g.,300px). Defaults to300px.
Basic Example
Displays a standard card for the route with ID 123.
[rfcc_route_card id="123"]
Advanced Example
Displays a compact card for route 456, hiding the map and setting a specific width.
[rfcc_route_card id="456" show_map="false" compact="true" width="50%"]