Shortcodes Reference Page
In addition to the standard formatting that can be applied through the WYSIWYG editor, there are some additional “shortcodes” that the Administrator can use to implement other design elements / functionality without needing to know how to write HTML code. All shortcodes are enclosed in [square brackets] to enable WordPress to know that it is a shortcode.
Each shortcode has:
- syntax (a way that it has to be written)
- attributes (elements that define how the shortcode content looks and works)
- values (allowed criteria that define the attribute for that instance)
- default values (a default criteria, so that if the value is not defined, there is a standard approach)
The following guide defines these shortcodes and how they can be used:
[CONTENT]
DESCRIPTION:
Use this shortcode to wrap the page's content in a container. If you don't use this shortcode, all the content on the page will be in full width mode.
SYNTAX:
[content margin="0 0 100px"]Content goes here....[/content]
ATTRIBUTES:
Name | Description | Allowed values | Default value | Required |
margin | You can set the margin of the entire container block by using this attribute. So if you for example have several [content] shortcodes in a trail formation, you can define the margin for each in order to define exactly how much space there should be between those shortcodes. |
|
0 0 100px | No |
INSTRUCTIONS:
Write the [content]content here..[/content] shortcode and add any optional attribute to it. It is not allowed to nest this shortcode (i.e. to have one inside another one). So this is not allowed: [content]content [content]nested content here..[/content]here..[/content]
Instead what you can use is: [content]content [content2]nested content here..[/content2]here..[/content]
But be careful, usually you shouldn't need to create nested "content" shortcode. Only sibling ones (i.e. ones next to each other). For nesting, it's better to use [block] shortcodes.
The default shortcode for [content] which is used at the start of each secondary page, is [content margin="0 0 100px"] which sets 0px margin to top, 0px margin to left and right, and 100px margin to the bottom.
EXAMPLE:
[content margin="150px auto"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/content]
[block]
DESCRIPTION:
Use this shortcode to wrap some content inside a block. By using this shortcode you can set specific margin or width for that content. This shortcode is not currently used on the website - it is coded to work, and is there in case you want to use it. Typically, to split content into columns use the [column] shortcode defined below.
The difference between [block] and [content] shortcodes is that you should use [content] only as first wrapper for content. In other words, its not recommended that [content] shortcode be nested inside of any other shortcode. Conversely, the [block] shortcode can be nested inside other shortcodes.
SYNTAX:
[block margin="100px auto" width=""]Block content goes here....[/block]
ATTRIBUTES:
Name | Description | Allowed values | Default value | Required |
margin | You can set the margin of the block by using this attribute. So if you for example have [block] after some paragraphs of text, you can define exactly how much space there should be between those paragraphs and this block of content. |
|
0 | No |
width | Set the width for the block. | Any value defined in px or percent | - | No |
INSTRUCTIONS:
Write the [block]content here..[/block] shortcode and add any optional attribute to it. It is not allowed to nest this shortcode. So this is not allowed: [block]content [block]nested content here..[/block]here..[/block]
Instead what you can use is: [block]content [block2]nested content here..[/block2]here..[/block]
EXAMPLE:
[block margin="150px 0"\ width="50%"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/block]
[COLUMN]
DESCRIPTION:
Use this shortcode to split the content into columns. The page can be split 50/50 or any variation up to multiples of 1 to 12 columns. This shortcode also allows you to force space between columns.
SYNTAX:
[column size="6/12" size_phone="" size_tablet="" offset="0/12"]Content for this column goes here...[/column]
ATTRIBUTES:
Name | Description | Allowed values | Default value | Required |
size | Define how much columns in the row should this [column] shortcode fill.You can set the size_phone and/or size_tablet attributes if you would like to overwrite this value for specific device sizes. |
Instead of X, you can put any number from 1 to 12. |
6/12 | No |
size_phone | By using this attribute, you can set the specific column size for phone devices only. All other devices are still going to use the size or size_tablet (if defined). Because phone screens are smaller than desktop screens, column sizes defined with size attribute don't always fit phones. It is therefore good to define larger column size for phone screens. For example, if you set the column size to 4/12, you should set the column size_phone to larger value, like 6/12 or 12/12 in order for column content to fit well on phones. |
Instead of X, you can put any number from 1 to 12. |
- | No |
size_tablet | By using this attribute, you can set the specific column size for tablet devices only. All other devices are still going to use the size or size_phone (if defined).Because tablet screens are smaller than desktop screens, column sizes defined with size attribute don't always fit tablets. So it is therefore good to define larger column size for tablet screens. For example, if you set the column size to 4/12, you should set the column size_tablet to larger value, like 6/12 or 12/12 in order for column content to fit well on tablets. |
Instead of X, you can put any number from 1 to 12. |
- | No |
offset | Define how much columns in the row should be left blank before filling the [column] shortcode's size column.This attribute can be set only for size attribute. Its ignored for size_phone and size_tablet attributes. |
Instead of X, you can put any number from 0 to 12. |
0/12 | No |
INSTRUCTIONS:
All your [column] shortcode must be inside the [content] shortcode.
You can add up to 12 columns in one row. For defining how much columns in a single row should one [column] shortcode fill, you need to set the "size" attribute. For example, if you set:
- 6/12 as value of "size" attribute, it means that the shortcode will fill 50% of the row's width, or in other words: 6 of 12 columns would be occupied by this shortcode.
- 12/12 as value of "size" attribute, it means that the shortcode will fill 100% of the row's width, or in other words: 12 of 12 columns would be occupied by this shortcode.
- 3/12 as value of "size" attribute, it means that the shortcode will fill 25% of the row's width, or in other words: 3 of 12 columns would be occupied by this shortcode.
- 1/12 as value of "size" attribute, it means that the shortcode will fill 8.33% of the row's width, or in other words: 1 of 12 columns would be occupied by this shortcode.
Columns are designed to have a 30px gap between columns which is split equally between the neighbouring columns - 15px on each side.
The offset parameter is very useful when you want to have more spacing between [column] shortcodes. For example if you want two equal width shortcodes, you will use something like this:
[column size="6/12"]One Half Column[/column][column size="6/12"]One Half Column[/column]
But if you want to have more spacing between those two columns, you must define the offset. Offset is added always to the left side of each [column] shortcode if that shortcode has offset defined. So, in this case we will add some offset to second [column], and decrease size of first [column] to match the size of second, in order to create more spacing between those two [column]'s:
[column size="5/12"]One Half Column[/column][column size="5/12" offset="2/12"]One Half Column[/column]
You must always follow the rule that total columns + totals offsets must be exactly equal to 12. Check the examples below.
EXAMPLE:
[column size="12/12"]Full Width Column[/column]
[column size="6/12"]One Half Column[/column][column size="6/12"]One Half Column[/column]
[column size="4/12"]One Third Column[/column][column size="8/12"]Two Thirds Column[/column]
[column size="2/12" offset="1/12"]Quarter Column with 1/12 offset[/column][column size="9/12"]Three Quarters Column[/column]
[column size="1/12"]1/12 Column[/column][column size="1/12"]1/12 Column[/column][column size="1/12"]1/12 Column[/column][column size="1/12"]1/12 Column[/column][column size="1/12"]1/12 Column[/column][column size="1/12"]1/12 Column[/column][column size="1/12"]1/12 Column[/column][column size="1/12"]1/12 Column[/column][column size="1/12"]1/12 Column[/column][column size="1/12"]1/12 Column[/column][column size="1/12"]1/12 Column[/column][column size="1/12"]1/12 Column[/column]
You can also use size_tablet and/or size_phone attributes in order to define the column sizing based on device width. Please check the next two examples by resizing your browser window:
[column size="7/12" size_tablet="6/12" size_phone="12/12"]
LIVE AN ADVENTURE
For over 30 years Glacier Raft Company has been providing white water rafting trips on the Kicking Horse, and other beautiful rivers around Golden B.C.
We love the water and the thrill it provides and we want to share it with you!
This is your life. Live an Adventure.
[/column][column size="4/12" offset="1/12" size_tablet="6/12" size_phone="12/12"]
JOIN THE GLACIER COMMUNITY
[newsletter_form]Receive FREE updates, exclusive promotions and a taste of river culture[/newsletter_form]
[/column]
LIVE AN ADVENTURE
For over 30 years Glacier Raft Company has been providing white water rafting trips on the Kicking Horse, and other beautiful rivers around Golden B.C.
We love the water and the thrill it provides and we want to share it with you!
This is your life. Live an Adventure.
JOIN THE GLACIER COMMUNITY
[column size="4/12" size_phone="12/12"]
image goes here...
THE UPPER CANYON
The calmest part of the river
A beautiful, meandering scenic float that gradually builds into some class 2 and class 3 white water.
Spectacular scenery and a short hike up to a cascading waterfall
A good initial taste of what the Kicking Horse is all about.
[/column][column size="4/12" size_phone="12/12"]
image goes here...
THE MIDDLE CANYON
The first big white water section which is predominantly class 2 and 3 with some great class 4
Starts with famous “Portage and Shotgun” which is a 1 km stretch of class 4
Continues into many other big rapids such as Roller Coaster and Twin Towers
[/column][column size="4/12" size_phone="12/12"]
image goes here...
THE LOWER CANYON
The second big white water section
It’s renowned for it’s 4 km stretch of continuous class 4 whitewater. Amazing!
The river cuts tight through the canyon, hugging impressive vertical rock walls
After the big rapids you float through Golden and end up back at our rafting base.
[/column]
THE UPPER CANYON
- The calmest part of the river
- A beautiful, meandering scenic float that gradually builds into some class 2 and class 3 white water.
- Spectacular scenery and a short hike up to a cascading waterfall
- A good initial taste of what the Kicking Horse is all about.
THE MIDDLE CANYON
- The first big white water section which is predominantly class 2 and 3 with some great class 4
- Starts with famous “Portage and Shotgun” which is a 1 km stretch of class 4
- Continues into many other big rapids such as Roller Coaster and Twin Towers
[pp_boxes]
DESCRIPTION:
The website is designed to use blocks with images and overlaid text and buttons to link to other elements. Use this shortcode to show the blocks of posts / pages / crew etc.
SYNTAX:
[pp_boxes ids="" width="340px"]
ATTRIBUTES:
Name | Description | Allowed values | Default value | Required |
ids | Define the post type ids you want to show as blocks | Digits representing the post type IDs. Separate each digit with a comma character. | - | Yes |
width | Set the width of each box | Any value defined in px or percent | 340px | No |
INSTRUCTIONS:
Inside the admin area open the appropriate index page when you can see the list of desired post types. There you can find the IDs for each box link. For example if you want to create the boxes to link to pages, go to the admin area, and in main menu choose Pages > All Pages. There you can see all the posts for "page" post type. Make a note of the IDs for posts you want to show, and enter them as "ids" attribute in [pp_boxes] shortcode. The same concept applied to all other post types.
You can change how boxes are displayed by going to the edit screen of each post you want to include. There you can also set the featured image, and that image is then used as the image in the box. Please note that you shouldn't upload images smaller than 340px x 340px. Box images are always square (340px x 340px - cropped on center), but if you upload an image smaller than 340px x 340px, this shortcode will render different heights for the images in the boxes. It is therefore recommended that you don't upload images smaller than 340px x 340px.
If you want to fit more boxes in a row on desktop screens, please note that each block is separated by a 30px gap, and the total width of the regular content area on desktop view is 1080px.
Please check the next few images for visual instructions:
EXAMPLE:
[pp_boxes ids="222,226,224" width="330px"]
BOOK ONLINE
READY TO BOOK?
It's as easy as a click of this button
TRIP SELECTOR
NOT SURE WHAT'S BEST FOR YOU?
Our trip selector can help!
SHOP
GLACIER GEAR
Apparel and accessories for all your outdoor adventures
[content_with_image]
DESCRIPTION:
Use this shortcode to display text content together with an image in the same row. You can decide whether you want to put the image on the left hand side and text content on the right, or visa versa.
SYNTAX:
[content_with_image image_position="left" image_id="" image_size="medium" image_link="" margin="40px 0" content_margin_top="0" title="" title_tag="h3" allow_content_below_image="no"]Content goes here...[/content_with_image]
ATTRIBUTES:
Name | Description | Allowed values | Default value | Required |
image_position | Set the position of the image | left or right | left | No |
image_id | Set the image id you want to use. You can find the image ID in a Media Library table. Check this image: |
Digit representing the image ID | - | Yes |
image_size | Set the image size you want to show. You can see the image dimensions for each size in the next image: |
thumbnail or medium or medium_large or large or 1536x1536 or 2048x2048 or box-thumb or blog-index or trip-index or full | medium | No |
image_link | Choose where the image will link to if clicked. |
|
- | No |
margin | You can set the margin of the entire container block by using this attribute. So if you for example have several [content_with_image] shortcodes in succession, you can define the margin for each in order to define exactly how much space there should be between the content of those shortcodes. |
|
40px 0 | No |
content_margin_top | You can set the top margin of the text content area by using this attribute. By default, this attribute value is zero, which means the text content will be vertically aligned at the top with the image. If you want to move the text content below the top of the image, just increase this value. For example enter 10px for this attribute if you want to move the content down by 10 pixels | Any value defined in px | 0 | No |
title | You can define the title above the content. If you leave this attribute empty, there won't be any title displayed. | Any value | - | No |
title_tag | If you set the title attribute, you can define this attribute also, if you want to define which HTML tag should be used to display the title. | Any HTML tag | h3 | No |
allow_content_below_image | With this attribute you can set how text content behaves when there is enough text to go below the image. You can choose to allow text to wrap below the image or to force it to remain in the same column where the text started. | yes or no | no | No |
INSTRUCTIONS:
You have to define only the image_id attribute and the content for the shortcode. Other attributes are all optional, and if you don't define them, the default ones will be used.
EXAMPLES:
[content_with_image image_position="left" image_id="9" image_link="" margin="0" content_margin_top="0" title="" title_tag="h3" allow_content_below_image="no"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/content_with_image]
[content_with_image image_position="right" image_id="9" image_link="http://www.google.com" margin="0 100px" content_margin_top="0" title="Title Example" title_tag="h3" allow_content_below_image="no"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/content_with_image]
[content_with_image image_position="left" image_size="full" image_link="fancybox" image_id="9" margin="0" content_margin_top="0" title="Title Example" title_tag="h3" allow_content_below_image="no"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/content_with_image]
[content_with_image image_position="left" image_id="9" image_link="new_window:http://www.google.com" margin="0" content_margin_top="0" title="Title Example" title_tag="h3" allow_content_below_image="yes"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/content_with_image]
Title Example
[revslider]
DesCription:
Use this shortcode to use the Revolution Slider anywhere in the website. In the Glacier Raft website it is used as a full width slider (rotating slideshow or single image) at the top of most pages.
Syntax:
[rev_slider SLIDERID]
Attributes:
Name | Description | Allowed values | Default value | Required |
SLIDERID | Instead of SLIDERID you must write the ID you can get from Revolution Slider area | Specific slider ID | - | Yes |
Instructions:
In the Glacier Raft website, the revolution slider is used in top area of the Home Page and most other pages. Each slider firstly need to be defined inside Revolution Slider area. Then after it is created, you have to copy the shortcode and use it inside the page. Please check the general User Guide for details of how to create and insert sliders into pages.
You can also wrap the slider in [block] shortcode in order to limit the slider width.
EXAMPLE:
[block width="600px"][rev_slider home-small][/block]

