User Manual – Shortcodes

Shortcodes

Click the shortcodes button in either the WYSIWYG or HTML Editors to insert a shortcode

Shortcode Generator

Tagline

Demo →

Attribute Description Values Default
fleuron Whether or not to include the fleuron below the tagline
  • on
  • off
on

The content of this shortcode is used as the content for the tagline. Example:

He who uses fewest shortcodes laughs last

Button

Demo →

Attribute Description Values Default
color Button’s color
  • default
  • green
  • blue
  • red
  • grey
  • purple
  • yellow
default
light Whether the text should be light/white (on) or a darker shade of the button color (off).
  • on
  • off
on
large Display a large button
  • on
  • off
off
full_width Switch on to expand the button the full width of its container, rather than sizing to its text
  • on
  • off
off
href The target link for this button string (URL)
tag The HTML tag to use
  • a
  • button
a
target Set to _blank to open in a new window
  • _blank
  • _top

The content of this shortcode is used as the content for the button. Example:

Full Width Button

Portfolio

Demo →

Attribute Description Values Default
id This is the ID of the portfolio you created in the Portfolio Constructor. It is provided in the starter
shortcode displayed in the interface
integer none – required
grid_columns The width of an individual portfolio item in grid columns. If placed in a full-width (16 column) layout,
this would create a 4-column portfolio (16/4 = 4). Normally you would want to choose a number that divides
evenly into the container value. f indicates full-width. The fraction values will work with either
11 or 16 column containers.
  • 1-4
  • 1-3
  • 1-2
  • 2-3
  • f
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
4
container The width of the portfolio’s container in grid columns. For example, if placed in a blog post or a non-full-width
page, you would set this to 11. This is important so that Agility can properly calculate the number of items
per row.
  • 11
  • 16
16
title The title to display above the portfolio (optional) string empty
excerpt
  • on
  • off
off
wrap
  • on
  • off
on

The content of the portfolio is determined by the settings in the PortfolioConstructor for this portfolio. Example:


	

	

Alert Boxes

There are three alert box shortcodes: notice, warning, and error

Demo →

Attribute Description Values Default
title The title of the alert box (optional) string empty
html Set to on if you wish to include your own HTML to style the content
  • on
  • off
off

The content of this shortcode is used as the content for the alert. Example:

This is a notification alert

Congratulations on your wonderful decision to purchase Agility!

This is a warning

Biohazard. Do not inject into eyeballs.

This is an error

Oh boy. You shouldn't have done that. Better ball up in the corner and hide until teacher gets here.

Google Maps

Demo →

Attribute Description Values Default
zoom The zoom value for the map. Higher numbers are zoomed in further integer 1-22 (this can change) 8
lat The decimal latitude coordinate for the location to display. decimal empty
lng The decimal longitude coordinate for the location to display. decimal empty
address Use the address option to geocode your map location on the fly and place a marker. string empty
title The title for the map marker (optional) string empty
height 150px
width 100%

Example:

Social Media

The social media usernames are drawn from the Agility Control Panel Settings

Demo →

Attribute Description Values Default
order Set a manual order for the social media icons. This allows you to reorder and include only social media icons you want. A list of social media names, separated by comma

  • twitter
  • facebook
  • forrst
  • dribbble
  • vimeo
  • youtube
  • linkedin
  • pinterest
The standard order from the Agility Control Panel

Example:



	

Testimonial

The testimonial shortcode is simply a wrapper for a blockquote with a class “testimonial”. You may prefer to use the
HTML form instead

Demo →

Attribute Description Values Default
from The author of the testimonial. This is equivalent to “cite” in the blockquote. string empty

The content of this shortcode is used as the content for the testimonial. Example:

Boy is this great. If I could slather it on toast and eat it for breakfast I would.Happy Customer 1

Tabs

