Shortcode Reference (bates.edu/sr)

  1. Foldaway
  2. Collapsible Areas
  3. Inline Show/Hide Added Content
  4. Tabs
  5. Call to Action Button
  6. Gallery
  7. Show Children Pages
  8. Columns
  9. Display information about someone at Bates
  10. Show a post’s content in another post
  11. Embed an Ensemble Video
  12. Embed a Website with an iframe
  13. Video with Captions
  14. Progress Bar
  15. Glossary

Note: When using shortcodes, there should not be a space after the first bracket and the element name. The space below is for display purposes only. You also may want to check out the glossary below.


1. Foldaway

This shortcode allows you to hide content inside of a container folded away from visibility. Additionally, you are able to use any of the header (H1, H2, H3, H4, H5, H6) elements to style the title of the section.

[ foldaway heading="The Section Title" level="4"]
Add your content to be folded away in this space between the brackets.
[/foldaway]
Attributes for foldaway

style – changes the default yellow background to transparent.

[ foldaway heading="The Section Title" level="4" style="transparent"]
Add your content to be folded away in this space between the brackets.
[/foldaway]
+Example with default yellow

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis nisi vitae leo pellentesque efficitur. Duis lobortis sit amet justo eget aliquet. Sed quis quam commodo, auctor libero eget, fringilla mi. Morbi dignissim massa tempus, venenatis libero sed, molestie nulla. In hac habitasse platea dictumst. Nullam tristique diam at eros blandit condimentum. Proin ultricies id tellus id vulputate. Etiam lacus quam, dapibus ut nisl quis, egestas egestas lacus. Mauris sed velit ex. Vestibulum ultricies mauris a iaculis vestibulum. Duis et tempor felis, id efficitur justo. Maecenas sodales dignissim laoreet.

 

+Example with transparent background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis nisi vitae leo pellentesque efficitur. Duis lobortis sit amet justo eget aliquet. Sed quis quam commodo, auctor libero eget, fringilla mi. Morbi dignissim massa tempus, venenatis libero sed, molestie nulla. In hac habitasse platea dictumst. Nullam tristique diam at eros blandit condimentum. Proin ultricies id tellus id vulputate. Etiam lacus quam, dapibus ut nisl quis, egestas egestas lacus. Mauris sed velit ex. Vestibulum ultricies mauris a iaculis vestibulum. Duis et tempor felis, id efficitur justo. Maecenas sodales dignissim laoreet.

 


 

2. Collapsible Areas

This shortcode gives you a clickable title bar with a section of content that slides out below. You can also link directly to the opened bar. To get that link, click the bar first and then copy the url from your browser address bar.

ttl – displays the title in the colored bar.

start – (optional) set this to “open” to make this section opened initially upon page load.

color – (optional) allows for the customization of the background color of the bar. Accepts any html color value. Ex. color=”#851326″

[ btn ttl="The Title Bar"]Lorem ipsum...[/btn]

You can create a link to open every collapsible area on the page by giving it the id “open-all-btns” like <a href=”#” id=”open-all-btns”>Click<a>

The Title Bar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porttitor eget tortor vel pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at faucibus eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam nisl sem, cursus non viverra quis, venenatis vitae dui. 

 


 

3. Inline Show/Hide Added Content

Hide a chunk of associated content behind a text link. This can be useful for small pieces of text which would otherwise interrupt the flow of the story, but which may not important enough to link the reader to another page. The link and the show/hide content need not be directly next to each other.
This shortcode has two parts, the showhide-control and the showhide-area.

Please note: the only format markup allowed inside the showhide area are bold, italic/emphasis, links, and <span>.

Attributes for showhide-control

for – A name which specifies which content area this link controls.

text – The text which will be linked.

[ showhide-control text="Click here for a definition" for="definitionArea"]
Attributes for showhide-area

name – The name used by the link to know what content area to control.

[ showhide-area name="definitionArea"]The text that would initially be hidden away.[/showhide-area]

