Content Shortcodes

LTW Content Shortcodes is a lightweight plugin that contains some useful shortcodes to enrich your content quick and easy.

Currently the plugin supports four shortcodes:

If you wish to style any of the elements to fit into your themes design then edit file css/styles.css.

Please note that all the shortcodes listed here contain a space after the first square bracket. Remove the spaces if you are copying the shortcodes directly from this page.


[tabs title=”Tab Example” width=”500px” margin=”0 20px 20px 0″] [tab title=”Tab 1″]Tab 1 Content[/tab] [tab title=”Tab 2″ active=”true”]Tab 2 Content[/tab] [tab title=”Tab 3″]Tab 3 Content[/tab] [/tabs]

Tabs Options

[ tabs] shortcode can include the following attributes:

  • title = Title above the text. (optional)
  • width = Width of the tabs container, default is 100%. (optional)
  • margin = Margin from other elements. (optional)
  • float = Float tabs container left or right. (optional)

[ tab] shortcode which must be inside the [ tabs] shortcode can include the following attributes:

  • title = Text displayed in tab. (required)
  • active = Sets the tab active on page load. (optional)


[ tabs title="Tabs Example" width="400px" margin="0 20px 20px 0" float="left"]
[ tab title="Tab 1"]Tab 1 Content[/tab]
[ tab title="Tab 2" active="true"]Tab 2 Content[/tab]
[ tab title="Tab 3"]Tab 3 Content[/tab]
[ /tabs]


[column position=”first” size=”1/2″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget orci lorem. Proin quis purus nec enim convallis egestas non sit amet metus.[/column][column position=”last” size=”1/2″]Donec blandit consectetur libero, eu porta leo vestibulum in. In hac habitasse platea dictumst. Donec elementum, tortor eget lobortis consectetur, dui lectus scelerisque erat, quis porta lorem orci a erat.[/column]

[column position=”first” size=”1/4″]Vestibulum a magna ut elit pulvinar congue eu id mi. Suspendisse potenti.[/column][column position=”last” size=”3/4″]Vestibulum porta ullamcorper lectus vitae congue. Integer rutrum dapibus vulputate. Cras lacus lectus, ultrices ut commodo a, tincidunt eu velit. Ut faucibus auctor tincidunt. Integer magna massa, vestibulum sit amet tincidunt eget, iaculis vel justo. Praesent in lorem eu libero fermentum egestas ac vitae leo.[/column]

Column Options

[ column] shortcode has the following attributes:

  • size = Size of the column box, the following sizes are available: 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5, 4/5, 1/6, 2/6, 3/6, 4/6, 5/6(required)
  • position = Position attribute must always be present on first and last shortcode. It accepts the following values: first and last(required)


[ column position="first" size="1/2"]Column 1[/column]
[ column position="last" size="1/2"]Column 2[/column]
[ column position="first" size="1/4"]Column 1[/column]
[ column position="last" size="3/4"]Column 2[/column]
[ column position="first" size="1/4"]Column 1[/column]
[ column size="1/4"]Column 1[/column]
[ column position="last" size="2/4"]Column 3[/column]
[ column position="first" size="1/5"]Column 1[/column]
[ column size="2/5"]Column 2[/column]
[ column size="1/5"]Column 3[/column]
[ column position="last" size="1/5"]Column 5[/column]


[button href=”” value=”Button” color=”black” rel=”nofollow” target=”_blank” onclick=”alert(‘Button Was Clicked!’);” class=”custom_class” id=”btn_id”]

Button Options

[ button] shortcode has the following attributes:

  • href = You can enter URL address or anchor (#). When adding anchor, clicking the button will do nothing unless you also add the ID of some element in which case the scroll will jump to that ID. To use the anchor with ID set is as: #some_element_id. (required)
  • value = The visible value of the button. (required)
  • color = The following colors are available as a value for the attribute: blue (default), black, green, red, orange and yellow. You can easily add your own colors by defining them in CSS file. Each class must start with a prefix button_. (options)
  • rel = Specify the relationship between the current document and linked document. Add nofollow for google to not follow the link. (optional)
  • target = Set where to open the linked document. (optional)
  • onclick = Enter any Javascript code that you want. Must be in one line! (optional)
  • class and id = For extra styling you can use class and/or id. (optional)


[ button href="" value="Go to WordPress Plugins Page"]
[ button href="" value="Go to Google" color="black" rel="nofollow" target="_blank" onclick="alert('Button Was Clicked!');" id="btn_id_black"]
[ button href="#" value="Do Nothing" color="green"]
[ button href="#" value="Show Alert" color="red" onclick="alert('Red Button Was Clicked!');"]
[ button href="#" value="Orange" color="orange"]
[ button href="#black_header" value="Jump to Black Button" color="yellow"]


[toggle title=”Toggle Example” margin=”0 20px 20px 0″ status=”open”]Toggle content[/toggle]

[ toggle] shortcode has the following attributes:

  • title = If left empty the default “Toggle” will be shown. (optional)
  • margin = Margin from other elements. (optional)
  • status = Set status to open if you want the toggle to be open on page load, default is closed. (optional)
  • float = Float tabs container left or right. (optional)
  • width = Set the width of the toggle container, default is 100%. (optional)
[ toggle]Toggle content[/toggle]
[ toggle title="Toggle Example" float="left" width="400px" margin="0 20px 20px 0" status="open"]Toggle content[/toggle]
[ toggle title="Toggle Example" float="right" width="500px" margin="0 0 20px 20px"]Toggle content[/toggle]

[download_button url=””]