[REVSLIDER_SLIDER]
DESCRIPTION:
Use this shortcode to create a rotating slideshow (slider) from images in the Media Library. This shortcode is not in use in the initial web design, but the functionality exists in case you wish to use it to implement image slideshows in the page content area.
SYNTAX:
[revslider_slider ids="1,2,3,4,5..."]
ATTRIBUTES:
Name | Description | Allowed values | Default value | Required |
ids | Define the media image ids you want to show in the slider | Digits representing the media image IDs. Separate each digit with a comma character. | - | Yes |
INSTRUCTIONS:
Go to the Media Library, upload all images that are not already in the library and then collect all the image IDs. Then add those IDs to the shortcode's "ids" attribute. Check the next few thumbs for details of how it should look:
You can also wrap the slider in [block] shortcode in order to limit the slider width.
EXAMPLE:
[block width="600px"][revslider_slider ids="473,470,467,459,455"][/block]
[youtube_playlist]
DESCRIPTION:
Use this shortcode to automatically import a series of videos into your website from a playlist on your YouTube Channel. All videos are then managed in the YouTube Playlist and the web page is automatically updated.
SYNTAX:
[youtube_playlist username="YourYouTubeUsername" playlistid="YouTubePlaylistID" autoplay="true"]
ATTRIBUTES:
Name | Description | Allowed values | Default value | Required |
username | Your YouTube account's username | Any | Glacierraft | No |
playlistid | Desired YouTube playlist ID | Any | PLT7-UVrPgIENClLqswLEH28zrt7GV8gWc | No |
autoplay | Should YouTube start playing the video when fancybox opens? | true or false | true | No |
thumbsize | Set the loaded thumbnail size. For 4:3 video format it is best to use large as value, and for 16:9 video it is best to use medium as value. If you follow this suggestion, you will avoid "black bars" around the thumbs. | small, medium or large | medium | No |
INSTRUCTIONS:
Go to your YouTube account, and play any video from the playlist you want to load into your site. When the video starts to play, you can pause it, and then check the URL in address bar. There you can find the playlist ID. You must copy that ID and paste it inside this shortcode as value of "playlistid" attribute.
This video tutorial may help you:
EXAMPLE:
[youtube_playlist username="Glacierraft" playlistid="PLT7-UVrPgIENClLqswLEH28zrt7GV8gWc" autoplay="true" thumbsize="medium"]
[testimonial]
DESCRIPTION:
Use this shortcode to display a testimonial. Testimonial sections are designed to be on an image background that is 100% of the browser width and has a semi transparent colored overlay (above the image and below the text) to make the text easier to read. The minimum height for the testimonial box is 400px. If content is smaller than 400px, its is centered vertically. If content is larger than 400px, then a 30px padding is added on top and bottom side of testimonial container in order to make some spacing between start/end of the testimonial container and start/end of the testimonial text.
SYNTAX:
[testimonial signature="" margin="100px auto" bg_image_id="" bg_color="0,0,0,0.3"]Testimonial goes here...[/testimonial]
ATTRIBUTES:
Name | Description | Allowed values | Default value | Required |
signature | Enter a signature (the person's name) that you want to show below the testimonial | Any value | - | No |
margin | You can set the margin of the testimonial by using this attribute. So if you for example have a testimonial after some paragraphs, you can define exactly how much space there should be between those paragraphs and this testimonial. |
|
100px auto | No |
bg_image_id | By using this attribute, you can set the background image for this block area. You can find the image ID in a Media Library table. Check this image: |
Digit representing the image ID | - | No |
bg_color | Set the background overlay color and the amount of transparency. This background overlay helps the text content to be more visible in front of the background image. | You must enter 4 values, separated by commas. The first three values represent the RGB color values, and fourth value is for opacity. You can define opacity value in decimals in a range from 0 to 1. Zero represents 100% hidden overlay, and 1 represents 100% visible overlay. | 0,0,0,0.3 | No |
INSTRUCTIONS:
Write the [testimonial]testimonial here..[/testimonial] shortcode with any optional attribute.
Because of the complexity of how images are resized to the various browser sizes, it is strongly recommended that you upload images that are cropped to be 1680px wide x 400px high and that you keep testimonials to be the same length or shorter than the original testimonial (232 characters long).
To keep the full width testimonial design, please snure that you keep the left/right margin at zero.
EXAMPLE:
[testimonial signature="Dave Best" margin="100px auto" bg_image_id="87" bg_color="0,0,0,0.3"]
This rafting experience was seamless in its delivery. It was efficient, but not rushed. The guides were very proficient and competent, yet relaxed and friendly. Expectations were clear at all times. I would recommend this to anyone.
[/testimonial]
[testimonial signature="Dave Best" margin="100px auto" bg_image_id="87" bg_color="0,0,0,0.6"]
This rafting experience was seamless in its delivery. It was efficient, but not rushed. The guides were very proficient and competent, yet relaxed and friendly. Expectations were clear at all times. I would recommend this to anyone.
[/testimonial]
[adventures] and [ADVENTURE]
DESCRIPTION:
Use these shortcodes in order to show adventure blocks in a row. These are used on the Home page in the original design.
SYNTAX:
[adventures][adventure image_id="" title="" title_position="top" bg_color="40,40,40,0.6" link="#" open_new_window="no"][/adventures]
ATTRIBUTES:
Name | Description | Allowed values | Default value | Required |
image_id | By using this attribute, you can set the image for this block area. You can find the image ID in a Media Library table. Check this image: | Digit representing the image ID | - | Yes |
title | Enter a title for the box. Title is always visible in bottom area | Any value | - | No |
title_position | Choose the position of the adventure title | top or bottom | top | No |
bg_color | Set the background overlay color when this block is hovered. | You must enter 4 values, separated by commas. First three values represent the RGB color values, and fourth value is for opacity. You can define opacity value in decimals in a range from 0 to 1. Zero represents 100% hidden overlay, and 1 represents 100% visible overlay. | 40,40,40,0.6 | No |
link | Define a link this adventure should point to. You can use post/page/trip ID if you want to link to them. | Any valid URL or ID of post/page/trip | # | No |
open_new_window | Define should the button's link open a specific URL in a new window | yes or no | no | No |
INSTRUCTIONS:
All [adventure] shortcodes must be wrapped in one [adventures] shortcode. You can define as many [adventure] shortcodes as you need, but you must follow the rule that all of those shortcodes must be wrapped inside one [adventures] shortcode. Check the example below.
Each image size inside the [adventure] shortcode is based on uploaded width. So all images must be resized to desired width before upload. If amount of [adventure] shortcode takes up more than 100% width, then it wraps and centers on next line.
For 7 blocks on a single desktop browser row, images should be uploaded at 153px wide x 408px high. The total width of the desktop content area is 1080px. So calculations for different trip volumes can be calculated from that. For example: If you want 8 image blocks in one desktop row it would be 1080 / 8 = 135 less 1px gap - therefore images would need to be 134px wide.
EXAMPLE:
[adventures]
[adventure image_id="107" title="Complete" title_position="top" bg_color="40,40,40,0.6"][adventure image_id="110" title="Ultimate" title_position="bottom" bg_color="40,40,40,0.6" link="394" open_new_window="no"][adventure image_id="111" title="Discovery" title_position="bottom" bg_color="40,40,40,0.6" link="397" open_new_window="no"][adventure image_id="105" title="Express" title_position="top" bg_color="40,40,40,0.6" link="396" open_new_window="yes"][adventure image_id="109" title="Family" title_position="bottom" bg_color="40,40,40,0.6" link="398" open_new_window="yes"][adventure image_id="108" title="Relax" title_position="top" bg_color="40,40,40,0.6"][adventure image_id="106" title="2 Day" title_position="bottom" bg_color="40,40,40,0.6"]
[/adventures]
[NEWSLETTER_FORM]
DESCRIPTION:
Use this shortcode to display the newsletter signup form (as used on the Home page in the original design, and the Footer area).
SYNTAX:
[newsletter_form]Content to be printed just before the form fields...[/newsletter_form]
ATTRIBUTES:
This shortcode doesn't have any attribute you can define. You can set all possible settings for this form in the MailChimp Settings Page.
INSTRUCTIONS:
Write the [newsletter_form] shortcode wherever you want the Mailchimp form to appear.
You can add any content between [newsletter_form] and [/newsletter_form] and that content would be then printed just before the form fields.
By default, the [newsletter_form] shortcode will use the full width of its container. If you want to limit its width, just wrap the [newsletter_form] shortcode inside the [block width=""] shortcode. Check the examples below.
EXAMPLE:
[newsletter_form]Content to be printed just before the form fields...[/newsletter_form]
[block margin="100px 0" width="500px"][newsletter_form]Content to be printed just before the form fields...[/newsletter_form][/block]
[FAQ]
DESCRIPTION:
Use this shortcode to display the question/answer section. It is used only in the FAQ page, but you can use it also anywhere else in the website.
SYNTAX:
[faq question=""]Anwer goes here...[/faq]
ATTRIBUTES:
Name | Description | Allowed values | Default value | Required |
question | Enter a desired question here. | Any value | - | Yes |
INSTRUCTIONS:
Write the [faq] shortcode with the "question" attribute and enter the anwer as content of the shortcode ( between start and end shortcode tag ).
Only question will be visible when the page loads, and answer will be shown when visitor clicks on the question.
EXAMPLE:
[faq question="How this shortcode works?"]Its pretty simple...[/faq]
[faq question="Where it is used?"]You can use it anywhere in the site, but it is currently used only on the FAQ page.[/faq]
How this shortcode works?
Where it is used?
[CURRENT_DATE]
DESCRIPTION:
Use this shortcode to insert a current date anywhere in the content area. It is currently only used in Footer for copyright statement, but it can be used for other elements if required.
SYNTAX:
[current_date format="d F Y"]
ATTRIBUTES:
Name | Description | Allowed values | Default value | Required |
format | Use the format attribute to print specific parts of the date | Any value from the table below. You can create space between codes with a normal space character. | d F Y | No |
INSTRUCTIONS:
There is only one attribute you can set - format. With that attribute you define which part of date should be printed(only day, only month... or several together). Please check the next table to see which part of dates you can print:
Day of Month | ||
---|---|---|
d | Numeric, with leading zeros | 01–31 |
j | Numeric, without leading zeros | 1–31 |
S | The English suffix for the day of the month | st, nd or th in the 1st, 2nd or 15th. |
Weekday | ||
l | Full name (lowercase 'L') | Sunday – Saturday |
D | Three letter name | Mon – Sun |
Month | ||
m | Numeric, with leading zeros | 01–12 |
n | Numeric, without leading zeros | 1–12 |
F | Textual full | January – December |
M | Textual three letters | Jan - Dec |
Year | ||
Y | Numeric, 4 digits | Eg., 1999, 2003 |
y | Numeric, 2 digits | Eg., 99, 03 |
Time | ||
a | Lowercase | am, pm |
A | Uppercase | AM, PM |
g | Hour, 12-hour, without leading zeros | 1–12 |
h | Hour, 12-hour, with leading zeros | 01–12 |
G | Hour, 24-hour, without leading zeros | 0-23 |
H | Hour, 24-hour, with leading zeros | 00-23 |
i | Minutes, with leading zeros | 00-59 |
s | Seconds, with leading zeros | 00-59 |
T | Timezone abbreviation | Eg., EST, MDT ... |
Full Date/Time | ||
c | ISO 8601 | 2004-02-12T15:19:21+00:00 |
r | RFC 2822 | Thu, 21 Dec 2000 16:01:07 +0200 |
EXAMPLES:
Shortcode | Result |
[current_date format="F j, Y g:i a"] | February 15, 2025 6:13 pm |
[current_date format="F j, Y"] | February 15, 2025 |
[current_date format="F, Y"] | February, 2025 |
[current_date format="g:i a"] | 6:13 pm |
[current_date format="g:i:s a"] | 6:13:32 pm |
[current_date format="l, F jS, Y"] | Saturday, February 15th, 2025 |
[current_date format="M j, Y @ G:i"] | Feb 15, 2025 @ 18:13 |
[current_date format="Y/m/d \a\t g:i A"] | 2025/02/15 6:13 PM |
[current_date format="Y/m/d \a\t g:ia"] | 2025/02/15 6:13pm |
[current_date format="Y/m/d g:i:s A"] | 2025/02/15 6:13:32 PM |
[current_date format="Y/m/d"] | 2025/02/15 |
[encrypt]
DESCRIPTION:
Use this shortcode to safely display email addresses. The email address you display with this shortcode will be encrypted and therefore won't be visible to spam bots.
SYNTAX:
[encrypt email="your@email.address"]
ATTRIBUTES:
Name | Description | Allowed values | Default value | Required |
The email address to encrypt | Any valid email address | - | Yes |
INSTRUCTIONS:
Simply enter a desired email address in the "email" attribute of this shortcode. The email address will then be hidden from spam bots and visible to normal visitors.
EXAMPLE:
[encrypt email="your@email.address"]
your [at] email {dot} address[button]
DESCRIPTION:
Use this shortcode to display a button.
SYNTAX:
[button title="" link="#" open_new_window="no"]
ATTRIBUTES:
Name | Description | Allowed values | Default value | Required |
title | Define the button's title (the words on the button) | Any value | - | Yes |
link | Define a link this button should point to | Any valid URL | # | No |
open_new_window | Define should the button's link open a specific URL in a new window | yes or no | no | No |
INSTRUCTIONS:
Enter the [button] shortcode anywhere you want to show the button. You can also define optional attributes as shown in the example below.
EXAMPLE:
[button title="Go to Google" link="http://www.google.com" open_new_window="yes"]
Go to Google