Putting the two above examples together would render as so:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus scelerisque dui semper varius. More in Latin+ . Nunc vitae sollicitudin libero, quis congue velit. Proin purus eros, feugiat nec sapien iaculis, malesuada dapibus orci. Vivamus et sem id justo pulvinar aliquet sit amet ac metus. Nulla fermentum luctus sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum feugiat vel sem eget lobortis. In viverra ipsum urna, aliquam bibendum massa laoreet rhoncus.

 


 

4. Tabs

Displays a group of tabs which show and hide associated content. This shortcode has two parts, the tab and the tab-area. All of the tabs should be list elements (each shortcode should be a list point or <li> element).

Attributes for tab
  • for – A name which specifies which tab content area this tab controls.
  • text – The text which will be displayed on the tab.
  • initial – (optional) Use this if you want this tab to be already open when the page load. Obviously, you can only use this on one of the tabs.
  • [ tab for=”tab1″ text=”2010″]
  • [ tab for=”tab2″ text=”2011″]
  • [ tab for=”tab3″ text=”2012″ initial=”true”]
  • [ tab for=”tab4″ text=”2013″]
Attributes for tab-area

name – – The name used by the tab to know what content area to control.

[ tab-area name="tab1"]Content in area one.[/tab-area]
[ tab-area name="tab2"]Content in area two.[/tab-area]
[ tab-area name="tab3"]Content in area three.[/tab-area]
[ tab-area name="tab4"]Content in area four.[/tab-area]

Putting the two examples above together yields:

Content in area one.

Quisque laoreet diam ut tellus porta, sed faucibus lorem tempor. Etiam sed lectus sagittis, dignissim nisi sed, porttitor ligula. Mauris vitae aliquet erat. Nam rhoncus sollicitudin mauris, sed feugiat libero sollicitudin quis. Integer vehicula interdum turpis quis imperdiet. Suspendisse iaculis tempus risus, aliquet porttitor sem tincidunt ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum orci eget dolor vulputate, non dapibus nunc lacinia.

Content in area two.

Quisque laoreet diam ut tellus porta, sed faucibus lorem tempor. Etiam sed lectus sagittis, dignissim nisi sed, porttitor ligula. Mauris vitae aliquet erat. Nam rhoncus sollicitudin mauris, sed feugiat libero sollicitudin quis. Integer vehicula interdum turpis quis imperdiet. Suspendisse iaculis tempus risus, aliquet porttitor sem tincidunt ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum orci eget dolor vulputate, non dapibus nunc lacinia.

Content in area three.

Quisque laoreet diam ut tellus porta, sed faucibus lorem tempor. Etiam sed lectus sagittis, dignissim nisi sed, porttitor ligula. Mauris vitae aliquet erat. Nam rhoncus sollicitudin mauris, sed feugiat libero sollicitudin quis. Integer vehicula interdum turpis quis imperdiet. Suspendisse iaculis tempus risus, aliquet porttitor sem tincidunt ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum orci eget dolor vulputate, non dapibus nunc lacinia.

Content in area four.

Quisque laoreet diam ut tellus porta, sed faucibus lorem tempor. Etiam sed lectus sagittis, dignissim nisi sed, porttitor ligula. Mauris vitae aliquet erat. Nam rhoncus sollicitudin mauris, sed feugiat libero sollicitudin quis. Integer vehicula interdum turpis quis imperdiet. Suspendisse iaculis tempus risus, aliquet porttitor sem tincidunt ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum orci eget dolor vulputate, non dapibus nunc lacinia.

 


 

5. Call to Action Button

An inviting clickable button. This has a lot of options, but only the link is required.

Attributes

link – the url to send the user to.

type – Specify a type of button to display. See the all options+ full-button, large-button

target – (optional) Whether the link should open in a new page. To make the link open a new page, use target=”blank”.

style – Specify a varity of colors and arrows for the button. See the all options+ gray-button, blue-button, aqua-button, dark-button, white-button, with-arrow

