Accordion

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed dictum turpis. Pellentesque facilisis, sapien eget pellentesque varius, erat lectus placerat sapien, at mollis velit dui nec metus. Nulla suscipit erat eu lorem faucibus volutpat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed dictum turpis. Pellentesque facilisis, sapien eget pellentesque varius, erat lectus placerat sapien, at mollis velit dui nec metus. Nulla suscipit erat eu lorem faucibus volutpat.

Code:

[accordion]
[item title="Item Title 1"]Lorem ipsum...[/item]
[item title="Item Title 2"]Lorem ipsum...[/item]
[/accordion]
Important! Remove any spaces or line breaks that separate shortcode tags to prevent undesired breaks!

title displays the question or topic
class class="faq" adds "Q." before the title (see example below)


Accordion FAQ

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed dictum turpis. Pellentesque facilisis, sapien eget pellentesque varius, erat lectus placerat sapien, at mollis velit dui nec metus. Nulla suscipit erat eu lorem faucibus volutpat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed dictum turpis. Pellentesque facilisis, sapien eget pellentesque varius, erat lectus placerat sapien, at mollis velit dui nec metus. Nulla suscipit erat eu lorem faucibus volutpat.

Code:

[accordion class="faq"]
[item title="Question 1"]Lorem ipsum...[/item]
[item title="Question 2"]Lorem ipsum...[/item]
[/accordion]
Important! Remove any spaces or line breaks that separate shortcode tags to prevent undesired breaks!

Buttons

Example: “bluesteel”

This is my button 

Example: “desertsand”
This is my button 
Example: “pantherblue”
This is my button 
Example: “redflame”
This is my button 
Example: “white”
This is my button 

Code:

[button class="bluesteel" target="_blank" href="http://www.gsu.edu"]This is my button[/button]

class specify the button color: desertsand, pantherblue, redflame, bluesteel, white
id link to a page or post on the site
href link to a url
target specify to open the link in a new window/tab using target="_blank"


Carousel

Example: “pantherblue”

Code:

[carousel class="pantherblue" transition="fade"]
[slide id="5589" attachment_id="5601" alignment="topright" title="Slide 1 Title"]Sample text 1[/slide]
[slide id="5593" attachment_id="5600" alignment="bottomright" title="Slide 2 Title"]Sample text 2[/slide]
[slide id="5595" attachment_id="5602" alignment="bottomleft" title="Slide 3 Title"]Sample text 3[/slide]
[slide id="5613" attachment_id="5612" alignment="topleft" title="Slide 4 Title"]Sample text 4[/slide]
[/carousel]
Important! Remove any spaces or line breaks that separate shortcode tags to prevent undesired breaks!
Carousel:
On home page templates, to make the carousel extend past the width of the page, use <!--masthead--> immediately following the [/carousel] closing element.

class gunmetal, light, dark, pantherblue, bluesteel, skyblue, desertsand, morningmist, cosmicblue, mulberry, spearmint
transition fade, slide

 
Slide:

alignment topleft, topright, bottomright, bottomleft
attachment_id the id number of the slide image
title the desired headline for the slide


Headers with background colors

Examples:

Your Text

Your Text

Your Text

Code:

<h4 class="colorblock blue">Your Text</h4>

class colorblock toggles the use of a background color (note: if no color is indicated, the default color of blue will be used)
class combine color options blue, red, gray with colorblock, e.g. class="colorblock red"


Hero Box

Example:
carousel1x

Sample headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit integer sed dictum turpis.
Button 

Code:

[hero align="right" attachment_id="5601"]
<h2>Sample headline</h2>
Lorem ipsum...
[button id="5351"]Button[/button]
[/hero]

align left, right
attachment_id ID of the image to use in the hero box


Menu

Example: Tabs on top (default)

Embedded Menu


Code:

[menu menu="Sample Menu" title="Embedded Menu"]

menu use the exact name of the menu as it appears in the menu settings panel
title use this field to add a title bar to the embedded menu - this can differ from the technical name of the menu


Post

The [post] shortcode is intended to display a single or specific post and should not be confused with the [posts] shortcode.
Example:
1big

Sample Post 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

Code:

[post id=5589]

id id of post to be featured
title alternate title for the post
attachment_id alternate picture for the post highlight
subtitle available in the Home Page Theme only
excerpt "false" hides the excerpt for a post; useful for displaying pictures and titles only
thumbnail "false" hides the featured post image; useful for displaying links only when combined with excerpt="false"


Posts

The [posts] shortcode is intended to display multiple posts based on categories or tags and is not to be confused with the [post] shortcode.

Example:

4big

Sample Post 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

3big

Sample Post 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

2big

Sample Post 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

1big

Sample Post 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

Code:

[posts numberposts="4" type="post" excerpt="true" category="85"]

id optional ids of post to be featured
category optional category ids of posts to be featured separated by commas
tag optional tag ids of posts to be featured separated by commas
numberposts number of posts to be featured
type type of posts to pull, page or post
excerpt "false" hides the excerpt for a post; useful for displaying pictures and titles only. Note: if no excerpt exists in the excerpt box for the post or page, one will be created from the content of the referenced post/page
thumbnail "false" hides the featured post image; useful for displaying links only when combined with excerpt="false"


Row and Columns

