Skip to content

This template comes with a variety of shortcodes for layout and content formatting. These short-codes include basic layout columns, tabs, accordions, content toggles, information boxes and buttons.

Attention: Please make sure to always enter a line break before and after the shortcode. Most of the time you won’t encounter any errors if you don’t, but unfortunatley WordPress does mess up the HTML sometimes.

Here’s a list of all shortcodes included:

Typography

  • h1
  • h2
  • h3
  • h4
  • h5
  • medium text size
  • code
  • cite
  • highlight
  • acronym
  • deleted text

Utilities

  • divider
  • icon boxes
  • icon boxes centered

Buttons

  • small
  • medium
  • large

Columns

  • 1/3
  • 2/3
  • 1/4
  • 2/4
  • 3/4
  • 1/5
  • 2/5
  • 3/5
  • 4/5

Other interface elements

  • tabs
  • accordion
  • toggle item
  • YouTube/Vimeo video
  • Widget icon
  • Map

Social

  • Facebook
  • Twitter
  • Flickr

Shortcode usage

[h1], [h2], [h3], [h4], [h5]

[h1]Header text[/h1]

[medium], [code], [cite], [highlight], [acronym], [del], [quote], [pullquote], [divider]

  • [medium]Your content[/medium]
  • [code]Your code[/code]
  • [acronym title="Cascading Style Sheets"]CSS[/acronym]
  • [cite author="Author name" link="author website"]Text[/cite]
  • [divider]

[iconbox]

The icon box shortcode parameters are: center, iconsize, url and title. [iconbox center url="image url" iconsize="64" title="Title"]descriptive text[/iconbox]

If you set "center" parameter iconsize is not required.

[button-small], [button-medium], [buttom-large]

Colors available are Red, Green, Blue, Yellow, Graphite, Grey, Purple and Brown. You can also use the link="" attribute to add a URL to your button, "http://" will be automatically added.

[button-small color="red" link="www.google.com"]button text[/button-small]

[one-third], [two-third], [one-fourth], [two-fourth], [three-fourth], [one-fifth], [two-fifth], [three-fifth], [fo ur-fifth]

[one-third]Your content here[/one-third]

There’s also a special class "last" for the last column in a row, Eg. [one-third]Your content[/one-third] [two-third last]Your content[/two- third]

[tabs], [tab]

Clicking on Tabs -> Tab container you’ll create a simple 2 tabs structure can you easily modify. The Tabs -> Single tab button create a single tab that you can insert into your tab structure. Here a simple tab shortcode structure:

[tabs][tab title="tab title"]Tab content[/tab] [tab title="tab title"]Tab content[/tab][/tabs]

[accordion], [nested-accordion]

You have two type of accordion, simple and nested. Here a simple accordion structure: [accordion title="Title example"]Content of accordion[/accordion] [accordion title="Title example 2"]Content of accordion 2[/accordion]. If you need a nested accordion you need to replace accordion content with your nested-accordion shortcode. [accordion title="Title example"] [nested-accordion title="Title example"]Content of accordion[/nested-accordion] [nested-accordion title="Title example 2"]Content of accordion 2[/nested-accordion] [/accordion] [accordion title="Title example 2"]Content of accordion 2[/accordion].

Use the first_element_opened attribute to have the toggle opened by default.

[toggle], [buttom-large]

Here’s an example of the toggle shortcode structure: [toggle title="title"]Toggle content[/toggle]. Use the open attribute to have the toggle opened by default.

Here’s an example of the video shortcode structure: `` This shortcode supports both Youtube and Vimeo embedding, the only thing you need is the video url. Eg.`

[icon]

Here’s an example of the icon shortcode: [icon url="your image url"]. This shortcode adds the ability to insert an icon on a text widget, you can use this for create something like a services promo widget, you can use an external or a local icon.

[pricingtable]

This shortcode adds a pricing table columns structure to the page. You can control the columns number with the cols parameters: [pricingtable cols="3"] Each plan can be generated with the following shortcode: [plan color="" head_color="" title="Starter" price="FREE" price_tag="" button_url="http://www.google.com" button_text="sign up" button_color="grey"]Plan contents[/plan] Plans can be "featured": just add the "featured" attribute to the plan shortcode.

[thb_map]

Here’s an example of the icon shortcode: [thb_map title="" latlong="10,10" zoom="10", height="200" width="300"]. This shortcode adds the ability to insert a map in your page, based on your contact information.

[thb_social]

Here’s an example of the icon shortcode: [thb_social]. This shortcode displays the social
icons of the services you’ve set a username for.

[thb_twitter]

Here’s an example of the icon shortcode: [thb_twitter twitter_id="thehappybit" twitter_count="3"]. This shortcode displays your latest tweets.

[thb_flickr]

Here’s an example of the icon shortcode: [thb_flickr flickr_id="50614773@N07" flickr_count="3"]. This shortcode displays your latest photos from your Flickr stream.

[thb_page]

Here’s an example of the page shortcode: [thb_page].

This shortcode adds the ability to insert a page content in your text.

[thb_latest_posts]

Here’s an example of the latest posts shortcode: [thb_latest_posts numposts="3" showthumb="1"].

This shortcode displays your latest posts from your blog.

[thb_popular_posts]

Here’s an example of the popular posts shortcode: [thb_popular_posts title="" numposts="3" showthumb="1"]. This shortcode displays the popular posts from your blog.

[thb_category_posts]

Here’s an example of the category posts shortcode: [thb_category_posts title="" numposts="3" showthumb="1" cat="2"]. This shortcode displays posts from your blog belonging to a specific category.

[thb_latest_works]

Here’s an example of the latest works shortcode: [thb_latest_works numposts="3" showthumb="1"]. This shortcode displays your latest works from your portfolio.

[thb_testimonials]

Here’s an example of the testimonials shortcode: [thb_testimonials id="" items="3" style="1" title=""] The shortcode displays the latest testimonials.