THIS DOCUMENTATION IS OUTDATED AND THE DOCUMENT IS NOW IN DRAFT.
Included in the WooFramework are custom shortcodes that you can use in all themes which contain the WooFramework. This excludes Storefront, Storefront child themes, and several newer themes, such as Forefront.
Shortcodes work in posts, pages and widgets. For a comprehensive overview on WordPress shortcodes, check out the WordPress Codex.
If you are looking for WooCommerce shortcodes, see this document.
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.
echo do_shortcode( '[insert facebook shortcode]' );
It’s important to use echo in front of the function if you want it to display.
Note: This is a Developer level section. We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer for assistance.
Buttons ↑ Back to top
These CSS3 buttons look amazing in all modern browsers and work fine in older browsers.
You can insert a button by using the shortcode [button]Button text[/button].
Next to that you can also add a few optional arguments to your button:
| Variable | Value |
|---|---|
color |
name of color (e.g. red) or hex values |
size |
small, large, xl |
border |
name of color (e.g. red) or hex values |
text |
dark (default is white) |
class |
custom CSS class |
style |
add an icon: alert, tick, info, note, download |
link |
URL (e.g. http://woocommerce.com) |
window |
true (opens new window) |
The format is always the following: variable="value".
For example: [button color=”#f0f0f0″ size="xl" border=”#555″ style=”info” text=”dark” class=”my-button”]Button text[/button] will give button, with
- A grey color (
color=”#f0f0f0″) - An XL size (
size="xl") - An info icon (
style=”info”), - A dark-colored border (
border=”#555″), - Dark text (
text=”dark”), and a custom CSS class (class=”my-button”, not visible).
Here are a few other examples.
Color ↑ Back to top
These shortcodes:
[button]Button[/button][button color="red"]Button[/button][button color="green"]Button[/button][button color="aqua"]Button[/button][button color="#ff69b4"]Button[/button][button color="silver"]Button[/button]
Result in the following buttons:
Size ↑ Back to top
These are the four different sizes:
size="small"- normal
size="large"size="xl"
This is the same button shortcode ([button color="silver"]Button[/button]) with different sizes:
Icons ↑ Back to top
These shortcodes:
[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]
Result in the following buttons:
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.
numbercol_columnspan_last (_last is optional)
For example: [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 ↑ Back to top
The shortcodes:
[twocol_one]Insert your text here[/twocol_one][twocol_one_last]Insert your text here[/twocol_one_last]
Result in (“Insert your text here” is replaced with longer text to show the result better, it also has a title that shows the text of the shortcode):
Three columns ↑ Back to top
The shortcodes:
[threecol_one]Insert your text here[/threecol_one][threecol_one]Insert your text here[/threecol_one][threecol_one_last]Insert your text here[/threecol_one_last]
Result in:
Four columns ↑ Back to top
The shortcodes:
[fourcol_one]Insert your text here<[/fourcol_one][fourcol_two]Insert your text here[/fourcol_two][fourcol_one_last]Insert your text here[/fourcol_one_last]
Result in:
Five columns ↑ Back to top
The shortcodes:
[fivecol_two]Insert your text here<[/fivecol_two][fivecol_one]Insert your text here[/fivecol_one][fivecol_two_last]Insert your text here[/fivecol_two_last]
Result in:
Six columns ↑ Back to top
The shortcodes:
[sixcol_one]Insert your text here<[/sixcol_one][sixcol_two]Insert your text here[/sixcol_two][sixcol_three_last]Insert your text here[/sixcol_three_last]
Result in:
Contact forms ↑ 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.
The contact form uses the following shortcode: [contact_form]. By default, this form will have:
- A name text field
- An email text field
- A message text area
Optional arguments ↑ Back to top
The following arguments can be added, in all cases you can choose what is added as the value:
| Argument | Explanation |
|---|---|
email="your@email.com" |
Sends confirmation emails from another one then is set under Theme Name > Settings > Contact Page |
subject="Message from website" |
Adds a custom subject to the email |
button_text="Send now" |
Changes the default “Submit” text to what you choose |
Extra fields ↑ Back to top
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:
| Field type | Argument |
|---|---|
| Text input | text_fieldname="Text Field Label|Optional Default Text" |
| Select box | select_fieldname="Select Box Label|key=value,key=value,key=value" |
| Text area | textarea_fieldname="Textarea Field Label|Optional Default Text|Optional Number of Rows|Optional Number of Columns" |
| Checkbox | textarea_fieldname="Textarea Field Label|Optional Default Text|Optional Number of Rows|Optional Number of Columns" |
| Radio buttons | textarea_fieldname="Textarea Field Label|Optional Default Text|Optional Number of Rows|Optional Number of Columns" |
Examples of each field type in use are shown below.
- 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" - Radio button input:
radio_favouriteanimal="Favourite Animal|cat=Cat,dog=Dog,rabbit=Rabbit|dog"
Putting it all together, your contactform could look like this: [contact_form email="your@email.com" subject="Message from website" button_text="Send now" 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"] and the visitor to your site will see:
Content toggles ↑ 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 ↑ Back to top
| Argument | Explanation |
|---|---|
title_open="Open title" |
Title text when the toggle is open |
title_close="Closed title" |
Title text when toggle is closed |
hide="no" |
Show toggle box by default (yes is default option) |
display_main_trigger="no" |
Hide trigger of toggle box (this is not advised as it might cause problems) |
style="white" |
Give toggle a white color (grey is default option) |
border="no" |
Hide border (yes is default option) |
Examples ↑ Back to top
These two toggle boxes:
[toggle title_open="This toggle is open" title_closed="This toggle is closed" style="white"]Insert text here[/toggle][toggle title_open="This toggle is open" title_closed="This toggle is closed" hide="no" border="no"]Insert text here[/toggle]
Will display in the following default:
Custom lists ↑ Back to top
With custom lists, you can add icons instead of the normal list styling. You can use the [unordered_list] shortcode.
Optionally, you can add the style="tick" argument, and replace it with one of the following options:
tickred-xbulletgreen-dotarrowstar
So depending on the above style argument, the following shortcode:
[unordered_list style="tick"]
- List item 1
- List item 2
- List item 3
[/unordered_list]
Will look like:
Horizontal rules ↑ Back to top
You can break up text on a page or post by adding a horizontal rule or a divider by using
Icon links ↑ Back to top
Add a styled link with an icon. The basic shortcode is [ilink]Text[/ilink], but you can add the following variables:
| Variable | Value | Explanation |
|---|---|---|
style |
download, note, tick, info, alert |
adds icon before link |
url |
http://yourlink.com |
where link points to |
icon |
http://yourlink.com/icon.png ) |
adds custom icon before link |
So [ilink style="download" url="http://woocommerce.com"]Download[/ilink] will result in the following links (if you replace the style and the text a few times):
Info boxes ↑ Back to top
Info boxes are useful, if you need to inform site visitors of something in a visual manner.
| Variable | Value | Explanation |
|---|---|---|
type |
download, note, tick, info, alert |
adds icon to box and changes the color |
size |
medium, large |
size of the box |
style |
rounded |
makes corners of box round |
border |
full |
add border (default is none) |
icon |
none or http://yourlink.com/icon.png |
either hide the icon or add the full URL for a custom one |
So the shortcode [box type="tick" size="large" style="rounded" border="full"]This is a rounded, large tick box with borders[/box] will display as follows:
Here are some other examples with the variables added to the explanation:
Quotes ↑ Back to top
Add a styled quote to your page or post and float it left or right with or without box.
| Variable | Value | Explanation |
|---|---|---|
style |
boxed |
puts quote in a box |
float |
left, right |
float quote left or right (default is none) |
In the example below, the [quote] shortcode is used twice. Once without extra variables, and a second time with the boxed style and the left float.
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.
| Variable | Value | Explanation |
|---|---|---|
limit |
number |
how many posts to show (default: 5) |
The example below has [related_posts limit="3"] added to the post:
Social buttons ↑ Back to top
With shortcodes, you can add social buttons to your post. Here’s an overview of all the shortcodes that are discussed below with float="left" added if it wasn’t the default:
Twitter share ↑ Back to top
You can add a new Twitter button to posts, so you or a visitor can share them on Twitter. To do that, use this shortcode: [twitter].
Optional arguments:
| Variable | Value | Explanation |
|---|---|---|
style |
horizontal, vertical, none |
where to display counter (none hides it, default is horizontal) |
url |
http://yoursite.com/ |
customize URL to mention in tweet |
source |
yourusername |
add username to mention in tweet |
size |
medium, large |
change size of button |
text |
Your Text |
add custom text to tweet (default is title of post) |
float |
left, right, none |
change where the button is positioned (default is 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 |
change language of button (default is English) |
use_post_url |
(no value) | use URL of specific post in tweet (will not work if url was specified) |
So when the user selects the Twitter button with the short code [twitter url="http://yoursite.com" source="woocommerce" text="Awesome post to read"] they will be take to the following screen:
Twitter follow ↑ Back to top
You can add a Twitter Follow button to your website to show off your follower count and encourage visitors to follow you. To do that, use this shortcode: [twitter_follow username="your_twitter_username"].
Available arguments:
| Variable | Value | Explanation |
|---|---|---|
username |
your_twitter_username |
REQUIRED – this argument is required as they cannot follow you if there is no one to follow |
count |
false |
hide followers counter (default is true) |
size |
medium, large |
change size of button |
float |
left, right, none |
change where the button is positioned (default is left) |
language |
fr, de, es, it, ko, ja |
change language of button (default is English) |
show_screen_name |
false |
hide your username (default is true) |
You can add a Twitter Follow button to your website to show off your follower count and encourage visitors to follow you.
Tweetmeme ↑ Back to top
No longer available
Digg ↑ Back to top
No longer available
Facebook Like ↑ Back to top
Add a “Like” button to posts, so visitors can like your story on Facebook. To do that, use this shortcode: [fblike].
Optional arguments:
| Variable | Value | Explanation |
|---|---|---|
style |
button_count |
change style of button (default is standard) |
url |
http://yoursite.com/ |
change URL to like (default is current post ID) |
showfaces |
true |
show faces of other people liking it (default is false) |
width |
number |
change with of the button area (add a numerical value like 450) |
verb |
recommend |
change text to “Recommend” (default is like) |
float |
left, right, none |
change where the button is positioned (default is left) |
locale |
fr_FR, de_DE |
change language of button (default is English) – other language that aren’t listed can be added too |
font |
lucida grande, segoe ui, tahoma, trebushet ms, verdana |
change font (default is arial) |
Facebook Share ↑ Back to top
Add a “Share” button to posts, so visitors can share your story on Facebook. To do that, use this shortcode: [fbshare].
Optional arguments:
| Variable | Value | Explanation |
|---|---|---|
type |
box_count, button_count, icon_link, icon |
change style of button (default is button) |
float |
left, right, none |
change where the button is positioned (default is left) |
Here are all different types in the order mentioned above (the first one is the default):
Google+ ↑ Back to top
Add a “+1” button to posts, so visitors can show friends that they like a post on Google+. To do that, use this shortcode: [google_plusone].
Optional arguments:
| Variable | Value | Explanation |
|---|---|---|
annotation |
bubble, inline |
bubble adds a counter, inline add explanation (default is none which adds an explanation upon hover) |
href |
http://yoursite.com/ |
URL specified in +1, takes post URL if not specified |
size |
small, medium, tall |
change the size (default is standard and medium is smaller than that) |
callback |
(no value) | optional JavaScript function to run when +1 is clicked |
float |
left, right, none |
change where the button is positioned (default is left) |
language |
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 |
change language of button (default is English) – other language that aren’t listed can be added too |
StumbleUpon ↑ Back to top
Add a StumbleUpon badge to posts, so visitors can share your story on StumbleUpon. To do that, use this shortcode: [stumbleupon].
Optional arguments:
| Variable | Value | Explanation |
|---|---|---|
design |
horizontal_medium, horizontal_small, icon_large, icon_small, vertical_count |
change design of badge (default is horizontal_large) |
float |
left, right |
float left or right (default is none) |
url |
http://yoursite.com/ |
add optional URL to post |
use_post |
(no value) | use most recent $post variable as link (otherwise, current URL is used) |
Pinterest Pin It ↑ Back to top
Add a Pinterest “Pin It” to posts, so visitors can share your posts on Pinterest (featured images required). To do that, use this shortcode: [pinterest].
Optional arguments:
| Variable | Value | Explanation |
|---|---|---|
count |
vertical, none |
format to display counter (default is horizontal) |
image_url |
http://yoursite.com/image.png |
add image via URL to pin (default is post’s featured image) |
url |
http://yoursite.com/ |
add other URL (default is post’s URL) |
float |
left, right |
float left or right (default is none) |
use_post |
(no value) | use most recent $post variable as link (otherwise, current URL is used) |
LinkedIn Share ↑ Back to top
Add a LinkedIn share button to posts, so visitors can share your posts on LinkedIn. To do that, use this shortcode: [linkedin_share].
Optional arguments:
| Variable | Value | Explanation |
|---|---|---|
style |
top, right |
format to display counter (default is none) |
float |
left, right |
float left or right (default is none) |
url |
http://yoursite.com/ |
add other URL (default is post’s URL) |
Social icons ↑ 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.
Available arguments:
| Variable | Value | Explanation |
|---|---|---|
url |
http://socialnetwork.com/yourusername |
REQUIRED – this links to your account (for example, ours for Facebook is “https://facebook.com/woocommerce” |
icon_url |
http://customaddress.com/icon.png |
add custom icon (otherwise default will be based on URL) |
title |
View our [insert service] profile |
change text users will see when hovering over icon |
float |
left, right |
change where the button is positioned (default is left) |
profile_type |
twitter, facebook, linkedin, etc. |
select focus of profile |
The following shortcodes:
[social_icon url="http://facebook.com/woocommerce/" profile_type="facebook" title="View our Facebook Page"][social_icon url="http://twitter.com/woocommerce/" title="View our Tweets"][social_icon icon_url="https://cdn4.iconfinder.com/data/icons/Classy_Social_Media_Icons/32/wordpress.png" url="https://www.woocommerce.com/woocommerce/" profile_type="wordpress" title="View our WordPress website"][social_icon url="https://www.youtube.com/channel/UC63GQg3s2QcgOpMzsiF6wwQ" profile_type="youtube" title="View our YouTube channel"][social_icon url="https://www.linkedin.com/company/automattic" profile_type="linkedin" title="View our LinkedIn Profile"]
Result in the following icons:
Tabs ↑ 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.
For this you build it up as following (you can add as many tabs as you want):
[tabs](to open the tabs section)[tab title="first tab"]Enter the text[/tab](to open and close a tab)[tab title="second tab"]Enter the text[/tab](to open and close a tab)
[/tabs](to close of the tabs section)
| Variable | Value | Explanation |
|---|---|---|
title |
Your tab's title |
REQUIRED – this adds a title to the tab, without title the tab cannot be selected – to be used in the child [tab] element (not the parent [tabs] one) |
style |
boxed |
changes look of tabs slightly – to be used in the parent [tabs] element (not the child [tab] one) |
Here’s an example with three tabs:
Typography ↑ Back to top
We have custom typography shortcodes that you can use on content to style it differently:
- Drop cap:
[dropcap]T[/dropcap]will display the “T” over two lines - Abbreviation:
[abbr title="WordPress"]WP[/abbr]will add a dotted line below “WP” and display “WordPress” when hovering - Highlight:
[highlight]information[/highlight]will give a highlighted background color to “information” - Typography:
[typography font="Lobster" size="16" size_format="px" color="blue"]manage all content inside of WordPress[/typography]will use the Google Font “Lobster” to “manage all content inside of WordPress” and make it 16px and blue (HEX values can also be used).
Together, it will look like this:
