This page contains examples of many of the shortcodes available to you together with variations.

The more obvious shortcodes, such as columns, are not listed except for the 1/2 + 1/2 columns.

The area below each sample displays the codes used which can be copied and pasted to your editor window…

Remember to use the ‘paste as text’ icon.


Not all shortcodes are available to tutors!

Some shortcodes may appear in the list of dropdown values but they have been deactivated for tutors. The following are not available:-

  1. Content > HTML
  2. Content > Preformatted text
  3. Posts – all options not available
  4. Actions – all options not available
  5. Wrappers – all options not available
  6. [edit-selection]

Sample Content

Sample Content

[wc_row]
[wc_column size="one-half" position="first"]
Sample Content
[/wc_column]
[wc_column size="one-half" position="last"]
Sample Content
[/wc_column]
[/wc_row]

Options : Each value can be edited after using the initial shortcode generator window.

URL = where the link goes to, TITLE = the tooltip seen when hovered, TARGET = either _blank or empty where _blank opens a new window and empty opens in the same window, REL = nofollow or empty where ‘nofollow’ tells search engines to ignore the link, ICON_LEFT or RIGHT = adds an icon, POSITION = the position of the button on the page, CLASS = optional extra CSS setting (advanced).


Primary Secondary Inverse Success Warning Danger Info

External link to Max Rubner-Institut Internal link to News page

// Primary button
[wc_button type="primary" url="#" title="Primary" target="" url_rel="" icon_left="" icon_right="" position="" class=""]Primary[/wc_button] 
// Secondary button
[wc_button type="secondary" url="#" title="Secondary" target="" url_rel="" icon_left="" icon_right="" position="" class=""]Secondary[/wc_button] 
// Inverse button
[wc_button type="inverse" url="#" title="Inverse" target="" url_rel="" icon_left="" icon_right="" position="" class=""]Inverse[/wc_button] 
// Success button
[wc_button type="success" url="#" title="Success" target="" url_rel="" icon_left="" icon_right="" position="" class=""]Success[/wc_button] 
// Warning button
[wc_button type="warning" url="#" title="Warning" target="" url_rel="" icon_left="" icon_right="" position="" class=""]Warning[/wc_button] 
// Danger button
[wc_button type="danger" url="#" title="Warning" target="" url_rel="" icon_left="" icon_right="" position="" class=""]Danger[/wc_button] 
// Info button
[wc_button type="warning" url="#" title="Info" target="" url_rel="" icon_left="" icon_right="" position="" class=""]Info[/wc_button]
// External website with icon
[wc_button type="danger" url="https://www.mri.bund.de/de/home/" title="Max Rubner-Institut" target="blank" url_rel="nofollow" icon_left="external-link" icon_right="" position="" class=""]External link to Max Rubner-Institut[/wc_button] 
// Internal link with icon
[wc_button type="inverse" url="https://technology-training.courses/news/" title="News page" target="" url_rel="" icon_left="newspaper-o" icon_right="" position="" class=""]Internal link to News page[/wc_button]

Options : Each value can be edited after using the initial shortcode generator window.

TITLE = the words seen in the title, HEADING TYPE = H1 is considered the most import and H6 the least , MARGIN Top/Bottom = add spacing above and below the heading if required, TEXT ALIGN = positions the heading to the left or right, COLOR = sets a custom colour, ICON LEFT/RIGHT = adds an icon, SPACING = adds extra spacing between the icon and title.


Plain H1 - default colour

H2 with custom colour and icon

Sample Content

// H1 with default settings
[wc_heading title="Plain H1 - default colour" heading_type="h1" margin_top="" margin_bottom="" text_align="left" font_size="" color="" icon_left="" icon_right="" icon_spacing="" class=""]
// H2 with custom colour and icon
[wc_heading title="H2 with custom colour and icon" heading_type="h2" margin_top="" margin_bottom="" text_align="left" font_size="" color="#dd9933" icon_left="pencil" icon_right="" icon_spacing="" class=""]
// H3 with custom colours and icon set to the right
[wc_heading title="Sample Content" heading_type="h3" margin_top="25px" margin_bottom="25px" text_align="right" font_size="" color="#8224e3" icon_left="" icon_right="hand-o-left" icon_spacing="30px" class=""]

This line of text has some words highlighted to add emphasis!

This line of text has some words highlighted to add emphasis!

This line of text has some words highlighted to add emphasis!

This line of text has some words highlighted to add emphasis!

This line of text has some words highlighted to add emphasis!

