Shortcodes & Special Formatting

Shortcodes

(Note: In use, shortcodes are enclosed in [square brackets]. In all of the usage examples below, replace the {curly brackets} with square brackets.)

mystic_submenu

Creates a list of links to the child pages of the current page. Used on many landing pages to provide navigation. It is also possible to specify the parent page–the links are then the child pages of that designated page.

The simplest form is {mystic_submenu}.
To specify a parent page different from the current page, you’ll need the parent page’s post ID. (Edit the parent page and look in the URL.) The format is {mystic_submenu parent=”200″ child_of=”200″}, where “200″ is the parent page’s post ID.
If the parent page is a custom post type (i.e., not a “page”), you must specify the post type. For example, on the Village and Vessels landing pages (which are really “locations” rather than “pages”), the sidebar list is generated with {mystic_submenu post_type=”mystic_locations”}.

mystic-video

Displays a video with a title in our standard reverse-type bar above it . The video will be resized to fit the width of the sidebar.

{mystic-video title=”My Video”}http://www.youtube.com/watch?v=oHg5SJYRHA0{/mystic-video}. Don’t forget to replace all {curly brackets} with [square brackets].

mystic-photo

Displays an image with a title in our standard reverse-type bar above it and a “View more” text and link below. Primarily used for placing an internal “ad”, an image that links to some page, post or event, in the sidebar. The image will be resized to fit the width of the sidebar.

The simplest form just wraps the shortcode tags around the URL of the photo: {mystic-photo title=”My Photo”}URL-of-image{/mystic-photo}. Don’t forget to replace all {curly brackets} with [square brackets].
To add the text and link after the photo: {mystic-photo title=”My Photo” link=”URL-of-link” link_text=”View More”}URL-of-image{/mystic-photo}

mystic-organization

Displays the featured image and name of a sponsor or affiliate with a link to the sponsor’s or affiliate’s page. It is used primarily in the sidebar of a location or the left sidebar of an event to provide a link to a sponsor.

There is only one form: {mystic-organization name=’coca-cola’}, where the name value is the slug of the sponsor or affiliate organization page. The name is required.

Special formatting

Accordion

Displays collapsible content sections for presenting information in a limited amount of space. Each section consists of a title and an arbitrary block of content that can contain almost anything–paragraphs, lists, images–except another title. The Directions page has an example.

Create your page content, marking the title of each section as an h4. Then, using the “Text” tab in the page editor, wrap the entire content in a div with class=”mystic-accordion”, like this:

<h4>First section title</h4>
First section text.
<h4>Second section title</h4>
Second section text.

</div>

Sub- and Superscripts

HTML provides special tags for formatting subscripts and superscripts. These appear in a smaller font-size and shifted. The superscript tag is especially useful for positioning trademark symbols.

In the page editor, switch to the “Text” tab. The tags are <sub> and <sup>. Wrap your text like this: My Trademark<sup>TM</sup> and your page will display My Trademark^TM.

Two column layout

Displays content in a column that is half the usual width, allowing a two-column display. This is useful when your page content is long and narrow (often one or more lists).

Create your content. Eyeball it and decide where you want the second column to begin. In the page editor, go to the “Text” tab. Wrap each half of the content in a div with class=”col2″. Note: you will not see the content displayed in two columns in the page editor’s “Visual” tab, but it will display as intended when you publish your page.

<div class=”col2″>
First column of content
</div>

<div class=”col2″>
Second column of content
</div>