In order for you to display content from your 365villas account you will need to set up the following default pages within WordPress:
- Search results page – once you insert your search form shortcode, this page will display the search results
- Properties details page – this page effectively acts as a template for all individual properties across your portfolio. Once you have designed the layout for your individual property page, simply add a shortcode for each feature you want to include and when someone clicks any property from your search results the shortcodes will display the correct features for the selected property.
- Bookings page – the page that will house the shortcode for your bookings widget, enabling users to make reservations directly within your 365villas account
- Contact us page – so that we can automatically insert a link to this page within your website settings
Available Shortcodes
Your WordPress content management system can be built in a multitude of different ways with an unlimited number of themes or page builders. At 365villas, we’ve chosen to use the Divi theme / page builder, for the purpose of illustrating how to insert shortcodes into your default pages. Please bear in mind, that you may need to refer to your web designer or the specific documentation for your particular theme / page builder. When it comes to inserting shortcodes, the basic principles should be the same.
Once you or your web designer designs / sets up your default pages, your next stage is to add shortcodes to include the desired data. / functionality. Each shortcode controls the content that you want to display and enables you to query the data that is held within your 365villas account, such as property details, availability, reservations and more. To give you maximum flexibility, each shortcode represents a specific item of content. Giving you the flexibility to design / build your page layouts, in a granular way, to meet your specific design requirements.
The following shortcodes are available:
- Search Form. To enable you to embed one of 2 styles of search form
- Featured Properties. To enable you to embed a row or grid of featured properties eg on your home page
- Properties. To enable you to provide a list of the properties you have available, including setting the maximum number of properties per row and per page; before pagination
- Property. To enable you to display each specific feature for each property.
- Booking. To enable you to embed a booking engine. Which works real time with your availability within your 365villas account.
- 365villas Login. The ability for you to embed a login form, for your clients to login and manage their reservations.
Taking each in turn:
Search Form.
To enable you to embed one of 2 styles of search form.
[365-villas-search]
This has the following options:
- searchPageId – This should be set to the page ID that will be used for the search results.
- style – This can be set to 1 or 2. This controls style of the search control. eg. different sizes, field order, etc. (Default: 1)
Example:
[365-villas-search searchPageId=9]
[365-villas-search style=2]
[365-villas-search searchPageId=7 style=1]
In the example below, we have built the page as required for the design and have included a section for the search form. The example codes above have been used to insert the search form style ‘1’ into the page:
Whilst in the example below, style id ‘2’, has been included:
Featured Properties.
To enable you to embed a row or grid of featured properties eg on your home page
[365-villas-featured-properties]
This has the following options:
- perRow – The maximum number of properties to display in a row. (Default: 3)
- limit – The total number of properties to display. This may span over multiple rows. (Default: 3)
Example:
[365-villas-featured-properties perRow=2 limit=4]
In the example below we have included the shortcode for featured properties. This will insert a list of properties that you have marked as featured within your 365villas account.
Properties.
To enable you to provide a list of the properties you have available, including setting the maximum number of properties per row and per page; before pagination
[365-villas-properties-list]
This has the following options:
- perRow – The maximum number of properties to display in a row. (Default: 3)
- perPage – The number of properties to display per page. (Default: 10)
Example:
[365-villas-properties-list perRow=3 perPage=10]
In the example below we have included a grid of 10 properties per page with 2 properties per row.
Property.
To build the various elements of your ‘property’ page default page you need to add each specific feature that you want to include as a shortcode in the location that you want to include it. The buidling blocks for each section are as follows:
[365-villas-property section=SECTION_NAME]
So, for example, if you want to include any of the elements below you would need to include the shortcode:
[365-villas-property section=SECTION_NAME]
Replacing the section=SECTION_NAME with the value for the ‘section’ attribute that you want to include. Valid values are:
– banner: [365-villas-property section=banner]
This can also have the “showintrobox” attribute set to “true” or “false”. This controls if the information box is displayed over the banner.
eg. [365-villas-property section=banner showintrobox=false]
– imagescroller: [365-villas-property section=imagescroller]
– floater: [365-villas-property section=floater]
– name: [365-villas-property section=name]
– rooms: [365-villas-property section=rooms]
– brief: [365-villas-property section=brief]
For this you can also pass the ‘readmore’ attribute to initially hide some of the content. eg. readmore=true
– map: [365-villas-property section=map]
– localinformation: [365-villas-property section=localinformation]
– rates: [365-villas-property section=rates]
The rates section also has the “showratedates” and “showratename” attributes available. Both can be “true” or “false”.
The “showratedates” attribute will show “From” and “To” columns in the rates table that show the dates set on each season.
eg. [365-villas-property section=rates showratedates=true]
The “showratename” attribute can hide or show the first column in the table that shows the season name.
eg. [365-villas-property section=rates showratename=false]
– reviews: [365-villas-property section=reviews]
– policies: [365-villas-property section=policies]
– amenities: [365-villas-property section=amenities]
The amenities section also has the “showoverview” attribute available. It can be “true” or “false”. This will show a section above the amenities icons with the information from the 365villas application amenities overview section.
– booking: [365-villas-property section=booking]
– virtualtour: [365-villas-property section=virtualtour]
– related: [365-villas-property section=related]
– custom:
[365-villas-property section=custom customcode="ADDITIONAL_FIELD_1"]
The custom section also requires the “customcode” attribute. This should be set to the name of the custom substitution code listed in the 365 application without the square brackets. eg. ADDITIONAL_FIELD_1 not [ADDITIONAL_FIELD_1].
This will then output the value of that specific custom field.
For example you can pass the ‘limit’ attribute to set the number of related properties to display. eg. limit=4
For the property details page. This will output the section specified only. You should use this multiple times on your property pages to create your layout.
For example, to show the banner you would create a full width section in Divi and then a full width code block and enter the short code:
[365-villas-property section=banner]
You MUST include a short code on the page with the section “header” to be able to override the colors with the settings in this page.
[365-villas-property section=header]
Booking.
To enable you to embed a booking engine. Which works real time with your availability within your 365villas account.
[365-villas-booking]
Use the code above to insert a full size booking engine.
365villas Login.
The ability to embed a login form for property owners and team members , to enable owners to login to access their dashboard and review their calendar and owner statement.
[365-villas-login]
Add the shortcode above to embed a 365villas login form.