Woothemes shortcodes Canvas and other woothemes frameworks

from: http://docs.woothemes.com/document/shortcodes/

Introduction ↑ Back to Top

Included in the WooFramework are custom shortcodes that you can use in all our themes, except Storefront. Shortcodes work in posts, pages and widgets. For a comprehensive overview on WordPress shortcodes, check out the WordPress Codex.

How to use Shortcodes ↑ Back to Top

Shortcodes are added to any post, page or widget by adding the shortcode as shown in the examples below. Some shortcodes also have optional parameters so you can customize further.

When you edit a post or page, a Shortcode Generator button appears in the post editor window. This button allows you to insert a shortcode.

You can also use shortcodes in your template files via the do_shortcode() function. So if you want to add a FaceBook “Like” shortcode in all single posts, you would add this in single.php:

?php echo do_shortcode( '

' ); ?

It’s important to use echo in front of the function if you want it to display.

Video Tutorial ↑ Back to Top

Buttons ↑ Back to Top

These CSS3 buttons look amazing in all modern browsers and work fine in older browsers.

Optional arguments:
 - size: small, large
 - style: info, alert, tick, download, note
 - color: custom color (e.g red or #000000)
 - border: border color (e.g. red or #000000)
 - text: black (for light color background on button)
 - class: custom class
 - link: button link (e.g https://www.woothemes.com)
- window: true (open link in new window)

Colored Buttons

Button Button Button Button Button Button Button Button Button

Small and Large Buttons

Button Button Button Button

Icons Buttons

Button Button Button Button Button

Custom Button

Button

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
[button]Button[/button]
[button color=red]Button[/button]
[button color=orange]Button[/button]
[button color=green]Button[/button]
[button color=aqua]Button[/button]
[button color=teal]Button[/button]
[button color=purple]Button[/button]
[button color=pink]Button[/button]
[button color=silver]Button[/button]
[button size=small]Button[/button]
[button]Button[/button]
[button size=large]Button[/button]
[button size=xl]Button[/button]
[button style=alert color=silver]Button[/button]
[button style=tick color=silver]Button[/button]
[button style=info color=silver]Button[/button]
[button style=note color=silver]Button[/button]
[button style=download color=silver]Button[/button]
[button color=#f0f0f0 border=#555 style=info text=dark class=my-button]Button[/button]

Info Boxes ↑ Back to Top

Info boxes are useful, if you need to inform site visitors of something in a visual manner.

Optional arguments:
 - type: info, alert, tick, download, note
 - size: medium, large
 - style: rounded
 - border: none, full
 - icon: none OR full URL to a custom icon
This is an normal box
This is an info box
is is a rounded tick box
This is a note box
This is an download box
This is an alert box
1 2 3 4 5 6
[box]This is an normal box[/box]
[box type=info]This is a info box[/box]
[box type=tick style=rounded border=full]is is a tick box[/box]
[box type=note]This is a note box[/box]
[box type=download]This is an download box[/box]
[box type=alert]This is an alert box[/box]

Related Posts ↑ Back to Top

With this shortcode, you can show related posts by tag. This only works on posts that have existing tags on other posts.

Optional arguments:
 - limit: number of posts to show (default: 5)
 - image: thumbnail size, 0 = off (default: 0)
1

Social Buttons ↑ Back to Top

Twitter

You can add a new Twitter button to posts, so you or a visitor can share them on Twitter.

Source: http://twitter.com/goodies/tweetbutton

Optional arguments:
 - style: "horizontal", "vertical", "none" ("none" hides the counter - default: "horizontal")
 - url: specify URL directly
 - source: username to mention in tweet
 - related: related account
 - hashtag: optional hashtags to include.
 - size: optional size of the button (medium or large).
 - text: optional tweet text (default: title of page)
 - float: none, left, right (default: left)
 - lang: 'fr', 'de', 'es', 'js', 'hi', 'zh-cn', 'pt', 'id', 'hu', 'it', 'da', 'tr', 'fil', 'ko', 'sv', 'no', 'zh-tw', 'nl', 'ru', 'ja', 'fi', 'msa', 'pl' (default: english)
 - use_post_url: automatically retrieve the URL to the specific post (useful on archive screens)

 

1
[twitter]

Twitter Follow Button

You can add a Twitter Follow button to your website to show off your follower count and encourage visitors to follow you.

Source: https://dev.twitter.com/docs/follow-button

Arguments:
- username: Your Twitter username. This argument is required.

Optional arguments:
 - align: optional alignment of the button within the shortcode DIV tag container
 - count: show follower count (default is empty and true. Set to "false" to disable follower count)
 - float: none, left, right (default: left)
 - language: en, fr, de, it, es, ko, ja (default: english)
 - width: An optional width, in percentage (<strong>50%50px</strong>) format.
 - align: Used in conjunction with 'width' to align the button within the shortcode container DIV tag.
 - size: Specify the size of the button (medium or large)
 - show_screen_name: Optionally hide the display of your screen name on the button (set to "false").

 

1 2
[twitter_follow username=woothemes]
[twitter_follow username=woothemes text_color=#CC0033 link_color=#000000 language=de]

Tweetmeme

You can add a Tweetmeme button to posts, so you or a visitor can share them on Twitter.

Source: http://help.tweetmeme.com/2009/04/06/tweetmeme-button/

Optional arguments:
 - link: specify URL directly
 - style: compact
 - source: username

 

1
[tweetmeme]

Digg

Digg buttons are a great way to submit your posts to Digg.com.

Source: http://about.digg.com/button

Optional arguments:
 - link: specify URL directly
 - title: specify a title (must add link also)
 - style: medium, large, compact, icon (default: medium)
 - float: none, left, right (default: left)

 

 

1
[digg style=medium float=none]

Facebook Like

Add a “Like” button to posts, so visitors can like your story on FaceBook.

Source: http://developers.facebook.com/docs/reference/plugins/like

Optional arguments:
 - float: none (default), left, right
 - url: link you want to share (default: current post ID)
 - style: standard (default), button_count
 - showfaces: true or false (default)
 - width: 450
 - verb: like (default) or recommend
 - colorscheme: light (default), dark
 - font: arial (default), lucida grande, segoe ui, tahoma, trebuchet ms, verdana
 - locale: optionally add a locale to change the Facebook button's language (eg: de_DE for German or fr_FR for French)

 

 

1
[fblike]

Facebook Share

Add a “Share” button to posts, so visitors can share your story on FaceBook.

Source: http://developers.facebook.com/docs/share

Optional arguments:
 - type: box_count, button_count, button (default), icon_link, or icon
 - float: none, left, right (default: left)

 

 

1 2
[fbshare]
[fbshare type=button_count float=none]Custom Text[/fbshare]

Google +1

Add a “+1″ button to posts, so visitors can show friends that they like a post.

Optional arguments:
 - href: Optional specific URL to "+1". Takes the current URL if no URL is specified
 - size: standard, small, medium, tall
 - float: none, left, right (default: left)
 - annotation: none, bubble, inline (default: none)
 - callback: optional callback JavaScript function to run when the button is clicked
 - language: optionally change the language to one of the following supported languages: 
 -- Arabic
 -- Bulgarian
 -- Catalan
 -- Chinese (Simplified)
 -- Chinese (Traditional)
 -- Croatian
 -- Czech
 -- Danish
 -- Dutch
 -- English (US)
 -- English (UK)
 -- Estonian
 -- Filipino
 -- Finnish
 -- French
 -- German
 -- Greek
 -- Hebrew
 -- Hindi
 -- Hungarian
 -- Indonesian
 -- Italian
 -- Japanese
 -- Korean
 -- Latvian
 -- Lithuanian
 -- Malay
 -- Norwegian
 -- Persian
 -- Polish
 -- Portuguese (Brazil)
 -- Portuguese (Portugal)
 -- Romanian
 -- Russian
 -- Serbian
 -- Swedish
 -- Slovak
 -- Slovenian
 -- Spanish
 -- Spanish (Latin America)
 -- Thai
 -- Turkish
 -- Ukrainian
 -- Vietnamese

 

1 2
[google_plusone]
[google_plusone size=tall]

StumbleUpon Badge

Add a StumbleUpon badge to posts, so visitors can share your story on StumbleUpon.

Source: http://www.stumbleupon.com/badges/

Optional arguments:
 - design: The format to use to display the badge (horizontal_large (default), horizontal_medium, horizontal_small, icon_small, icon_large, vertical_count)
 - float: The position of the badge (left, right, none (default))
 - url: An optional URL to link to on the badge.
 - use_post: Use the most recent $post variable as the link (useful in archive screens when linking to each individual post). Alternatively, the current page URL is used.

 


Pinterest “Pin It” Button

Add a Pinterest “Pin It” to posts, so visitors can share your posts on Pinterest (featured images required).

Source: http://pinterest.com/about/goodies/

Optional arguments:
 - count: The format to use to display the counter (horizontal (default), vertical, none)
 - float: The position of the button (left, right, none (default))
 - url: An optional URL to link to on the button (defaults to current $post URL).
 - image_url: An optional image URL to link to on the button (defaults to current $post's image).
 - use_post: Use the most recent $post variable as the link (useful in archive screens when linking to each individual post).

 

1 2
[pinterest]
[pinterest url=http://woothemes.com/ design=vertical]

LinkedIn Share Button

Add a LinkedIn share button to posts, so visitors can share your posts on LinkedIn.

Source: https://developer.linkedin.com/plugins/share-plugin-generator

Optional arguments:
 - style: The format to use to display the counter (none (default), top, right)
 - float: The position of the button (left, right, none (default))
 - url: An optional URL to link to on the button (defaults to current $post URL).

Share

1 2
[linkedin_share]
[linkedin_share url=http://woothemes.com/ style=top]

Horizontal Rule ↑ Back to Top

You can break up text on a page or post by adding a horizontal rule or a divider (same as hr, only with no border). See examples in the Columns section below.

1 2 3
[hr]
[divider]
[divider_flat]

Columns ↑ Back to Top

Columns are a way to style your post or page using two to six columns. To divide text into columns, use any of the below shortcodes. Remember to use the *_last shortcode for the last column in the row.

Shortcode names use the following naming convention:numberofcolumns_columnspan_last (_last is optional)

For example: the “twocol_one” shortcode is designed to be a single column of a two-column group. Additionally, the “fourcol_two” shortcode would be a column that spans two-column areas for use in a four-column group (as shown below).

Two Columns

1 2
[twocol_one]
[twocol_one_last]

twocol_one
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

twocol_one_last
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

1 2 3 4 5 6 7 8 9 10 11 12 13
[twocol_one]
<strong>twocol_one</strong>
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.
[/twocol_one]
[twocol_one_last]
<strong>twocol_one_last</strong>
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.
[/twocol_one_last]

Three Columns

1 2 3 4
[threecol_one]
[threecol_one_last]
[threecol_two]
[threecol_two_last]

threecol_one
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

threecol_one
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

threecol_one_last
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
[threecol_one]
<strong>threecol_one</strong>
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.
[/threecol_one]
[threecol_one]
<strong>threecol_one</strong>
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.
[/threecol_one]
[threecol_one_last]
<strong>threecol_one_last</strong>
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.
[/threecol_one_last]

Four Columns

1 2 3 4 5 6 7 8
[fourcol_one]
[fourcol_one_last]
[fourcol_two]
[fourcol_two_last]
[fourcol_three]
[fourcol_three_last]
[fourcol_four]
[fourcol_four_last]

fourcol_one
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

fourcol_two
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

fourcol_one_last
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
[fourcol_one]
<strong>fourcol_one</strong>
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.
[/fourcol_one]
[fourcol_two]
<strong>fourcol_two</strong>
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.
[/fourcol_two]
[fourcol_one_last]
<strong>fourcol_one_last</strong>
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.
[/fourcol_one_last]

Five Columns

1 2 3 4 5 6 7 8
[fivecol_one]
[fivecol_one_last]
[fivecol_two]
[fivecol_two_last]
[fivecol_three]
[fivecol_three_last]
[fivecol_four]
[fivecol_four_last]

fivecol_two
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

fivcol_one
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

fivecol_two_last
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
[fivecol_two]
<strong>fivecol_two</strong>
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.
[/fivecol_two]
[fivecol_one]
<strong>fivcol_one</strong>
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.
[/fivecol_one]
[fivecol_two_last]
<strong>fivecol_two_last</strong>
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.
[/fivecol_two_last]

Six Columns

1 2 3 4 5 6 7 8 9 10
[sixcol_one]
[sixcol_one_last]
[sixcol_two]
[sixcol_two_last]
[sixcol_three]
[sixcol_three_last]
[sixcol_four]
[sixcol_four_last]
[sixcol_five]
[sixcol_five_last]

sixcol_one
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

sixcol_two
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

sixcol_three_last
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
[sixcol_one]
<strong>sixcol_one</strong>
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.
[/sixcol_one]
[sixcol_two]
<strong>sixcol_two</strong>
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.
[/sixcol_two]
[sixcol_three_last]
<strong>sixcol_three_last</strong>
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.
[/sixcol_three_last]

Quote ↑ Back to Top

Add a styled quote to your page or post and float it left or right with or without box.

Optional arguments:
 - style: boxed
 - float: left, right

Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

Aliquam maecenas molestie nullam. Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

1
[quote]Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.[/quote]

Icon Link ↑ Back to Top

Add a styled link with an icon.

Optional arguments:
 - style: download, note, tick, info, alert
 - url: the url for your link
 - icon: add an url to a custom icon

You can go ahead and Download

1

Custom Lists ↑ Back to Top

With custom lists, you can add icons instead of the normal list styling.

Optional arguments:
 - style: tick, red-x, bullet, green-dot, arrow, star

1 2 3 4 5 6 7
[unordered_list style=star]
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
[/unordered_list]

Typography ↑ Back to Top

We have custom typography shortcodes that you can use on content to style it differently: Drop cap, abbreviation, highlight and last but not least, custom fonts with all of the Google Fonts! Shortcodes are easy to add in the shortcode generator in your post edit window.

1 2 3 4
[dropcap][/dropcap]
[highlight][/highlight]
[abbr][/abbr]
[typography font= size= color=][/typography]

 

This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create a page like this one or sub-pages and manage all content inside of WordPress.

1
[dropcap]T[/dropcap]his is an example of a [abbr title=WordPress rocks!]WordPress[/abbr] page, you could edit this to put [highlight] information[/highlight] about yourself or your site so readers know where you are coming from. You can create as many pages like this one or subpages as you like and [typography size=16 font=Lobster size_format=px]manage all of your content inside of WordPress[/typography].

Tab Layout ↑ Back to Top

With the tab layout, you can create your own tabs to organize and contain a lot of information without using much real estate.

Optional Arguments:
 - style: boxed
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1 2 3 4 5 6 7 8 9
[tabs style=boxed]
[tab title=First Tab]First Tab content goes here.[/tab]
[tab title=Another Tab]Another Tab content goes here.[/tab]
[tab title=Last Tab]Last Tab content goes here.[/tab]
[/tabs]

Content Toggle ↑ Back to Top

With the content toggle, you can create your own window to hold hidden information that you can open to view.

Optional arguments:
 - title_open: The title text for when the toggle is open
 - title_closed: The title text for when the toggle is closed
 - hide: Hide the toggle box on load
 - display_main_trigger: Display the main trigger on the toggle
 - style: white
 - border: yes
1
[toggle hide=yes border=yes style=white]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/toggle]

Social Icon ↑ Back to Top

With the social icon, you can display links to your social profiles with clean and tidy icons (or use your own icon!). If only the URL is specified, the shortcode attempts to match your social profile URL with the appropriate icon from a list of supported social websites (they are listed in the icon_url select box). More icons can be found at IconFinder.

Arguments:
 - url: The link to your social profile. Specifying "feed" in this field will generate a link directly to your WordPress RSS feed.
Optional Arguments:
 - float: Optionally float the icon to the left or right.
 - icon_url: Optionally add a custom icon URL.
 - title: Optionally add a custom title for when the user hovers over your icon.
 - profile_type: Optionally specify the type of profile in use.

1 2 3 4 5 6 7 8
[social_icon url=http://facebook.com/woothemes/ profile_type=facebook title=View our Facebook Page]
[social_icon url=http://twitter.com/woothemes/ profile_type=twitter title=View our Tweets]
[social_icon url=# profile_type=delicious title=View our Delicious Bookmarks]
[social_icon url=# profile_type=youtube title=View our Youtube Channel]
[social_icon url=# profile_type=flickr title=View our Flickr Stream]
[social_icon url=# profile_type=linkedin title=View our LinkedIn Profile]
[social_icon url=http://feeds.feedburner.com/WooThemes profile_type=rss title=View our RSS Feed]
[social_icon url=# profile_type=googleplus title=View our Google Plus Profile]

Contact Form ↑ Back to Top

The contact form allows for the creation of a form-to-email solution for interaction with your visitors. It is also possible to add custom form fields to this shortcode, which are documented below.

Optional Arguments:
 - email: Use a specific e-mail address (the e-mail address listed under "Theme Settings" is used alternatively)
 - subject: A subject line for the e-mail.
 - button_text: Customise the text of the form's "submit" button.

As mentioned above, it is possible to add extra fields to this form. While this should not be used in excess, it is useful for adding one or two extra fields to your contact form. These can be added:

Text Input: text_fieldname="Text Field Label|Optional Default Text"
Select Box: select_fieldname="Select Box Label|key=value,key=value,key=value"
Textarea Input: textarea_fieldname="Textarea Field Label|Optional Default Text|Optional Number of Rows|Optional Number of Columns"
Checkbox Input: checkbox_fieldname="Checkbox Field Label|Value of the Checkbox|Checked By Default"
Radio Button Input: radio_fieldname="Radio Field Label|key=value,key=value,key=value|Optional Default Value"

Examples of each field type in use are shown below.

Default usage:

1
[contact_form]

Text Field:

text_telephone="Your Telephone Number|021-555-5555"

Select Box:

select_besttime="Best Time To Call|morning=In the Morning,afternoon=In the Afternoon,evening=In the Evening"

Textarea:

textarea_additionalnotes="Optional Additional Notes|Place any additional notes here|10|20"

Checkbox Input:

checkbox_specialoffers="Subscribe to special offers?|Yes|yes"

* NOTE: Checkbox information will only be included if the checkbox is checked. If not, the opposite is assumed.

Radio Button Input:

radio_favouriteanimal="Favourite Animal|cat=Cat,dog=Dog,rabbit=Rabbit|dog"

Full example using the above fields:

1
[contact_form text_telephone=Your Telephone Number|021-555-5555 select_besttime=Best Time To Call|morning=In the Morning,afternoon=In the Afternoon,evening=In the Evening textarea_additionalnotes=Optional Additional Notes|Place any additional notes here|10|20 checkbox_specialoffers=Subscribe to special offers?|Yes|yes radio_favouriteanimal=Favourite Animal|cat=Cat,dog=Dog,rabbit=Rabbit|dog]

Leave a comment