// Blue
This line of text has [wc_highlight color="blue" class=""] some words [/wc_highlight] highlighted to add emphasis!
//Grey or gray!
This line of text has [wc_highlight color="gray" class=""] some words [/wc_highlight] highlighted to add emphasis!
// Green
This line of text has [wc_highlight color="green" class=""] some words [/wc_highlight] highlighted to add emphasis!
// Red
This line of text has [wc_highlight color="red" class=""] some words [/wc_highlight] highlighted to add emphasis!
// Yellow
This line of text has [wc_highlight color="yellow" class=""] some words [/wc_highlight] highlighted to add emphasis!

Options : Each value can be edited after using the initial shortcode generator window.

STYLE = line type, LINE = single or double, MARGIN Top/Bottom = space above and below.


Solid single :


Dashed single :


Dotted single :


Image 1 single :


Image 2 single :


Image 3 single :


Solid double :


Dashed double :


Dotted double :


Image doubles – n/a

// Solid single
[wc_divider style="solid" line="single" margin_top="" margin_bottom="" class=""][/wc_divider]
// Dashed single
[wc_divider style="dashed" line="single" margin_top="" margin_bottom="" class=""][/wc_divider]
// Dotted single
[wc_divider style="dotted" line="single" margin_top="" margin_bottom="" class=""][/wc_divider]
// Image 1 single
[wc_divider style="image" line="single" margin_top="" margin_bottom="" class=""][/wc_divider]
// Image 2 single
[wc_divider style="image2" line="single" margin_top="" margin_bottom="" class=""][/wc_divider]
// Image 3 single
[wc_divider style="image3" line="single" margin_top="" margin_bottom="" class=""][/wc_divider]
// Solid double
[wc_divider style="solid" line="double" margin_top="" margin_bottom="" class=""][/wc_divider]
// Dashed double
[wc_divider style="dashed" line="double" margin_top="" margin_bottom="" class=""][/wc_divider]
// Dotted double
[wc_divider style="dotted" line="double" margin_top="" margin_bottom="" class=""][/wc_divider]

Set within 3 columns, so the code is used three times. Each value can be edited after using the initial shortcode generator window. Note the last column – it doesn’t have to be a ‘pricing’ table, think of it as an easy table!

Primary
$19.99
per month
  • 30GB Storage
  • 512MB Ram
  • 10 databases
  • 1,000 Emails
  • 25GB Bandwidth
Inverse
$19.99
per month
  • 30GB Storage
  • 512MB Ram
  • 10 databases
  • 1,000 Emails
  • 25GB Bandwidth
Glucose
Main Attributes
non GMO
  • Sweetness
  • Granularity
  • Easy solution
  • Transportable
  • Colour options
[wc_row]
[wc_column size="one-third" position="first"]
[wc_pricing type="primary" plan="Primary" cost="$19.99" per="per month" button_url="#" button_text="Sign Up" button_target="" button_rel="nofollow" class=""]
    30GB Storage
    512MB Ram
    10 databases
    1,000 Emails
    25GB Bandwidth
[/wc_pricing]
[/wc_column]
[wc_column size="one-third"]
[wc_pricing type="inverse" plan="Inverse" cost="$19.99" per="per month" button_url="#" button_text="Sign Up" button_target="" button_rel="nofollow" class=""]
    30GB Storage
    512MB Ram
    10 databases
    1,000 Emails
    25GB Bandwidth
[/wc_pricing]
[/wc_column]
[wc_column size="one-third" position="last"]
[wc_pricing type="secondary" plan="Glucose" cost="Main Attributes" per="non GMO" button_url="#" button_text="Sugar Weekly Magazine" button_target="_blank" button_rel="nofollow" class=""]
    Sweetness
    Granularity
    Easy solution
    Transportable
    Colour options
[/wc_pricing]
[/wc_column]
[/wc_row]

These can be used as progress markers, skills identifiers or even ingredients. Set here in a 1/3rd column and a 2/3rds column.

HTML
92%
CSS2
87%
PHP
63%
Powerpoint
68%
Excel
76%
MS Windows
81%
WordPress
52%
Pregelatinized starches
55%
Cross-linked starches
49%
Oxidized starches
72%
Anionic starches
54%
Acetylated starches
49%
Dextrins
72%
Grafted starches
87%
[wc_skillbar title="Cross-linked starches" percentage="49" color="#f084ff" show_percent="1" class=""]
[wc_skillbar title="Oxidized starches" percentage="72" color="#2767c6" show_percent="1" class=""]
[wc_skillbar title="Anionic starches" percentage="54" color="#a3e067" show_percent="1" class=""]
[wc_skillbar title="Acetylated starches" percentage="49" color="#eadf04" show_percent="1" class=""]
[wc_skillbar title="Dextrins" percentage="72" color="#38179b" show_percent="1" class=""]
[wc_skillbar title="Grafted starches" percentage="87" color="#aa4446" show_percent="1" class=""]

