Shortcodes

PL RAW

WordPress is designed to add <p></p> tags whenever you add a new line. This is great when using normal text, but when writing code or using shortcodes, it can be the cause of all sorts of issues.

To resolve this issue, we have created a utility shortcode that stops WordPress adding <p></p> tags whenever a new linebreak has been used, or in cleaning up copied code to which paragraph tags were included. Simply wrap the [pl_raw][/pl_raw] around your code/shortcode and erroneous tags will be eradicated. See examples below.

[pl_raw]
[pl_button type="btn" link="" target="blank"]Default[/pl_button]
[/pl_raw]

Please be aware that the [pl_raw] shortcode can only be used once per page.

PL CodeBox

Want to add blocks of code to your posts, pages or sections? Then the PL CodeBox shortcode is for you. It utilities Google Prettyprint, which highlights your syntax.

All you need to is firstly, activate the Google Prettify Code option which is located under DMS Toolbar → Global Options → Advanced. Once enabled, wrap your code with [pl_codebox]...[/pl_codebox].

For example:

[pl_codebox]
<div class="example">
    <h1>Hello World!</h1>
    <p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
</div>
[/pl_codebox]

Buttons

There are 7 different color schemes to choose from, as well 3 sizes; mini, default and large.

Attribute Description
type="" Controls color
size="" Determines size. Includes mini, and large
link="" Button link
target="blank" Opens link in new window

Standard Buttons

Button Description Shortcode
Standard gray button with gradient [pl_button type="btn" link="" target="blank"]Default[/pl_button]
Provides extra visual weight and identifies the primary action in a set of buttons [pl_button type="primary" link="" target="blank"]Primary[/pl_button]
Used as an alternative to the default styles [pl_button type="info" link="" target="blank"]Info[/pl_button]
Indicates a successful or positive action [pl_button type="success" link="" target="blank"]Success[/pl_button]
Indicates caution should be taken with this action [pl_button type="warning" link="" target="blank"]Warning[/pl_button]
Indicates a dangerous or potentially negative action [pl_button type="important" link="" target="blank"]Important[/pl_button]
Alternate dark gray button, not tied to a semantic action or use [pl_button type="inverse" link="" target="blank"]Inverse[/pl_button]
Link Color [pl_button type="link-color" link="" target="blank"]Link Color[/pl_button]
Link Color that looks like a link (not a button) [pl_button type="link" link="" target="blank"]Link[/pl_button]
Base color [pl_button type="page" link="" target="blank"]Page[/pl_button]
Nearly transparent background that turns to Link Inverse color on hover [pl_button type="overlay" link="" target="blank"]Overlay[/pl_button]
White outline [pl_button type="ol-white" link="" target="blank"]Outline White[/pl_button]
Black outline [pl_button type="ol-black" link="" target="blank"]Outline Black[/pl_button]
Link color outline [pl_button type="ol-link" link="" target="blank"]Outline Link[/pl_button]

Dropdown Buttons

The Dropdown button shortcode supports both size="" for button size and type="" for color control like the Standard Button shortcode.

size="" Determines size. Includes mini, and large
type="" Controls color
label="" Button label
[pl_buttondropdown size="large" type="info" label="button"]
    <ul>
        <li><a href="#">This</a></li>
        <li><a href="#">This</a></li>
        <li><a href="#">This</a></li>
    </ul>
[/pl_buttondropdown]

Split Button Dropdown

size="" Determines size. Includes mini, and large
type="" Controls color
label="" Button label
[pl_splitbuttondropdown size="large" type="success" label="button"]
<ul>
    <li><a href="#">This</a></li>
    <li><a href="#">This</a></li>
    <li><a href="#">This</a></li>
</ul>
[/pl_splitbuttondropdown]

Button Groups

You can specify the same attrbutes as the buttons above, but placed into the markup instead of the shortcode.

[pl_buttongroup]
    <a class="btn btn-important" href="#">Link</a>
    <a class="btn btn-important" href="#">Link</a>
    <a class="btn btn-important" href="#">Link</a>
[/pl_buttongroup]

Labels & Badges

Labels

Label Usage Notes
Default [pl_label type="default"]Default[/pl_label] Available attributes include default, success, warning, important, info, and inverse
Success [pl_label type="success"]Success[/pl_label]
Warning [pl_label type="warning"]Warning[/pl_label]
Important [pl_label type="important"]Important[/pl_label]
Info [pl_label type="info"]Info[/pl_label]
Inverse [pl_label type="inverse"]Inverse[/pl_label]

Badges

Badge Usage Notes
Default [pl_badge type="default"]Default[/pl_badge] Available attributes include default, success, warning, important, info, and inverse
Success [pl_badge type="success"]Success[/pl_badge]
Warning [pl_badge type="warning"]Warning[/pl_badge]
Important [pl_badge type="important"]Important[/pl_badge]
Info [pl_badge type="info"]Info[/pl_badge]
Inverse [pl_badge type="inverse"]Inverse[/pl_badge]

Modals

Modals are great for situations where it’s important that the background context be maintained. The Modal contains a title, content, along with a set of actions in the footer and can be used with Buttons, Labels and Badges.

Attribute Description
title="" Serves as the title of the modal window
type="" The type of element that triggers the modal. Available types include: btn, label, badge.
colortype="" Available color types include: info, success, warning, important, and inverse.
label="" Serves as the label for the element that opens the modal popup

[pl_modal title="Title" type="btn" colortype="info" label="Click Me!"]
Some content here for the cool modal pop up. Labels, badges, and buttons can open them!
[/pl_modal]

