WooFramework Shortcodes

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.

WooFramework Shortcodes

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 your themes single.php file. Just remember to put it in between opening and closing php tags if needed.

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).

screen-shot-2016-11-18-at-17-04-38

Here are a few other examples.

Color

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:

colorbuttons

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:

screen-shot-2016-11-18-at-5-44-37-pm

Icons

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:

icons-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.

Shortcode names use the following naming convention:

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

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):

col2

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:

col3

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:

col4

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:

col5

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:

col6

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"
Note: Checkbox information will only be included if the checkbox is checked. If not, the opposite is assumed.

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:

contactform

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:

toggle

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:

  • tick
  • red-x
  • bullet
  • green-dot
  • arrow
  • star

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):

iconlinks

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:

box1

Here are some other examples with the variables added to the explanation:

box2

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 leftright 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.

quote

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:

relatedposts

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:

social

Twitter share

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

Twitter follow

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

No longer available

Facebook Like

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

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):

facebook

Google+

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

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_largeicon_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

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 verticalnone 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

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:

socialicons

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:

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:

typography

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top