• Home
• Documentation
• Help Center
• Setup & Embedding
• How do I add a booking calendar to a WordPress website?

How do I add a booking calendar to a WordPress website?

Adding a booking calendar to WordPress usually takes three steps: install a booking plugin, create a calendar (availability), and embed it on a page (optionally with a booking form). With WP Booking System, you create a calendar, connect it to a booking form, then place it on a page using a shortcode/block or a page builder. After that, test a booking to make sure dates and emails work.

On this page

1. What you’ll need
2. Step 1: Install and activate the plugin
3. Step 2: Create your first booking calendar (availability)
4. Step 3: Create a booking form (the form guests submit)
5. Step 4: Add the calendar + form to a page
6. Step 5: Test your booking flow
7. Optional: Show availability only
8. Common issues (and quick fixes)
9. Best practices (SEO + conversions)
10. Mini FAQ

What you’ll need

• A WordPress site where you can install plugins
• WP Booking System installed and activated
• (Optional) A payment add-on if you want online payments

Step 1: Install and activate the plugin

1. In WordPress, go to Plugins → Add New.
2. Search for WP Booking System.
3. Click Install, then Activate.

Tip: After activation, you should see a WP Booking System menu item in your admin sidebar.

Step 2: Create your first booking calendar (availability)

A “calendar” is the resource you’re booking (for example: Room 1, Apartment A, Service 1).

1. Go to WP Booking System → Calendars.
2. Click Add New.
3. Name the calendar (example: Apartment A).
4. Save.

Set default availability

• If you want it to start as available, keep the default as “available”.
• If you want to manually open dates, start with “unavailable” and enable only the dates you accept.

Screenshot suggestion: Calendar list and the “Add New” button.

Step 3: Create a booking form (the form guests submit)

The form collects details like name, email, phone, and notes.

1. Go to WP Booking System → Forms.
2. Create a new form.
3. Add the fields you need (example: Name, Email, Message).
4. Save.

Best practice: Keep the form short. Every extra field reduces conversions.

Screenshot suggestion: Form builder with basic fields.

Step 4: Add the calendar + form to a page

Embed the booking calendar on the page where visitors will book.

Option A: Gutenberg (WordPress editor)

1. Go to Pages → Add New.
2. Add a shortcode block (or the plugin’s calendar block, if available).
3. Insert your calendar embed (choose calendar + form).
4. Publish.

Option B: Elementor

1. Edit a page with Elementor.
2. Add the WP Booking System widget (or a shortcode widget).
3. Select the calendar + form.
4. Update.

Screenshot suggestion: Page editor showing the calendar embedded.

Step 5: Test your booking flow (don’t skip this)

1. Open the booking page in an incognito/private window.
2. Select a date range.
3. Submit a booking.
4. Confirm the following:

• The booking appears in the admin area.
• Availability updates (if auto-block is enabled).
• Confirmation emails are received.

Tip: Use a real email address you can access.

Optional: Show availability only (no booking form)

If you want a calendar that only displays availability (no booking submission), embed only the calendar without attaching a form.

When this is useful

• “Check availability” pages
• Informational calendars
• Websites that handle bookings by phone/email

Common issues (and quick fixes)

The calendar doesn’t appear on the page

• Make sure you embedded the correct calendar ID/selection.
• Check caching/minification plugins and test with them disabled.
• Try switching themes temporarily to rule out styling conflicts.

Bookings submit, but dates aren’t blocked

• Look for an option like “Auto-block dates” or “Automatically mark booked dates”.
• Confirm the calendar’s default availability rules and booking settings.
• If using external calendar sync, confirm sync is running and configured correctly.

Emails aren’t sending

• WordPress email delivery can be unreliable without SMTP.
• Install an SMTP plugin and test again.
• Check your spam folder and verify the “From” email settings.

Best practices to help SEO + conversions

• Create a dedicated page URL like /booking/ or /book-now/.
• Add a short intro above the calendar explaining what is being booked.
• Clearly mention rules such as minimum stay, working hours, and cancellation policy.
• Add a small FAQ below the calendar (3–5 questions).

Mini FAQ

Can I have multiple calendars (rooms/services)?

Yes. Create one calendar per resource and embed each calendar where you need it, so availability stays separate.

Can I use this with Elementor?

Yes. You can embed the calendar using an Elementor widget (if available) or by placing the shortcode inside Elementor.

Can I accept payments?

Yes, if payments are enabled and configured in your setup (this may require a payment add-on depending on your plan).