This page shows you how to install the Recras WordPress plugin and how to integrate it with your own WordPress website. If you are interested in what the plugin can integrate, have a look at our information page on the WordPress link.

Installation

Note: These steps are only available for users with the Administrator role. If you’re not an administrator, ask your website management party for the necessary role to install the plugin.

  1. Go to the WordPress admin environment, then in the menu Plugins go to Add new
  2. In the field Search plugins on the top right, enter ‘recras‘ and press Enter.
  3. The Recras plugin will appear. Press Install now. When asked, enter your FTP details.
  4. The plugin now appears in the list of installed plugins, but is not activated yet. Click on Activate.
  5. In the menu, go to Recras and then Settings.
  6. Enter your own Recras name (i.e. demo if you use demo.recras.nl) and change the other settings if needed. You are now ready to integrate your data!
  7. The plugin can also be installed using Composer. Because the plugin uses Composer Installers it will automatically be installed in /wp-content/plugins/. To install the plugin using Composer, use: composer require recras/recras-wordpress-plugin

Linking Recras to the website

Packages

To show a package on your site, you can use the  button in the visual editor. Go to the page where you want to show the package and click on the icon. A pop-up will appear where you can make the following choices:

  • which package it concerns
  • what property you want to show

If you choose the property Programme, two more options appear:

  1. the start time of the page (by default this is set to 0:00)
  2. the header – From/To/Activity – that is/can be shown.

Click on Insert shortcode, save the page, and view it in your browser.

Description of the properties

  • Title – the name of the package (“Name to customer“)
  • Description – the extended description of the package
  • Duration – the duration of the package (the time from the start of the first activity until the end of the last activity)
  • Starting location – the location of the first activity
  • Minimum number of persons – the minimum number of persons
  • Price p.p. excl. VAT – the price of the package per person, excluding VAT
  • Price p.p. incl. VAT – the price of the package per person, including VAT
  • Total price excl. VAT- the total price of the package, excluding VAT
  • Total price incl. VAT- the total price of the package, including VAT
  • Programme – a table with all activities
  • Image tag – the image belonging to the package
  • Relative image URL – the relative URL of the image belonging to the package

Contact forms

Not just packages, but contact forms can also be added using the button  in the visual editor. A pop-up appears where you can make the following choices:

  • Contact form – what form you want to integrate
  • Show title – should the title of the form be added or not
  • Show labels – should the labels of the fields be shown or not
  • Show placeholders – should placeholders be shown in the fields or not
  • Package – which package is automatically filled in, if the form supports this. If this is left empty the user can select themselves
  • HTML element – which HTML element to use for the form
  • Element for single choices – which HTML element to use for options where one option must be selected
  • Submit button text – What text to place on the submit button. This is Send by default
  • Redirect after submission – when a page or post is chose, the customer will be sent there when the form is successfully sent. This can be a thank-you page for example. If you choose to not redirect, a message will be shown below the form after submission

The contact forms use HTML5 elements for date and time selection. For more information, see the heading Date/Time selection below.

Products

Product details can be added using the button  in the visual editor. A pop-up appears where you can make the following choices:

  • Product – what product this concerns
  • Show what? – what property you want to show

Description of the properties

  • Title – the name of the product
  • Description (short) – the short description of the product
  • Description (long) – the long description of the product
  • Duration – the duration of the product, i.e. 2:30 for a product that lasts two hours and thirty minutes
  • Image tag – the image belonging to the product
  • Relative image URL – the relative URL of the image belonging to the product
  • Minimum amount – the minimum amount of this product
  • Price (incl. vat) – the price of the product

Online Booking

By using the button  in the visual editor you can implement online bookings in your website. There are various options:

  • Package – should a package be pre-filled or not
  • Use new method? – should the new method for online bookings be used or not
  • Preview times in programme – only available for the new method – should, after choosing date and time, times be shown in the programme
  • Redirect after submission – only available for the new method – should the customer be redirected to a certain page or post after booking
  • Automatic resize? – only available and needed for the old method  – should the height of the iframe be change automatically based on the height of its contents

Availability calendar

Using the button  in the visual editor allows you to add an availability calendar to your site. The shortcode adds an iframe to your site that automatically changes its height to the height of its contents

Vouchers

The button  in the visual editor enables you to integrate a module for voucher sales into your website.

Styling

The plugin does not apply any styling, so packages and contact forms integrate seamlessly with the rest of the website, mostly. If needed, there are several CSS classes available to use. These can be found in the style.css file. If you wish to use these, you must use these classes in your own theme, as this file is not loaded by the plugin.

Date/Time selection

The plugin uses existing standards for selecting dates and times. Unfortunately, not all browsers support this properly. To make this work properly for all visitors the plugin has a setting “Use date/time picker script”. At the time of writing (February 2019) it is recommended to enable this if a large portion of your visitors uses Internet Explorer (not Edge, which does support this) or Safari for desktops.

Caching

Because fetching data from your Recras can take a bit of time, this data is temporarily stored in your own website. This makes this process faster. The data is stored for a maximum of 24 hours, so if you make radical changes in your Recras – for example, increasing the price of a package – it is advised to clear the cache afterwards. Otherwise, customers can see an outdated price on your website. You can clear this cache from the page Cache in the menu Recras in the WordPress admin area.

Support

We appreciate it if you use our GitHub page to report bugs and feature requests. If you do not have a GitHub account, you can also use the WordPress forum of our plugin.

We only support the plugin on the latest version of WordPress and on actively supported PHP versions.