[ cta link="http://bates.edu"]Default Button[/cta]
[ cta link="http://bates.edu" type="large-button"]Large Button[/cta]
[ cta link="http://bates.edu" type="full-button"]Full Width Button[/cta]
[ cta link="http://bates.edu" type="large-button full-button"]Large and Full Width Button[/cta]
[ cta link="http://bates.edu" style="gray-button"]Gray Button[/cta]
[ cta link="http://bates.edu" style="blue-button"]Blue Button[/cta]
[ cta link="http://bates.edu" style="aqua-button"]Aqua Button[/cta]
[ cta link="http://bates.edu" style="dark-button"]Dark Button[/cta]
[ cta link="http://bates.edu" style="white-button"]White Button[/cta]
[ cta link="http://bates.edu" style="with-arrow"]Button with arrow[/cta]
[ cta link="http://bates.edu" style="blue-button with-arrow"]Blue Button with arrow[/cta]

 

To disable the slideshow and display a regular WordPress tiled gallery, use slideshow=”false” in the shortcode.

To change the transition effect use effect=”scroll” (defaults to “fade”)

Give the ability to link to an individual slide by adding bookmarks=”true”.

Turn off captions with captions=”false” or captions=”off”

Change how long the transitions last with effectlength=”2″ (where 2 is in seconds) (defaults to .5 second)

Turn on autoplay with autoplay=”true”. Change time per slide with autospeed=”4″ (in seconds) (defaults to 4 seconds)

Hide the controls with controls=”false”. Only works when autoplay=”true” is also set.

 


 

7. Show Children Pages

Prints a list of the children pages of the current page.

[ list-children]

 


 

8. Columns

Create columns on a page. These columns turn into full width when viewed on a mobile device.

Attributes
  • width – The width keyword to make an individual column. Valid options are:
  • half
  • one-third
  • two-thirds
  • one-quarter
  • three-quarters
  • one-fifth
  • two-fifths
  • three-fifths
  • four-fifths

padding_left, padding_right, padding_top, padding_bottom – (optional) How much space to give the right side of the column before the next column shows. You can use a percentage (or other css unit for the tech saavy).

last – Use this keyword on the last column of every row.

test – (optional) Use this keyword to show outlines and background colors on each column. This can help you visualize where columns line up.

Be sure to use “last” in the last column of every row.

[ column width="one-third"]1/3[/column]
[ column last width="two-thirds"]2/3[/column]
[ column width="half"]1/2[/column]
[ column last width="half"]1/2[/column]
[ column width="one-quarter"]1/4[/column]
[ column width="one-quarter"]1/4[/column]
[ column width="one-quarter"]1/4[/column]
[ column last width="one-quarter"]1/4[/column]
[ column width="one-quarter"]1/4[/column]
[ column last width="three-quarters"]3/4[/column]
[ column width="one-fifth"]1/5[/column]
[ column last width="four-fifths"]4/5[/column]
[ column width="two-fifths"]2/5[/column]
[ column last width="three-fifths"]3/5[/column]

Colors are shown to simply display the differences of columns. When columns are applied to any page the background colors will not show.

1/3
2/3
1/2
1/2
1/4
1/4
1/4
1/4
1/4
3/4
1/5
4/5
2/5
3/5

 


 

9. Display information about someone at Bates

Attributes

id – A Bates username.

[ batesperson id="jburns"]

Henry Burns

207-786-6331

jburns@bates.edu

Bates Communications Office

Editorial Director and Bates Magazine Editor

141 Nichols Street

 


 

10. Show a post’s content in another post

This shortcode grabs the content from any other page on any other site within the Bates network and displays it as if it had been written directly on the current page.

Attributes

id – The id of the post to grab content from

blog – (optional) The name of another site in the network to look for the page/post id within.

[ purloin_content id="32295" blog="news"]

The Jimmy Bruno Trio, led by jazz guitarist Jimmy Bruno, will perform at 8 p.m. Sept 13, in the Olin Arts Center Concert Hall, 75 Russell St. General admission at the door is $10 and $5 for students and seniors. For reservations call 207-786-6135.

Bruno, first influenced by his father’s guitar work on Frank Virtue and the Virtue’s 1959 hit “Guitar Boogie Shuffle,” toured with Buddy Rich at age 19 before doing studio work and recording with Tommy Tedesco in Los Angeles. His releases on Concord Records include Burnin’, Slight of Hand, Like That and Live at Birdland. He also appeared on The Concord Jazz Guitar Collective with Alden and Frank Vignola.

Joining Bruno for the Bates concert will be his regular Philadelphia- based rhythm section: drummer Vince Ector and bassist Craig Thomas.