Tooltips & Popovers

Tooltips

Attribute Description
tip="" This is what's displayed inside the tip.
position="" Specifies the location of the tooltip. top,left,bottom,and right
This is a [pl_tooltip tip="Cool" position="right"]tooltip [/pl_tooltip] example.

Popovers

Use Popover to provide subtextual information to a page without affecting layout.

Attribute Description
position="" Specifies the location of the popover top, left, bottom and right
title="" Specifies the title of the popover.
content="" Specifies the content inside of the popover.
This is a [pl_popover title="Title" content="..." position="right"]popover[/pl_popover] example.

Alerts

Wrap any text and an optional dismiss button for a basic alert message, which supports multiple color schemes.

This is a Warning.
×This is a Success, using the .closable="yes" attribute.
This is useful Info.
×This is Important using the .closable="yes" attribute.
Attribute Description
type="" Specifies the color. Available types include: info,
closable="yes" Displays an "X" which makes alert disappear when clicked.
[pl_alertbox type="info"]
This is an error.
[/pl_alertbox]

Alert Headings

Alert Heading

This is Important.

[pl_alertbox type="info"]
    <h2 class="alert-heading">Alert Heading</h2>
    This is an error.
[/pl_alertbox]

Quotes

Attribute Description
pull="" Specifies blockquote position. Default is left, and the only other available attribute includes: right
cite="" Serves as the source of the quote
[pl_blockquote cite="Someone Famous"]
    This is a quote with a source
[/pl_blockquote]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Pull Right

[pl_blockquote pull="right" cite="Someone Famous"]
    This is a quote with a source
[/pl_blockquote]

This is a quote. Below is the source if all goes well Someone Famous

Tabs

Attribute Description
type="" Specifies...
pl_tabtitle active="" Specifies the active title tab
pl_tabtitle number="" Specifies the position of the title tab
pl_tabcontent active="" Specifies the active content tab
pl_tabcontent number="" Specifies the position of the content tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit

[pl_tabs][pl_tabtitlesection type="tabs"]
[pl_tabtitle active="yes" number="1"]Title 1[/pl_tabtitle]
[pl_tabtitle number="2"]Title 2[/pl_tabtitle]
[/pl_tabtitlesection]

[pl_tabcontentsection]
[pl_tabcontent active="yes" number="1"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit
[/pl_tabcontent]
[pl_tabcontent number="2"]
<img class="pl-imageframe" alt="" />
[/pl_tabcontent]
[/pl_tabcontentsection]

[/pl_tabs]

Accordion

Attribute Description
pl_accordion name= Serves as the ID(#) of the accordion. To have multiple accordions, specify different names.
pl_accordioncontent name= This content name must match the accordion name
number="" Indicates the order the content sections are displayed
heading="" Serves as the title of the tab
open="" Indicates whether or not the tab should be opened by default
[pl_accordion name="accordion"][pl_accordioncontent name="accordion" number="1" heading="Tile 1" open="yes"]
Content 1
[/pl_accordioncontent]
[pl_accordioncontent name="accordion" number="2" heading="Title 2"]
<img class="pl-imageframe" src="" alt="" />
[/pl_accordioncontent]
[/pl_accordion]
Lorem ipsum dolor sit amet, consectetur adipiscing elit

Carousel

Attribute Description
name="" Serves as the ID (#) of the carousel. For more than one carousel, specify distinct names
first="" Signifies the first slide in the carousel rotation
title="" Indicates the title of the slide
imageurl="" Specifies the path to the carousel image
[pl_carousel name="PageLinesCarousel"][pl_carouselimage first="yes" title="Slide 1" imageurl="" ]
Here is the first slide and it's caption.
[/pl_carouselimage]

[pl_carouselimage title="Slide 2" imageurl=""]
Here is the second slide, in all its glory.
[/pl_carouselimage]

[pl_carouselimage title="Slide 3" imageurl=""]
You can have as many slides as you can create.
[/pl_carouselimage]

[/pl_carousel]

Social Media

Button Usage Notes
[pinterest img=url(optional)] Optionally add an image url to the shortcode. If none is added one will be auto detected.
[like_button url=http://url-to-like.com] Add an optional URL to like, otherwise likes the page that the button is placed on.
[googleplus]
[linkedin]
[twitter_button]
[twitter_button type="follow"] Input Twitter handle under DMS Toolbar → Global Options → Social & Local.

Responsive Videos

A lightweight, easy-to-use shortcode for fluid width video embeds, which supports YouTube, Vimeo and Dailymotion.

Attribute Description
type="" Available types include youtube, vimeo and dailymotion
id="" ID of the video. See below for an example
[pl_video type="vimeo" id="Add video id here, see image above"]
[pl_video type="youtube" id="Add video id here, see image above"]
[pl_video type="dailymotion" id="Add video id here, see image above"]

Maps

Attribute Description
width="" Width of embedded map, in pixels or percent
height="" Height of embedded map, in pixels or percent
address="" Address of location.
[googlemap width="100%" height="300" address="San Francisco,CA"]

Charts

Attribute Description
size="" Specifies the size of the chart
bg="" Background color of chart
title="" Title of chart
labels="" Data labels, comma separated
advanced="" For l33t
type="" Type of chart: line, xyline, sparkline, meter, scatter, venn, pie, pie2d
data="" Data, separated between commas
colors="" Specifies the color of the data
[chart data="41.52,37.79,20.67,0.03" bg="F7F9FA" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Traffic Sources" type="pie"]

Traffic Sources