Creating tabs requires two nested shortcodes: the

    wrapper with 2 or more
  • shortcodes inside it.

    Because of WordPress’s auto paragraph and textualize filters, you can’t add returns between your tabs – unless you wrap the
    whole thing in the [raw] shortcode

    Demo →

    The [_tab_contents] shortcode is just a wrapper and does not require any attributes

    For the individual

  • shortcodes, you can set the tab title and whether or not the tab is active (currently shown)

    Attribute Description Values Default
    title The title which will be displayed in the tab label. string empty
    active Whether or not to make this the active tab when first rendered. You should apply active=”on” to
    only one of your tabs.
    • on
    • off
    off

    The content of the

  • shortcode will be displayed in the tab panel. Example:

    [_tab_contents]
  • By the side of a wood, in a country a long way off, ran a fine stream of water; and upon the stream there stood a mill. The miller’s house was close by, and the miller, you must know, had a very beautiful daughter. She was, moreover, very shrewd and clever; and the miller was so proud of her, that he one day told the king of the land, who used to come and hunt in the wood, that his daughter could spin gold out of straw. Now this king was very fond of money; and when he heard the miller’s boast his greediness was raised, and he sent for the girl to be brought before him. Then he led her to a chamber in his palace where there was a great heap of straw, and gave her a spinning-wheel, and said, ‘All this must be spun into gold before morning, as you love your life.’ It was in vain that the poor maiden said that it was only a silly boast of her father, for that she could do no such thing as spin straw into gold: the chamber door was locked, and she was left alone.
  • There was a man who had three sons, the youngest of whom was called Dummling, and was despised, mocked, and sneered at on every occasion.

    It happened that the eldest wanted to go into the forest to hew wood, and before he went his mother gave him a beautiful sweet cake and a bottle of wine in order that he might not suffer from hunger or thirst.

    When he entered the forest he met a little grey-haired old man who bade him good day, and said: ‘Do give me a piece of cake out of your pocket, and let me have a draught of your wine; I am so hungry and thirsty.’ But the clever son answered: ‘If I give you my cake and wine, I shall have none for myself; be off with you,’ and he left the little man standing and went on.

  • By the side of a wood, in a country a long way off, ran a fine stream of water; and upon the stream there stood a mill. The miller’s house was close by, and the miller, you must know, had a very beautiful daughter. She was, moreover, very shrewd and clever; and the miller was so proud of her, that he one day told the king of the land, who used to come and hunt in the wood, that his daughter could spin gold out of straw. Now this king was very fond of money; and when he heard the miller’s boast his greediness was raised, and he sent for the girl to be brought before him. Then he led her to a chamber in his palace where there was a great heap of straw, and gave her a spinning-wheel, and said, ‘All this must be spun into gold before morning, as you love your life.’ It was in vain that the poor maiden said that it was only a silly boast of her father, for that she could do no such thing as spin straw into gold: the chamber door was locked, and she was left alone.

Toggles

Toggles provide the ability to easily show and hide content

Demo →

Attribute Description Values Default
title The title which will always be displayed (click it to expand the toggle panel). string empty
htag The header tag to use for the title.
  • h3
  • h4
  • h5
  • h6
h5
start Whether to start the toggle in the open or closed state.
  • closed
  • open
closed

The content of the

Set a toggle title attribute
shortcode will be displayed in the toggle panel. Example:

There was a man who had three sons, the youngest of whom was called Dummling, and was despised, mocked, and sneered at on every occasion.

It happened that the eldest wanted to go into the forest to hew wood, and before he went his mother gave him a beautiful sweet cake and a bottle of wine in order that he might not suffer from hunger or thirst.

When he entered the forest he met a little grey-haired old man who bade him good day, and said: ‘Do give me a piece of cake out of your pocket, and let me have a draught of your wine; I am so hungry and thirsty.’ But the clever son answered: ‘If I give you my cake and wine, I shall have none for myself; be off with you,’ and he left the little man standing and went on.
This toggle starts open
By the side of a wood, in a country a long way off, ran a fine stream of water; and upon the stream there stood a mill. The miller’s house was close by, and the miller, you must know, had a very beautiful daughter. She was, moreover, very shrewd and clever; and the miller was so proud of her, that he one day told the king of the land, who used to come and hunt in the wood, that his daughter could spin gold out of straw. Now this king was very fond of money; and when he heard the miller’s boast his greediness was raised, and he sent for the girl to be brought before him. Then he led her to a chamber in his palace where there was a great heap of straw, and gave her a spinning-wheel, and said, ‘All this must be spun into gold before morning, as you love your life.’ It was in vain that the poor maiden said that it was only a silly boast of her father, for that she could do no such thing as spin straw into gold: the chamber door was locked, and she was left alone.

Accordion

Accordions are groups of toggles which only display one at a time. Simply wrap

Set a toggle title attribute
s in the
shortcode to create accordions.


[/accordion]

(New in Agility 2.0)

Slider

Demo →

Attribute Description Values Default
id This is the ID of the slider you created in the SliderConstructor. It is provided in the starter
shortcode displayed in the interface
integer none – required
size The width of the slider’s container in pixels, used to determine the optimal size of the image to load. Use 940 for
full-width sliders, or 640 for left-column content (11 grid columns).
  • 940
  • 640
