Main Shortcode

Simple Bike Rental Pro provides various shortcodes to integrate the booking system into your WordPress pages and posts.

Start by adding the required shortcodes to the appropriate pages:

Booking Form

[simpbire_bike_rental]

Displays the front-end booking form, allowing users to rent bicycles.

You can add this shortcode to a public page, for example, "Book a bicycle," or create a new page in WordPress and paste the shortcode into the editor.

The module can be positioned wherever you like; it adapts to the width of the container. In this example, I placed it in a 400px-wide sidebar. Here's a preview of the form:

Once inserted, the module will automatically appear in the frontend and display:

Select the type of rental - daily, hourly, or multi-day
The calendar for the date (and time, if needed)
Available bicycles for the selected period
Available accessories (optional, must be enabled in the settings)
Fields for the customer's name, email, and phone number

Note: The "multi-day" rental type and accessories are only available in the Pro version.

Centered form layout

Starting with version 1.5.2, the main shortcode also supports a centered, more modern frontend layout using the layout="centered" attribute.

[simpbire_bike_rental layout="centered"]

This variant is particularly useful for:

Booking pages
landing pages
Full-width layouts
Modern themes with large containers

The centered layout improves the arrangement of the bike cards and the readability of the form. Here is an example of the centered layout:

It also adapts perfectly to mobile devices and tablets.

Shortcode: Two-Column Layout

Starting with version 1.4.1, a new shortcode is available that is designed to improve the booking experience, especially on sites that manage a large number of bicycles.

How to use it

To use the new layout, insert the shortcode on a page:

[simpbire_bike_rental_split]

Layout structure

The layout is organized into two columns:

Left column: Contains the controls (rental type, dates, and user data)
Right column: Displays the grid of available bikes

This layout makes the booking process clearer and faster, and the available options are always visible.

Bike card behavior

The card behavior changes automatically based on the dates selected.

No dates selected – catalog mode. The bikes are displayed as a browsable catalog: clicking on a card opens the bike's details page (only if the Detail URL has been entered in the bike's settings).

With dates selected – booking mode. When the user selects dates:

The grid is filtered to show only the bikes available for the selected date.
The cards no longer link to the detail page; clicking on a card directly selects the bike. This way, the layout automatically transforms into a quick booking tool.

When to use it

This layout is particularly suitable for websites with a large number of bicycles, for rental companies with multiple categories or models, or for those who want to display all options at once. This configuration keeps the layout responsive, stacking the columns correctly on mobile devices.

Note: You can test this layout on the website's demo page.

Booking pending

[simpbire_pending_confirmation]

This shortcode is only used when online payments (Stripe) are disabled. In this case, the booking confirmation is sent via email.

With this shortcode, we show a message to users who have sent a booking but have yet to confirm it by clicking on the link sent to their email address.

Create a page called "Pending confirmation" (or similar)
Add the shortcode and set this page in the plugin settings as Post-booking redirect page.

After submitting the booking form, users will be redirected to this page and will see a message similar to the following:

Thank you for your booking! We have sent you an email with a link to confirm your booking. To complete the rental, click on the link shortly.

This default message works well in most cases. If you prefer a personalized message, you can ignore this shortcode and simply add your content to the page.

Booking confirmation

[simpbire_token_messages]

This shortcode is also used only when online payments are disabled. It manages and displays messages related to the verification of the confirmation token sent via email.

Create a page titled "Booking Confirmation" (or a similar name).
Add the shortcode and configure this page in the plugin settings under Confirmation Messages Page.

When users click the confirmation link in the email, they will be directed to this page. Depending on the outcome, you will see either a confirmation or an error message.

Bicycle grid

[simpbire_bike_grid]

The shortcode '[simpbire_bike_grid]' displays a catalog of all bicycles. Each tab includes:

image of the bicycle (clickable if a details page is available)
name
daily price
"Check availability" call-to-action

The call-to-action (and the image) automatically point to the link set in the details_url field of the bicycle. If 'details_url' has not been set, the button is shown in the disabled version and the image will only have the link to the image file.

Number of columns

You can control how many columns to use on desktop with the columns attribute:

[simpbire_bike_grid columns="4"]

Recommended values:

3 for a "comfortable" grid with larger cards
4 for a more compact layout, useful if you have many bikes

