# WordPress

**Mellow Booking** is Mellow's WordPress plugin. It puts the widget on pages with a block or a shortcode, keeps the rental and the keys in one settings page, and makes a WordPress page for each car type. It needs WordPress 6.5 and PHP 7.4.

:::note
The plugin is not in the WordPress.org directory yet. Until it is, ask Mellow for `mellow-booking.zip`, and upload it under **Plugins → Add New → Upload Plugin**.
:::

## Connect the plugin

1. Install and activate **Mellow Booking**.
2. In Mellow, open **Settings · Widget** and the widget. Under **Show more**, press **Copy CMS link**.
3. In WordPress, open **Settings → Mellow Booking** and paste the link into **CMS link**. The plugin reads the rental and the channel from it, and shows them below the box.
4. Copy the live key from the widget's Install card, and the test key from its Test card, into **Live key** and **Test key**.
5. In Mellow, add the WordPress site's address to the widget's **Sites**.
6. Press **Save Changes**. The plugin reads the car types at once.

While **Test mode** is on, every page books with the test key: no car is held and no money moves. The test key also works on a WordPress on your own machine. Switch Test mode off before customers book.

**Terms page** picks a WordPress page with your terms: the driver step then asks the customer to accept them. **Booking page** picks the page with the whole booking, where a car type page's Book goes. Until you pick one, the plugin uses the first published page that holds the booking block or `[mellow_booking]`.

## A booking page

Add the **Mellow booking** block to a page, or the shortcode:

```
[mellow_booking]
```

The block's sidebar sets the same things as the attributes: what to show (the whole booking or a search only), the language, the look, the steps, one page per step, the terms page, the payment (on this page or on the processor's page), where the step is kept, and **Keep the theme's styles out** (`isolate`).

The shortcode takes the root's attributes: `locale`, `preset`, `steps`, `paths`, `url-state`, `pay`, `return-url`, `terms` and `isolate`. Write them with a hyphen or an underscore. The rental and the key always come from the settings page, never from a shortcode.

```
[mellow_booking locale="de" steps="search car-type insurance driver pay done"]
```

Your own markup inside the shortcode goes inside `<mellow-booking>`, as on any site. See [Your own markup](/widget/start#your-own-markup).

## A search on the home page

```
[mellow_search action="/book/" layout="row"]
```

It takes `locale`, `preset`, `action`, `layout` and `car-type`. The search sends the customer to the page in `action`, where the booking shortcode or block sits. With `car-type`, it searches for that one car type and shows its price, as a car type page does.

## Car type pages

The plugin keeps one **Car type** post for each car type the widget sells, under **Car types** in the admin menu. It reads them from Mellow every hour, and at once on **Sync now** on the settings page.

- A post's title is the car type's name in Mellow. Its address is `/car-types/<slug>/`, with the slug from Mellow. **Car type address** on the settings page changes the first part.
- Write the page's own text in the post's editor. Mellow keeps the facts.
- The page shows your text, then the car type's picture, its facts and its features from Mellow, then a search for that car type. Once the customer picks the dates, the search shows the price and **Book**, which opens your booking page with the car type chosen. When it is not free, it says so and offers the other car types for the same dates. A site with no booking page yet keeps the whole booking on the car type's page.
- A car type that leaves the widget in Mellow moves its post to draft. It comes back when the car type does.

## In a theme template

A theme template can hold the shortcode, such as for a page whose layout the editor must not change. This block theme template, `templates/page-reserve.html` in a child theme of Twenty Twenty-Five, shows the booking on the page with the slug `reserve`, in Icelandic and with no extras step:

```html
<!-- wp:template-part {"slug":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
  <!-- wp:post-title {"level":1} /-->
  <!-- wp:shortcode -->
  [mellow_booking steps="search car-type insurance driver pay done" locale="is"]
  <!-- /wp:shortcode -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer"} /-->
```

In a classic theme, a PHP template such as `page-reserve.php` does the same:

```php
<?php get_header(); ?>
<main>
  <?php echo do_shortcode( '[mellow_booking steps="search car-type insurance driver pay done" locale="is"]' ); ?>
</main>
<?php get_footer(); ?>
```

**Tried:** on 2026-10-20, in WordPress Playground (WordPress 7.1, Twenty Twenty-Five) against a local Mellow with the test key: the settings page and its sync, `[mellow_search]` on the home page, `[mellow_booking]` on `/book/` to "Test booking", a car type page, and the block theme template above. Not tried here: the classic PHP template, the block's sidebar, and the live key on a real https site. Mellow checked the block when the plugin was built.