Options : Each value can be edited after using the initial shortcode generator window. Setting some values will be trial and error!

ATTACHMENT ID =click into the field and start typing your image title, TITLE = this is the text seen on hover, ALT = text used when images turned off in a browser, CAPTION = additional description, LINK_TO = do not use, URL = until this allows _blank to open in a new window do not use, ALIGN = positions the image, SIZE = select the size of image from the list, TEXT_ALIGN = positions text withing the background, FLAG = the label or words seen, LEFT/right/top/bottom = positions the flag, TEXT_COLOR = the text colour, BACKGROUND_COLOR = background colour, FLAG_WIDTH = sets the width of the flag containing your words.


// Insert Any Image
[wc_image attachment_id="3107" title="Wheat Grain cut-away" alt="Wheat Grain" caption="" link_to="" url="" align="" size="full" text_align="center" flag="Insert Any Text" left="20" right="0" top="0" bottom="0" text_color="#ffffff" background_color="#000000" flag_width="200" class=""][/wc_image]
// Wheat Grain cut-away
[wc_image attachment_id="3107" title="Wheat Grain cut-away" alt="Wheat Grain" caption="" link_to="" url="" align="" size="full" text_align="center" flag="Wheat Grain cut-away" left="160" right="0" top="0" bottom="60px" text_color="#ffffff" background_color="#dd3333" flag_width="195" class=""][/wc_image]
// Wholewheat
[wc_image attachment_id="3107" title="Wheat Grain cut-away" alt="Wheat Grain" caption="Caption Added " link_to="" url="" align="right" size="full" text_align="center" flag="Wholewheat" left="0" right="177" top="0" bottom="199px" text_color="#ffffff" background_color="#235db3" flag_width="115" class=""][/wc_image]

Inside a 2/3 column

Primary Box with text aligned to the left and no margins top or bottom have been set

Secondary Box with text aligned to the right and no margins top or bottom have been set

Inverse Box with text aligned to the left and no margins top or bottom have been set

Success Box with text aligned to the centre and 50px margins set for both top and bottom.

The MARGIN puts a gap above (top) or below (bottom) of your box.

Warning Box with text aligned to the right and no top margins but a 90px bottom margin

Danger Box with text aligned to the left and no margins top or bottom have been set

Info Box with text aligned to the centre and a 330px top margin have been set

Inside a 1/3rd column

Primary Box with text aligned to the left and no margins top or bottom have been set

Secondary Box with text aligned to the right and no margins top or bottom have been set

Inverse Box with text aligned to the left and no margins top or bottom have been set

Success Box with text aligned to the centre and 50px margins set for both top and bottom. The MARGIN puts a gap above (top) or below (bottom) of your box.

Warning Box with text aligned to the right and no top margins but a 30px bottom margin

Danger Box with text aligned to the left and no margins top or bottom have been set

Info Box with text aligned to the left and no margins top or bottom have been set

// Inside a 2/3 column
[wc_box color="primary" text_align="left" margin_top="" margin_bottom="" class=""]
Primary Box with text aligned to the left and no margins top or bottom have been set
[/wc_box]
[wc_box color="secondary" text_align="right" margin_top="" margin_bottom="" class=""]
Secondary Box with text aligned to the right and no margins top or bottom have been set
[/wc_box]
[wc_box color="inverse" text_align="left" margin_top="" margin_bottom="" class=""]
Inverse Box with text aligned to the left and no margins top or bottom have been set
[/wc_box]
[wc_box color="success" text_align="center" margin_top="50px" margin_bottom="50px" class=""]
Success Box with text aligned to the centre and 50px margins set for both top and bottom.
The MARGIN puts a gap above (top) or below (bottom) of your box.
[/wc_box]
[wc_box color="warning" text_align="right" margin_top="" margin_bottom="90px" class=""]
Warning Box with text aligned to the right and no top margins but a 90px bottom margin
[/wc_box]
[wc_box color="danger" text_align="left" margin_top="" margin_bottom="" class=""]
Danger Box with text aligned to the left and no margins top or bottom have been set
[/wc_box]
[wc_box color="info" text_align="center" margin_top="330px" margin_bottom="" class=""]
Info Box with text aligned to the centre and a 330px top margin have been set
[/wc_box]

TTC Cookie Policy

Our website uses cookies to improve your experience. Please visit our Cookie Policy page for more information about cookies and how we use them.

I accept cookies