Shortcodes Documentation

Shortcode Generator

Our themes come with many powerful shortcodes that help you create complex layouts and beautiful effects with ease. With the Shortcode Generator, you don't need to remember any shortcode syntax in order to use them. Simply access the Shortcode Generator from admin bar and generate your shortcode with a few clicks.


Custom List

[custom_list style="star" color="cyan"]
List item 1
List item 2
List item 3
[/custom_list]
  • List item 1
  • List item 2
  • List item 3

Color Box

[color_box color="cyan"]
your content here
[/color_box]
your content here

Color Table

[color_table color="cyan" width="100%" alternate="true"]
COL1 Heading COL2 Heading
Item R1C1 Item R1C2
Item R2C1 Item R2C2
Item R3C1 Item R3C2
[/color_table]
COL1 HeadingCOL2 Heading
Item R1C1Item R1C2
Item R2C1Item R2C2
Item R3C1Item R3C2
Tips: To specify the table's data, simply copy the cells from an Excel worksheet, paste them in between the shortcode tag.

Color Button

[color_button color="cyan" url="http://..." size="regular"]
Order Now
[/color_button]

Text Icon

[text_icon icon="certificate"] [text_icon icon="magic"] [text_icon icon="comment"] [text_icon icon="gift"]

click here for full list of text icons.


Circled Icon

[circled_icon icon="certificate" color="#33ADAD"]
[circled_icon icon="magic" color="#33ADAD" size="large"]
[circled_icon icon="comment" color="#33ADAD"]
[circled_icon icon="gift" color="#33ADAD" size="large"]

click here for full list of circled icons.


Filterable Photos

[filterable_photos random="true"]

To use this shortcode feature, simply upload photos to Media from a page/post, then the shortcode will display them as a filterable gallery. For each photo, use the "Alternative Text" box in Media to specify the photo's category name.

Click here to see demo.


Galleria

[galleria height="350" caption="true"]

To use this shortcode feature, simply upload photos to Media from a page/post, then the shortcode will display them as a gallery with small thumbnails.
Click here to see demo.


Carousel

[carousel items="3" scroll="1" speed="2" direction="left"]
<img src="…." />
<div>….</div>
<img src="…." />
[/carousel]

Insert div or img to the carousel shortcode tag and they will be displayed in cycle. The "items" parameter specify how many items are visible and the "scroll" parameter specify how many items are scrolled at a time.

Click here to see demo.


Container

[container]
[one_third]...[/one_third]
[two_third]...[/two_third]
[/container]

The container shortcode is used to wrap columns shortcodes and price column shortcode. It is designed to help your content to display properly in responsive layout.


Columns

[container]
[one_half][/one_half] - [one_half][/one_half]
[one_third][/one_third] - [two_third][/two_third]
[two_third][/two_third] - [one_third][/one_third]
[one_fourth][/one_fourth] - [third_fourth][/third_fourth]
[third_fourth][/third_fourth] - [one_fourth][/one_fourth]
[one_fourth][/one_fourth] - [one_fourth][/one_fourth] - [one_half][/one_half]
[one_half][/one_half] - [one_fourth][/one_fourth] - [one_fourth][/one_fourth]
[/container]

Columns shortcodes help you to format your content by columns. Container shortcode is required to wrap the columns in order to display the content properly in responsive layout.


Price Column

[price_column color="red" url="http://..." heading="Service Plan" currency="$" price="100" term="per month" width="200" button="Order Now" featured="true"]
your content here
[/price_column]

Use multiple price column shortcodes to display a price table. The "url" is the forwarded location when the button in the price column is clicked. Set the "featured" parameter to "true" will highlight the price column with gradient border.

Click here to see demo.


Divider

[divider]

Similar to the horizontal rule <hr />, this shortcode is a horizontal separator with style.


Tabs

[tabsgroup]
[tab title="Title"]tab's content here[/tab]
[tab title="Title"]tab's content here[/tab]
[/tabsgroup]

Use tabsgroup and tab shortcodes to create multiple tabs container.


Accordion

[accordion]
[section title="Title"]section's content here[/section]
[section title="Title"]section's content here[/section]
[/accordion]

Use accordion and section shortcodes to create toggle sections container to make contents collapsible and expandable.


Google Map

[google_map address="your address" width="400" height="300"]

This shortcode display a Google map of your address with specified size. The address can be zip code, full address or anything that is searchable in Google Map.


YouTube Video

[youtube_video url="http://..." width="400" height="300"]

This shortcode display an embedded YouTube video with specified size. The width can be a fix number or percentage.


Facebook Box

[facebook_box url="http://..." header="true" border="true" faces="true" width="350" height="220"]

This shortcode display a Facebook Like/Fan Box with specified size. You can optionally display the header, border and fan's avatar.


Social Icon

[social_icon social="facebook" size="medium"]
[social_icon social="twitter" size="medium"]
[social_icon social="linkedin" size="medium"]
[social_icon social="pinterest" size="medium"]
[social_icon social="google_plus" size="medium"]

The social icon shortcodes come with 3 sizes: small, medium and large.


Testimonial

[testimonial name="John Doe" title="President" avatar="http://..." width="100%"]
This is a testimonial...line 1
This is a testimonial...line 2
This is a testimonial...line 3
[/testimonial]
This is a testimonial...line 1
This is a testimonial...line 2
This is a testimonial...line 3
John Doe
President

This shortcode display a formatted testimonial with optional avatar. It is common to combine with a carousel shortcode to display multiple testimonials.

Back to Documentations

Browser Compatibility

AnyWP themes are tested in all major browsers.

Latest News