You can also use this shortcode in an advanced way. Using the advanced placeholders @title@, @author, and @content allows you to use the original post’s author and title, as well as have more control over where the content displays.

For example:

[ purloin_content id="51141" blog="news"]The original article was written by @author@ and was named @title@. You can read it in it's entirity here. 
@content@ [/purloin_content]
The original article was written by Bates News and was named Physics lecture to explore magnetism's effects at cellular level. You can read it here:

Brown University physicist James Valles.

A Brown University physics professor discusses the use of magnetism to alter cellular processes, such as cell division and swimming behavior, in a Bates College lecture at 2:40 p.m. Friday, Dec. 2, in Carnegie 204, 44 Campus Ave.

Sponsored by the Bates physics department, the event is open to the public and refreshments will be served.

James Valles’ talk is titled “Manipulating Life with Intense Magnetic Fields.” He will explain that while living cells tend not to be much affected by terrestrial magnetism, magnetic fields that are sufficiently intense can align certain cellular components.

Valles will describe his research into the effects of strong magnetism on such organisms as frog eggs, whose cell division is altered by its influence, and the paramecium, a single-celled organism whose swimming behavior is affected by magnetism.

Valles has taught at Brown since 1992. He received an Alfred P. Sloan Foundation Fellowship, awarded to early-career scientists with outstanding promise and unique potential to make substantial contributions to their field. Valles received his doctorate from the University of Massachusetts and his bachelor’s degree from Dartmouth College, both in physics.

 


 

11. Embed an Ensemble Video

Embed an ensemble video on the page.

Attributes

Note: All attributes are optional except contentid.

  • contentid – The id of the ensemble content.
  • url – The url of the ensemble video.
  • audio – Set this to true if there is no video, just an audio clip.
  • width – The width of the video.
  • height – The height of the video.
  • autoplay – Set to true to make the video start playing automatically when the page loads. Defaults to false.
  • hidecontrols – Set to true to hide the controls.
  • showcaptions – Set to true to display captions.
  • title – Set a title for the video.
  • displayshowcase – true/false, defaults to false.
  • displaycategorylist – Set to false to hide the category list.
  • categoryorientation – Set to vertical to display the categories vertically. Defaults to horizontal.
[ ensemblevideo contentid="ehlPkjKlmEm91hwP5ZiWgA" width="320" height="180"]

 


 

12. Embed a Website with an iframe

Attributes

url – The url to embed in the frame.

height – (optional) Height of the frame, defaults to 400px

width – (optional) Width of the frame, defaults to full width.

scrolling – (optional) Whether the frame should scroll. Allowed values are “yes”, “no”, and “auto”; defaults to no.

[ iframe url="http://bates.edu/" scrolling="yes"]

 


 

13. Video with Captions

Add image-style captions to embedded videos.

Attributes

caption – the caption to display.

width – (optional) How wide the video is. Defaults to 630.

[ video-with-captions caption="The bobcat says what?" width="630"]http://youtu.be/8f1HY46jcu0[/video-with-captions]

The bobcat says what?

 

14. Progress Bar

An animated progress bar to track a metric (to see the animation, reload this page). If you don’t specify a label, the goal number is automatically used.

Attributes
  • count – A number indicating how far the progress bar should render (in relation to the goal number).
  • goal – The goal, as a number.
  • goalText – (optional) The text that shows in the background indicating what the goal is. If not specified, the goal number will be used.
  • successText – (optional) Text to display when the goal is reached. defaults to “We did it!”
[ thermometer-gauge count="392" goal="510" goaltext="510 gifts"]

 


 

15. Glossary

Attribute

Part of the shortcode which specifies that a certain name equals a certain value.

name="value"

This is always found inside the first part of the shortcode, between the brackets.

Opening/Closing Tag

Some shortcodes have a single element like

[example]

and some have a start and ending element like

[example] content [/example]

The first element, the [example], is the opening tag, and the second one, the [/example] is the closing tag. Note the closing tag has a /.

Content Area

In shortcodes with both an opening and closing tag, the space between the tags is the content area. Highlighted below:

[example name="value"] This is the content area. [/example]