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

Tab Example

Tab 1 Content
Tab 2 Content
Tab 3 Content

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)

Examples

[ 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]

Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget orci lorem. Proin quis purus nec enim convallis egestas non sit amet metus.
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.

Vestibulum a magna ut elit pulvinar congue eu id mi. Suspendisse potenti.
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 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)

Examples

[ 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]

Buttons

Button

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)

Examples

[ button href="http://www.lessthanweb.com/wordpress-plugins" value="Go to WordPress Plugins Page"]
[ button href="http://www.google.com" 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

Toggle Example close
Toggle content

[ 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

36 responses on “Content Shortcodes

  1. Cris

    Hi , thank you for the plugin

    I have made a few tabs but they dont change when i press , only one that shows is the one with the active bit in code

    Thanks in advance

  2. David

    plugin is great, but ran into one issue. I have 2 togglegroups set up on a page, one with 5 items, then a divider and a new heading and then a togglegroup with 3 items. the odd thing is the second toggle group is pulling items 4 and 5 from the first toggle group? so i can’t have only 3 items in the second group.

Leave a Reply