Example: 1 Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis volutpat tincidunt. Sed vel semper enim. Praesent imperdiet lorem nulla, in tincidunt magna mattis nec.
Example: 2 Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis volutpat tincidunt. Sed vel semper enim. Praesent imperdiet lorem nulla, in tincidunt magna mattis nec.
Aliquam consectetur sodales enim posuere vestibulum. Sed eu justo sit amet enim porta ultricies. Nulla et tempus felis. Proin vel suscipit erat.
Example: 3 Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis volutpat tincidunt. Sed vel semper enim. Praesent imperdiet lorem nulla, in tincidunt magna mattis nec.
Aliquam consectetur sodales enim posuere vestibulum. Sed eu justo sit amet enim porta ultricies. Nulla et tempus felis. Proin vel suscipit erat.
Ut cursus dignissim turpis, ac sollicitudin lectus semper at. Donec placerat in diam ut varius. Fusce a lacus ut lorem condimentum dictum.
Example: 4 Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis volutpat tincidunt. Sed vel semper enim. Praesent imperdiet lorem nulla, in tincidunt magna mattis nec.
Aliquam consectetur sodales enim posuere vestibulum. Sed eu justo sit amet enim porta ultricies. Nulla et tempus felis. Proin vel suscipit erat.
Ut cursus dignissim turpis, ac sollicitudin lectus semper at. Donec placerat in diam ut varius. Fusce a lacus ut lorem condimentum dictum.
Aliquam ultricies suscipit nulla, et rutrum enim interdum ac. Duis aliquet sodales magna, quis rutrum odio lobortis at. Aliquam sit amet lorem feugiat, euismod eros elementum, laoreet est.

 

Code:

[row]
[column]Lorem ipsum...[/column]
[/row]
Note: Add additional [column]...[/column] elements to create additional columns within a row.

Important! Remove any spaces or line breaks that separate shortcode tags to prevent undesired breaks.

Important! On home page templates, do not exceed 4 columns in a given [row], on pages with a rail, do not exceed 2 columns.

The row and column shortcodes are used to place content in evenly spaced columns. Columns size automatically based on the number of columns used and the page template. These shortcodes are typically combined with the [box], [post] or [posts] shortcodes to create different layouts. The [menu] and twitter shortcodes may also be used in columns.

One Column – Single Post Feature

Example:

1big

Sample Post 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

 
Code:

[row][column][post id=5589][/column][/row]

Post attributes: left, right

When used in a single [row][column]. A “Jumbo Feature” is created with the picture to the left of the Title and Excerpt.

Two Columns with Post

Example:

1big

Sample Post 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

2big

Sample Post 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

Code:

[row][column][post id=5593][/column][column][post id=5595][/column][/row]

Three Columns with Post

Example:

1big

Sample Post 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

2big

Sample Post 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

3big

Sample Post 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

Code:

[row][column][post id=5589][/column][column][post id=5593][/column][column][post id=5595][/column][/row]

Four Columns with Post

Example:

1big

Sample Post 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

2big

Sample Post 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

3big

Sample Post 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

4big

Sample Post 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

Code:

[row][column][post id=5589][/column][column][post id=5593][/column][column][post id=5595][/column][column][post id=5613][/column][/row]
Note: To add vertical dashed-line dividers between the columns, add the code class="featured" to the [row] shortcode.

Important! Remove any spaces or line breaks that separate shortcode tags to prevent undesired breaks!


Columns with Post and Posts

Example:

1big

Sample Post 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

4big

Sample Post 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

3big

Sample Post 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

2big

Sample Post 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

1big

Sample Post 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ante non magna viverra, sit amet tincidunt magna congue. Integer lacinia pulvinar ipsum, pretium convallis… more »

Code:

[row][column][post id=5589][/column][column][posts numberposts="4" type="post" excerpt="true" category="85"][/column][/row]

Tabs

Example: Tabs on top (default)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at quam fermentum, posuere sapien egestas, ultricies elit. Duis condimentum gravida neque. Mauris metus nulla, malesuada sit amet orci auctor, fringilla volutpat metus.
Mauris lobortis dignissim egestas. Vestibulum auctor vel massa nec volutpat. Aenean volutpat gravida mauris cursus mattis. Quisque pharetra id orci quis consequat. Vestibulum porttitor felis nec dui ultricies semper.

Code:

[tabs position=""]
[item title="Top Tab 1"]Lorem ipsum...[/item]
[item title="Top Tab 2"]Mauris lobortis...[/item]
[/tabs]
Important! Remove any spaces or line breaks that separate shortcode tags to prevent undesired breaks!
Note: currently only one tab construct can be used per page/post

position left, right will place the tabs to the left or right of the content, leave blank to place the tabs above the content
url url to open when tab is selected
style leave blank for the default style of tabs or use style="header" to create the 'header' style variation


Tabs – Header style

Example: Tabs on top (default)

Code:

[tabs style="header" position=""]
[item title="Top Tab 1"]Lorem ipsum...[/item]
[item title="Top Tab 2"]Mauris lobortis...[/item]
[/tabs]
Important! Remove any spaces or line breaks that separate shortcode tags to prevent undesired breaks!
Note: currently only one tab construct can be used per page/post

Vimeo

Example:

Code:

[embed width="640"]
https://vimeo.com/58041390
[/embed]
A plugin has been added which embeds a Vimeo video using nothing more than the url of the video.

If a specific size is not desired, then the [embed][/embed] elements are not required.

Important! To make the video a specific size, you must use [embed][/embed] elements around the direct link with the desired size indicated in the [embed].

Formatting of the code is critical. The initial [embed] must be on one line, the vimeo link on the second line and the [/embed] on the third line. Remove any other unnecessary spaces.


YouTube Video

Example:

Code:

https://www.youtube.com/watch?v=8qXnw84ERGU&width=640&height=360
A plugin has been added which embeds a YouTube video using nothing more than the url of the YouTube video. The height, width and other attributes of the video may be used by adding parameters to the url such as &width=640.

Details on use of the plugin are available here: http://wordpress.org/plugins/youtube-embed-plus/