Documentation Menu

• Home
• Documentation
• Help Center
• Setup & Embedding
• How do I embed a booking calendar on a page in WordPress?

How do I embed a booking calendar on a page in WordPress?

You can embed a booking calendar on a WordPress page using a block (Gutenberg), a shortcode, or a page builder module. With WP Booking System, the most reliable method is the shortcode, because it works in any editor. You embed by selecting a calendar ID, optionally attaching a form ID (so visitors can submit bookings), then testing the page to confirm the calendar loads, bookings submit, and dates update correctly.

On this page

1. What you’ll need
2. Choose your embed method
3. Step 1: Get your Calendar ID and (optional) Form ID
4. Step 2: Embed with Gutenberg (block)
5. Step 3: Embed with a shortcode (works everywhere)
6. Step 4: Embed with a page builder (Elementor/Divi/etc.)
7. Step 5: Test the booking flow
8. Optional: Show availability only (no bookings)
9. Common issues (and quick fixes)
10. Best practices (SEO + conversions)
11. Mini FAQ

What you’ll need

• A WordPress page (or post) where you want the calendar to appear
• At least one calendar created in WP Booking System
• (Optional) A booking form created in WP Booking System if you want visitors to submit bookings

Choose your embed method

• Gutenberg block: easiest if you use the default WordPress editor and prefer a visual setup.
• Shortcode: most flexible and works in Gutenberg, Classic Editor, widgets, and most builders.
• Page builder widget/module: convenient if you build pages with Elementor/Divi/Avada/Bricks/etc.

If you are unsure, use the shortcode method first. It is the quickest way to confirm your calendar and form are configured correctly.

Step 1: Get your Calendar ID and (optional) Form ID

To embed a specific calendar, you need its calendar ID. If you want visitors to make bookings, you also need a form ID to attach the booking form to the calendar.

1. Go to WP Booking System → Calendars and note the ID of the calendar you want to embed.
2. If you want bookings, go to WP Booking System → Forms and note the ID of the form you want to use.

Tip: Each resource should have its own calendar (for example: Apartment A, Room 1, Car 1), so availability stays separate.

Step 2: Embed with Gutenberg (block)

1. Go to Pages → open the page where you want the calendar.
2. Click the + button to add a block.
3. Search for “booking” or “calendar” and select the WP Booking System calendar block (if available in your setup).
4. Select the calendar you want to display and attach a form if you want to accept bookings.
5. Update/Publish the page.

If you do not see the block, use the shortcode method below, which always works.

Step 3: Embed with a shortcode (works everywhere)

The shortcode method works in Gutenberg, Classic Editor, widgets, and most page builders. You paste a shortcode into a Shortcode block (or into a builder’s shortcode/code element), then publish the page.

Basic shortcode (calendar + booking form)

[wpbs id="1" form_id="1"]

Replace id with your calendar ID, and form_id with your form ID. If you omit form_id, the calendar will display availability only.

Common shortcode options you may want

• Hide the title: title=”no”
• Hide the legend: legend=”no”
• Show multiple months: display=”2″ (or 3, 4, etc.)
• Change the legend position: legend_position=”top” (or “side”, “bottom”)
• Prevent double bookings: auto_pending=”yes”

Example shortcode (practical configuration)

[wpbs id="1" form_id="1" title="no" legend="yes" legend_position="side" display="2" auto_pending="yes"]

Where to paste the shortcode

1. In Gutenberg, add a Shortcode block and paste the shortcode.
2. In Classic Editor, paste the shortcode in the editor (Text view is safest).
3. In builders, use a Shortcode or Code element and paste the shortcode.

Step 4: Embed with a page builder (Elementor/Divi/etc.)

If your builder has WP Booking System widgets/modules, use them. If not, use the builder’s shortcode element and paste the WPBS shortcode.

Elementor (recommended approach)

1. Edit the page with Elementor.
2. Search for a WP Booking System widget, or use a Shortcode widget.
3. If using the shortcode widget, paste your shortcode and update the page.

Divi/other builders

1. Add a Code or Shortcode module/element.
2. Paste the shortcode and save/update the page.

Step 5: Test the booking flow

1. Open the page in an incognito/private window.
2. Select a date range (or single date if your setup uses single-day selection).
3. Submit a test booking using a real email address.
4. Confirm the booking appears in the admin area and the calendar updates as expected.

If you enabled auto-blocking (auto_pending=”yes”), confirm the booked dates are no longer bookable.

Optional: Show availability only (no bookings)

If you only want to display availability (and not allow online booking submissions), embed the calendar without attaching a form_id.

[wpbs id="1"]

• Use this for “Check availability” pages.
• Use this if you accept bookings by phone/email and only want to show open dates.

Common issues (and quick fixes)

The calendar does not show on the page

• Make sure the calendar ID in the shortcode matches an existing calendar.
• Switch to the shortcode method even if you tried a block or widget.
• Temporarily disable caching/minification plugins and test again.

The calendar shows, but bookings cannot be submitted

• Confirm you attached a form using form_id=”X”.
• Confirm the form is published/configured and includes the required fields.
• Try a different theme temporarily to rule out a styling or JS conflict.

Bookings submit, but dates are still available (double booking risk)

• Enable auto-blocking by using auto_pending=”yes” in your shortcode options.
• If you use Inventory, confirm the inventory rules are set correctly for the calendar.
• If you sync external calendars (iCal), confirm sync is active and running.

The calendar looks broken or misaligned

• Theme CSS can override plugin styles; test with a default theme to confirm.
• Disable aggressive CSS optimization/minification and retest.
• Fix styling with small targeted CSS overrides (avoid broad rules that affect all tables/forms).

Best practices (SEO + conversions)

• Embed the calendar on a dedicated page such as /booking/ or /book-now/ and link to it from your main navigation.
• Add a short intro above the calendar that explains what is being booked and what happens after submission.
• List key rules above the calendar (minimum stay, check-in/check-out times, cancellation policy) to reduce low-quality bookings.
• Keep the form short and only ask for the information you truly need to confirm the booking.

Mini FAQ

Do I always need a booking form to embed the calendar?

No. If you embed the calendar without a form_id, it will display availability only and visitors will not be able to submit bookings.

What is the easiest embed method if I use a page builder?

Use your builder’s WP Booking System widget/module if it exists; otherwise, paste the WPBS shortcode into a shortcode/code element.

How do I show two months at once?

Use the display parameter in your shortcode (for example: display=”2″) to show two months in the calendar view.