Plus » Shortcodes¶

SE RO KA FL ES BR AN

Plus only

This functionality is only available in the Plus themes.

The Plus themes include a set of advanced shortcodes built with Bootstrap that can be used to create advanced layouts, structures and make frontend web development faster and simpler.

Please see the dedicated tutorial for additional information and the theme demos for visual examples.

Configurable Prefix¶

The theme's shortcodes can prepend a custom defined prefix to avoid overlapping with other shortcodes provided by plugins. This prefix is configurable in the theme's Miscellaneous options.

When a custom prefix is used all shortcodes need to include that prefix for all their identifiers. For example, if the defined prefix is custom_:

[button]Button Text[/button]

turns to

[custom_buton]Button Text[/custom_button]

Shortcodes already entered in the content are not updated when the prefix is changed and need to be edited manually to remain functionality if a prefix is added (or changed).

Available Shortcodes¶

Grid¶

Can be used to create custom content columns of varying widths, while keeping the content fully responsive.

[row class="row"]
    [col class="col-sm-1″]One column cell[/col]
    [col class="col-sm-2″]Two columns cell[/col]
    [col class="col-sm-3″]Three columns cell[/col]
    [col class="col-sm-6″]Six columns cell[/col]
[/row]

One row can contain at most 12 columns, so your cell widths must add up to 12 without exceeding (or they’ll wrap to next row).
For complete info about the grid system, see the Bootstrap documentation.

Tabs¶

Can be used to create content tabs. They supports an unlimited number of tabs and any length of content, including nested inner shortcodes. Apply the active class to the tab that should be open by default.

[tabs]
    [thead]
        [tab href="#tab1" title="First tab"]
        [tab href="#tab2" title="Second Tab"]
    [/thead]
    [tabgroup]
        [tabinner id="tab1" class="active"]First tab content[/tabinner]
        [tabinner id="tab2"]Second tab content[/tabinner]
    [/tabgroup]
[/tabs]

Accordion¶

Can be used to create vertical collapsible content blocks. It can be configured to display either a single accordion panel at a time or toggle them independently, and comes with several visual styles.

[collapse id="accordion-1" scheme="light-1|light-2|dark-1|dark-2"]
    [citem id="accordion-section-1" parent="accordion-1" title="Collapsible Group Item 1" open="true|false"]Some content[/citem]
    [citem id="accordion-section-2" parent="accordion-1" title="Collapsible Group Item 2" open="true|false"]Some more content[/citem]
    [citem id="accordion-section-3" parent="accordion-1" title="Collapsible Group Item 3" open="true|false"]Even more content[/citem]
[/collapse]

The id attribute of the container collapse and parent attribute of the inner citem elements need to be unique for each accordion on a page and should match within the same accordion.

To have the accordion sections toggle independently, do not include a parent attribute on the inner citem elements. The open attribute sets the section's initial state (which defaults to false).

Alert¶

Provides contextual feedback messages for typical user actions with several flexible styles.

[notification type="success|warning|info|danger" dismissible="true|false"]Alert text[/notification]

Button¶

Is one of the core design elements and our Plus themes bundle quite a few styles for them.

[button size="md" type="primary" href="#link" target="_self|_blank"]Button Text[/button]

[button size="md" type="primary|secondary"]Uses the theme's first or second accent color[/button]

[button size="md" type="light|dark"]Use a light or dark color scheme[/button]

[button size="md" type="success|info|warning|danger|link"]Use one of the Bootstrap styles[/button]

[button size="xs|sm|md|lg" type="primary"]Create buttons of various sizes[/button]

[button size="block" type="primary"]A full-width block button[/button]

Label¶

Another contextual design element, useful at making specific information more obvious.

[label type="primary|secondary"]Use the theme's first or second accent color[/label]

[label type="light|dark"]Use a light or dark color scheme[/label]

[label type="success|info|warning|danger|link"]Use one of the Bootstrap styles[/label]

Well¶

Use wells on content to give it an inset effect.

[well size="sm|md|lg"]Inner content[/well]

Lead¶

Makes a paragraph stand out by making it a lead. Leads have configurable font family and text size.

[lead fontfamily="default|title-font|headings-font" fontsize="default"]
    A lead with theme-configured font family and default text size.
[/lead]

[lead fontsize="70|80|90..."]A lead with custom font size. Value is a percentage of container font size.[/lead]

[lead fontfamily="helvetica|segoeui|verdana|geneva|futura|georgia|timesnewroman|palatino|bakersville|courier"]
    A lead with custom font family.
[/lead]

Pullquote¶

Can be used on key phrases, quotations, or excerpts that have been pulled from an article and used as graphic element, serving to entice readers into the article or to highlight a key topic.

[pullquote align="alignleft|alignright" fontfamily="default" fontsize="default"
    size="col-md-1|col-md-2|...|col-md-12"]
    Content text
[/pullquote]

The fontfamily and fontsize parameters are the same as on the Lead shortcode.

Is useful at displaying additional "hover boxes" of information about the item (word) being hovered.

[tooltip placement="top|right|bottom|left" 
    trigger="hover|focus|click" 
    title="Tooltip pop-up text"]
    Content text triggering the tooltip
[/tooltip]

Clear¶

Forces a CSS clear following float elements. Has no configurable parameters.

[clear]

Divider¶

Can be used to better separate distinct parts of content. Dividers have configurable height and before/after spacing (values are in pixels).

[divider height="10" margin_top="30" margin_bottom="50"]

Map¶

Insert a predefined Google map inside the content at a configurable size (width and height are in pixels).

[map width="800" height="400" url="#map-url"]

Icon¶

Enhance the content with over 350 contextual icons and insert them anywhere they're needed and at any size, including combining them with other shortcodes, or inside other shortcodes content.

[icon name="glyphicon IDENTIFIER" size="xs|sm|md|lg|xl|hb"]

The IDENTIFIER can have one of the following values:

Block Icons¶

blicon-apartment
blicon-arrow-down
blicon-arrow-left
blicon-arrow-right
blicon-arrow-up
blicon-badge
blicon-bag
blicon-basket
blicon-bell
blicon-book
blicon-book-open
blicon-bookmark
blicon-briefcase
blicon-bubble
blicon-bubbles
blicon-bug
blicon-bulb
blicon-bulb2
blicon-bullhorn
blicon-calculator
blicon-calendar
blicon-calendar2
blicon-calender
blicon-camera
blicon-chart
blicon-check
blicon-check2
blicon-chemistry
blicon-chemistry2
blicon-clock
blicon-cloud
blicon-cloud-download
blicon-cloud-upload
blicon-cloud2
blicon-code
blicon-cog
blicon-compass
blicon-construction
blicon-cross
blicon-cross2
blicon-cross3
blicon-cup
blicon-cup2
blicon-cup3
blicon-data
blicon-data2
blicon-diamond
blicon-diamond2
blicon-direction
blicon-directions
blicon-disc
blicon-dislike
blicon-docs
blicon-download
blicon-drawar
blicon-drop
blicon-earth
blicon-energy
blicon-envolope
blicon-equalizer
blicon-eye
blicon-eye2
blicon-eyeglass
blicon-feed
blicon-fire
blicon-fire2
blicon-flag
blicon-folder
blicon-folder2
blicon-gift
blicon-globe
blicon-globe2
blicon-graduation
blicon-graph
blicon-grid
blicon-hand
blicon-heart
blicon-heart2
blicon-history
blicon-home
blicon-home2
blicon-hourglass
blicon-hourglass2
blicon-info
blicon-key
blicon-keyboard
blicon-laptop
blicon-laptop-phone
blicon-layers
blicon-layers2
blicon-layout
blicon-leaf
blicon-license
blicon-like
blicon-link
blicon-link2
blicon-list
blicon-list2
blicon-location
blicon-lock
blicon-magic-wand
blicon-magnifier
blicon-mail
blicon-map
blicon-megaphone
blicon-menu
blicon-microphone
blicon-minus
blicon-minus2
blicon-music-tone-alt
blicon-news
blicon-news2
blicon-note
blicon-notebook
blicon-paperclip
blicon-paperclip2
blicon-paperplane
blicon-params2
blicon-paypal
blicon-pencil
blicon-pencil2
blicon-phone
blicon-picture
blicon-picture2
blicon-pie-chart
blicon-pie-chart2
blicon-pin
blicon-plane
blicon-play
blicon-plus
blicon-plus2
blicon-pointer-down
blicon-pointer-left
blicon-pointer-right
blicon-pointer-up
blicon-present
blicon-printer
blicon-puzzle
blicon-question
blicon-question-circle
blicon-redo
blicon-refresh
blicon-reload
blicon-rocket
blicon-screen
blicon-screen-desktop
blicon-screen-smartphone
blicon-screen-tablet
blicon-search
blicon-settings
blicon-settings2
blicon-share
blicon-share2
blicon-smartphone
blicon-speech
blicon-speedometer
blicon-spell-check
blicon-stack
blicon-star
blicon-star-empty
blicon-star-half
blicon-store
blicon-study
blicon-support
blicon-sync
blicon-tablet
blicon-tag
blicon-tag2
blicon-target
blicon-text-format
blicon-text-size
blicon-thumbs-down
blicon-thumbs-up
blicon-toggle
blicon-trash
blicon-trophy
blicon-umbrella
blicon-undo
blicon-unlink
blicon-unlock
blicon-upload
blicon-user
blicon-user2
blicon-users
blicon-users2
blicon-wallet
blicon-warning
blicon-wrench

Meta Icons¶

icon-archive
icon-arrow-bold-down
icon-arrow-bold-left
icon-arrow-bold-right
icon-arrow-bold-up
icon-arrow-down
icon-arrow-left
icon-arrow-long-down
icon-arrow-long-left
icon-arrow-long-right
icon-arrow-long-up
icon-arrow-right
icon-arrow-up
icon-arrow-with-circle-down
icon-arrow-with-circle-left
icon-arrow-with-circle-right
icon-arrow-with-circle-up
icon-attachment
icon-beamed-note
icon-book
icon-bookmark
icon-bookmarks
icon-box
icon-browser
icon-calendar
icon-camera
icon-ccw
icon-chat
icon-check
icon-chevron-down
icon-chevron-left
icon-chevron-right
icon-chevron-small-down
icon-chevron-small-left
icon-chevron-small-right
icon-chevron-small-up
icon-chevron-thin-down
icon-chevron-thin-left
icon-chevron-thin-right
icon-chevron-thin-up
icon-chevron-up
icon-chevron-with-circle-down
icon-chevron-with-circle-left
icon-chevron-with-circle-right
icon-chevron-with-circle-up
icon-circular-graph
icon-clipboard
icon-clock
icon-code
icon-compass
icon-cross
icon-cw
icon-cycle
icon-display
icon-dots-three-horizontal
icon-earth
icon-edit
icon-eye
icon-folder
icon-grid
icon-heart
icon-heart-outlined
icon-home
icon-hour-glass
icon-hour-glass2
icon-image
icon-image-inverted
icon-images
icon-infinity
icon-info
icon-info-with-circle
icon-level-down
icon-level-up
icon-library
icon-link
icon-location2
icon-magnifying-glass
icon-mail
icon-megaphone
icon-menu
icon-message
icon-mic
icon-minus
icon-mobile
icon-mobile2
icon-new-message
icon-news
icon-note
icon-office
icon-pencil
icon-phone
icon-plus
icon-price-tag
icon-printer
icon-quote
icon-reply
icon-sphere
icon-spinner
icon-spinner10
icon-spinner2
icon-spinner3
icon-spinner4
icon-spinner5
icon-spinner6
icon-spinner7
icon-spinner8
icon-spinner9
icon-star
icon-star-outlined
icon-sweden
icon-tablet
icon-tag2
icon-text-document
icon-text-document-inverted
icon-time-slot
icon-triangle-down
icon-triangle-left
icon-triangle-right
icon-triangle-up
icon-typing
icon-user
icon-users
icon-video
icon-el-angle-down
icon-el-angle-left
icon-el-angle-right
icon-el-angle-up
icon-el-arrows-cw
icon-el-aside
icon-el-attach
icon-el-audio
icon-el-basket
icon-el-basket-circled
icon-el-bell
icon-el-block
icon-el-book
icon-el-bookmark
icon-el-calendar-circled
icon-el-camera
icon-el-cancel
icon-el-category
icon-el-category2
icon-el-certificate
icon-el-cloud
icon-el-cog
icon-el-cog-circled
icon-el-cogs
icon-el-comment
icon-el-comments
icon-el-date
icon-el-desktop
icon-el-doc
icon-el-down
icon-el-down-dir
icon-el-down-open
icon-el-edit
icon-el-edit-2
icon-el-edit-alt
icon-el-eye
icon-el-eye-off
icon-el-flag
icon-el-folder-close
icon-el-folder-open
icon-el-headphones
icon-el-help-circled
icon-el-home
icon-el-home-1
icon-el-image
icon-el-inbox
icon-el-info
icon-el-left
icon-el-left-dir
icon-el-left-open
icon-el-lightbulb
icon-el-link
icon-el-location
icon-el-mail
icon-el-menu
icon-el-mic
icon-el-mic-circled
icon-el-minus
icon-el-move
icon-el-ok
icon-el-phone
icon-el-plus
icon-el-print
icon-el-quote
icon-el-resize-full
icon-el-resize-full-alt
icon-el-resize-horizontal
icon-el-resize-small
icon-el-resize-vertical
icon-el-right
icon-el-right-dir
icon-el-right-open
icon-el-rss
icon-el-search
icon-el-share
icon-el-star
icon-el-star-circled
icon-el-star-empty
icon-el-tag
icon-el-tags
icon-el-tasks
icon-el-thumbs-down
icon-el-thumbs-up
icon-el-time
icon-el-trash
icon-el-trash-circled
icon-el-up
icon-el-up-dir
icon-el-up-open
icon-el-user
icon-el-video
icon-el-volume
icon-el-volume-down
icon-el-volume-off
icon-el-volume-up
icon-el-warning
icon-el-wrench
icon-el-wrench-circled
icon-el-zoom-in
icon-el-zoom-out

socicon-500px
socicon-99designs
socicon-about
socicon-aim
socicon-amazon
socicon-android
socicon-angellist
socicon-appnet
socicon-appstore
socicon-beer
socicon-bitbucket
socicon-bitcoin
socicon-buffer
socicon-calendar
socicon-cart
socicon-chrome
socicon-cloud
socicon-code
socicon-codeopen
socicon-creativecommons
socicon-delicious
socicon-digg
socicon-disqus
socicon-dribbble
socicon-dropbox
socicon-drupal
socicon-duckduckgo
socicon-dwolla
socicon-ebay
socicon-email
socicon-eventbrite
socicon-eventful
socicon-evernote
socicon-facebook
socicon-feed
socicon-firefox
socicon-flattr
socicon-flickr
socicon-foursquare
socicon-github
socicon-github2
socicon-gmail
socicon-googleplay
socicon-googleplus
socicon-grooveshark
socicon-hackernews
socicon-instagram
socicon-instapaper
socicon-intensedebate
socicon-internetexplorer
socicon-itunes
socicon-klout
socicon-lanyrd
socicon-lastfm
socicon-link
socicon-link2
socicon-linkedin
socicon-lkdto
socicon-meetup
socicon-mobile
socicon-myspace
socicon-openid
socicon-opentable
socicon-opera
socicon-paypal
socicon-phone
socicon-phone2
socicon-phone3
socicon-pinboard
socicon-pinterest
socicon-plancast
socicon-plurk
socicon-pocket
socicon-podcast
socicon-quora
socicon-reddit
socicon-scribd
socicon-skype
socicon-smashingmagazine
socicon-songkick
socicon-soundcloud
socicon-spotify
socicon-stackoverflow
socicon-steam
socicon-stripe
socicon-stumbleupon
socicon-support
socicon-tumblr
socicon-twitch
socicon-twitter
socicon-twitter2
socicon-viadeo
socicon-vimeo
socicon-vk
socicon-weibo
socicon-wikipedia
socicon-windows
socicon-wordpress
socicon-xing
socicon-yahoo
socicon-yelp
socicon-youtube

Jetpack Portfolio¶

This is s a customized theme version of the one provided by Jetpack. It includes additional content control options and is integrated into the theme's design.

[portfolio columns="1|2|3|4|5|6" showposts="1-100" 
    order="ASC|DESC" orderby="author|date|time|random" 
    include_type="0|specific-type-slug" 
    include_tag="0|specific-tag-slug" 
    display_types="true|false" 
    display_tags="true|false" 
    display_content="true|false" 
    display_author="true|false"]