Instructions

Theme Setup

Installing the Theme

  1. Install/activate the plugins.
  2. Install/activate the theme.
  3. Import Custom Fields
    1. Option A: Import the Advanced Custom Fields json file under “Custom Fields > Tools”
    2. Option B: Use a migration plugin to import the database from this test site so you always start with dummy pages, custom fields and all plugin settings pre-filled.

Plugin Settings

Here are the settings you need to adjust for each client site. If you migrated the database using option 3B above, then some of this will already be done for you.

Formidable:
Facebook Feed:
Instagram Feed:
Twitter Feed:
Event Espresso:
Typography

This is an H1 headline.

This is an H2 headline.

This is an H3 headline.

This is an H4 headline.

This is an H5 headline.

Note the “Formats” dropdown in the WP page editor. There are some preset styles there. Like maybe you want to change the font weight of text or a headline.

THIS IS AN H3 HEADLINE IN LIGHT WEIGHT.

THIS IS AN H3 HEADLINE IN BOOK WEIGHT.

THIS IS A HEADLINE IN DEFAULT/MEDIUM WEIGHT.

THIS IS AN H3 HEADLINE IN SEMIBOLD WEIGHT.

Or maybe you want some body text to be bigger:

This is default body text

This is large body text.

This x-large body text.


Buttons

Buttons can be created with the bootstrap shortcode button in the WP editor.

Button Button Button Button

Button Button Button Button

COLORS,ETC…

Color Schemes can be edited under “Theme Settings” in the dashboard. There you can also adjust layout styles like removing the booking bar. Turn the booking bar into a box instead of a bar. Change the blog and events from a grid to a list. Etc…

 

Page Layouts

Page Layouts

Most pages will use the “Default Template”. Layouts can be created on the fly with a selection of preset sections. Just add a new page, and select “Add Section” to get started. You can also still use the default wordpress WYSIWYG editor if you’re just doing a basic page. But if you want to have a variety of sections to the page, you’ll want to use “general content section” instead, so you can drag and drop different sections down the page. If you put content into the default WP editor, it will always display below any custom sections. The available sections are:

Other Page Templates:

  1. Home – Use this for the homepage (it has extra fields for the main slider/video showcase at the top)
  2. Blog – Main blog page – pulls in posts from “Posts” post type.
  3. Events – Main events page – pulls in events from “Event Espresso” post type.
  4. Landing – Use this for landing pages.
  5. Corporate Global Header Contents – Only used on the Corporate site for the iframe global header on property sites.

 

Menus

MEGA MENUS

To create a mega menu, add the class “mega” to the main parent item, along with the number of columns in that menu. So for example, to create a 4-column dropdown menu, add the class “mega mega-4” to the top-level menu item.  The “4 equates to the 4 second-level child menu items.  The third level children are the lowercase items listed under each of the 4 columns. The photo button in the menu is created using the “Custom Link” type of menu item. You’ll see settings for adding the photo and message once you add the Custom Link to your menu.

Interior Page Menus

The submenus on each page are controlled by the main WP menus dashboard. Just create a new menu, then go to your page and select the menu from the “Submenu Bar” dropdown field. This menu will now display on this page.

Booking Form

Paste the provided booking code into the corresponding field under Theme Settings. To style the form, wrap each input in a div with the class “field-wrap”. For date fields, add the “date” class. For select dropdown boxes, add the “select” class. Like so:

<div class=”field-wrap date”>
<input type=”text” name=”date” id=”checkIn” placeholder=”Check In”>
</div>

<div class=”field-wrap select”>
<select id=”numberOfAdults” name=”numberOfAdults”></select>
</div>

And to make the submit button into a triangle, wrap it in “triangle-btn” div like so:

<div class=”triangle-btn”>
<button onClick=”bookIt()” id=”button”>BOOK NOW</button>
</div>

This should also work if the provided submit button is an input, not a button.

 

Other Tips

Map Designs

Go to snazzymaps.com to select or build a custom map design. Copy/paste the provided code into the Map Settings page under “Paste style here”. Refer to the sample maps on the test site for help with other settings.

Animation Speeds (advanced)

To adjust the speed and/or delay of the page section animations (the sliding/fading), go to the theme folder and look for part-sections.php. This houses all the page sections. Search for “wow” and anytime you see “wow” that means that piece is animated. Add “data-wow-duration” and “data-wow-delay” attributes to adjust timings. For example:

<div class=”triangle-content-inner wow fadeInUp” data-wow-delay=”.2s”>

You can also change the type of animation. In the above example, where it says “fadeInUp” — you can change that to slideIn, slideInDown, etc… go to https://daneden.github.io/animate.css to see the options.

Slideshow Speeds (advanced)

Go to the theme folder > js > site.js and look for the Slider section. Adjust autoplayspeed (duration to stay on slide) and speed (speed of fade animation).

 

 

Developers Only

The ACF custom fields are pulled in via the acf-json folder in the theme folder. The fields are managed on one site only — the corporate site. When fields are updated on the coroporate site, the field json file is automatically updated in the acf-json folder, which will update it on all the other sites that use that theme. If you have problems with a field on a property site, go to the corporate site and re-save the field. That should fix it.