Note: the layout is responsive. On smaller screens, the cards automatically adapt (tablet: 2 per row, mobile: 1 per row).

Filter by bicycle type

If you want to show only a specific type of bicycle, use the 'type' attribute. You must enter exactly the name you used for the "bicycle type" field. Example:

[simpbire_bike_grid columns="4" type="e-bike"]

Values:

type="all" (default) shows all bicycles
type="..." shows only those with that value in the "bicycle type" field

Important requirement: container width

To obtain a pleasant grid (especially with 3–4 columns) it is important to insert the shortcode in a full-width section or in any case in a fairly large container.

Many WordPress themes, especially the "default" ones, apply a layout with central content and limited width. In those cases:

with columns="4" the cards can become too narrow
buttons and texts can wrap more than necessary

Practical tip: if your editor or page builder allows it, use a "Full width" section (or equivalent) for the page hosting the grid.

Image display and object-fit

By default, bicycle images in the grid use the following CSS:

.sbr-bike-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

The cover value ensures that the image always fills the available space, but depending on the aspect ratio of your bicycle photos, some parts of the image may be cropped.

If you prefer to always show the entire bicycle, you can change object-fit to contain:

.sbr-bike-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  display: block;
}

When using contain, empty space may appear around the image. If needed, you can define a custom background color for the image area:

.sbr-bike-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  display: block;
  background-color: #ffffff !important;
}

The best option depends on the format and proportions of the images used in your bicycle catalog.

Link the details page

To use the booking flow "catalog → single bike page" correctly, each bicycle must be linked to its own detail page.

This connection is managed via the bicycle details URL setting in the bicycle configuration.

How it works

The bicycle grid shortcode [simpbire_bike_grid] displays a list of bicycles with a "Check availability" button.

When a details URL is set for a bicycle, that button (and the image) link to the specified page.

That page must contain the shortcode of the single bicycle: [simpbire_bike id = "X"]

Where X is the ID of the corresponding bicycle. You can find the ID in the bike table in admin (click in the menu: Bicycles).

Required configuration

To make this flow work correctly:

Create a dedicated page for the bicycle (or for each type of bicycle).
Enter the shortcode[simpbire_bike id="X"] on that page.
Open the bicycle settings in the admin panel.
Set the URL details field to the URL of the newly created page.

Note: If the details URL is not set, the "Check availability" button will be disabled.

Single bike page

[simpbire_bike id="4"]

Insert this shortcode on a page (or in a CPT) to display the bicycle details and the booking form. The bicycle ID can be found in the ID column of the table in "Bicycles".

Attributes

id (required) ID of the bicycle to be shown (it is the ID saved in the bicycle table of the plugin).
show_calendars (optional) Shows the mini-availability calendars:
- true to show them
- false to not show them (default)
months (optional) Number of months to display in mini-calendars when show_calendars="true"

Example:

[simpbire_bike id="4" show_calendars="true" months="3"]

When to use it

This shortcode is ideal when you want a "catalog → detail" flow, for example:

the user sees the grid with the bicycles [simpbire_bike_grid]
click on "Check availability"
they arrive at the single bike details page and the booking form
if active, mini-calendars will also be visible

Note on mini-calendars

The mini-calendars are a visual aid to understand availability in the coming months at a glance. They do not replace the final check carried out by the booking form: availability is always checked when the request is sent.

Practical tip: one page for each bike

To get a clean and tidy experience, create a dedicated page (or CPT) for each bike and set its URL in the bike's details_url field. In this way, the user will be automatically taken from the grid to the correct page.

Mini availability calendar

[simpbire_mini_calendar bike_id="1" months="3" legend="1"]

This shortcode displays a compact monthly grid showing when a specific bike is available. It works in posts, pages and widget areas.

Attributes

bike_id (required) – The ID of the destination bike (you can see it on the page with the list of bicycles in WP Admin).
months (default: 1) – Number of consecutive months to display.
start (default: first day of the current month) – Start month in the format YYYY-MM-01 (for example, 2025-10-01).
legend (default: 1) – Show the legend (1) or hide it (0).

You can consult this page to see some examples of use.

Notes

The initial value must point to the first day of the desired month (YYYY-MM-01).
If nothing appears, double-check bike_id and that the bike exists in your catalog.
You can insert multiple calendars on the same page for different bicycles.