940
crop Whether or not to crop the slides in this slider to your default aspect ratio, set in the Agility Control Panel
  • on
  • off
off

The slides that appear in the slider are determined by the settings in the SliderConstructor for this slider ID. Example:


				
				
  • NJCIE: Creating bright futures for children with disabilities through inclusive education

Agility implements a custom, responsive version of the standard WordPress Gallery shortcode.

Raw

Important Notice: Deprecated Function

As of Agility 2.0, this functionality is deprecated, and is deactivated by default. While you can re-enable it in the Control Panel, it is recommended to discontinue use in favor of the new “Disable Automatic Formatting” option found on individual posts and pages.

WordPress adds extra line break (br) and paragraph (p) tags to your post and page content via two filters called autop
and texturize. Most of the time this is helpful, but sometimes it just gets in the way, adding erroneous tags where
they don’t belong

If you find WordPress is adding tags in the middle of your content (two common places where this is an issue is form
elements and other shortcodes), you can wrap those elements in the [raw] shortcode to prevent WordPress
from going tag-crazy

For example, the shortcodes provided by the SliderConstructor and Portfolio Construction are pre-wrapped in
[raw] tags to avoid this issue

Basic structure:

[raw] 
				
				
  • NJCIE: Creating bright futures for children with disabilities through inclusive education
[/raw]

Raw shortcode courtesy of CSS Tricks


UI Elements

Many of these UI elements have shortcode equivalents, but it is generally better to use the actual HTML
rather than the shortcodes

Buttons

Button Demo

It’s easy to insert buttons. You can style anchors, button elements, or submit buttons as buttons.

						
						Click me!
						
						
						
						
						
						
					

To change the color, just add the appropriate class:

						
						Click me!
						
						
						
						
						
						
					

To make the text light instead of dark, add the .button-lighttext class.

						
						Click me!
						
						
						
						
						
						
					

To make the button full-width with centered text, add the .full-width class.

						
						Click me!
					

To create larger buttons, add the .button-large class.

						
						Click me!
					

Color Options

  • button (light grey default)
  • button-green
  • button-blue
  • button-red
  • button-grey
  • button-purple
  • button-yellow

Tabs

Tab Demo

Skeleton Tabs Documentation →

Tabs are created by creating two adjacent unordered lists. The first contains the navigational
tabs, and the second contains the content. The list items are linked together by href
id

						
						

						
						
  • The tabs are clean and simple unordered-list markup and basic CSS.
  • The tabs are cross-browser, but don't need a ton of hacky CSS or markup.
  • The tabs work like a charm even on mobile devices.

Alert boxes

Alert Box Demo

Agility comes with 3 styles of alert boxes: notification (green), warning (yellow), and error (red).

						
						
This is a notificaiton alert.

Congratulations on your wonderful decision to purchase Agility!

This is a warning alert.

Caution! Do not push the red button!

This is an error alert.

You just had to push that button, didn't you? Well, that's it, it's all over...

Horizontal Rules

Horizontal Rule Demo

Agility includes several types of horizontal rules.

						
						



Blockquotes

Blockquote Demo

Blockquotes are normally full width. Use the cite element to provide attribution.

						
This is a normal block quote. After silence, that which comes nearest to expressing the inexpressible is music. Aldous Huxley

Pullquote Demo

To use a pullquote in a paragraph, use the .pullquote class before the start of a paragraph:

						
Yes, it is a dull beginning. I say, let us pretend that it is the end. Peter Pan, by J.M Barrie

Paragraph text...

Taglines

Tagline Demo

Taglines can be used for extreme emphasis, generally on your home page.

						
This is a tagline, you can use it for extreme emphasis.

Lists

List Demo

Agility offers several lists styles that employ different bullet types. Just add the appropriate class.

						
						
						
  • Peter Pan
  • The Adventures of Huckleberry Finn
  • Wuthering Heights
  • The Odyssey
  • Alice's Adventures in Wonderland
  • Peter Pan
  • The Adventures of Huckleberry Finn
  • Wuthering Heights
  • The Odyssey
  • Alice's Adventures in Wonderland
  • Peter Pan
  • The Adventures of Huckleberry Finn
  • Wuthering Heights
  • The Odyssey
  • Alice's Adventures in Wonderland
  • Peter Pan
  • The Adventures of Huckleberry Finn
  • Wuthering Heights
  • The Odyssey
  • Alice's Adventures in Wonderland