Shortcodes

Post shortcodes are accessible via the GUI Shortcode Generator. Simply click the Shortcodes drop-down in the editor
(make sure you’re on Visual editor) and select the relevant shortcode to be guided.

If you wish to manually use the shortcodes (advanced users only), the guide below offers some insight into each.

PullQuote

[pullquote]quote here[/pullquote]

Dropcap

[dropcap]A[/dropcap]
To use the square version:
[dropcap style=”square”]A[/dropcap]

Buttons

[button link=”http://somewhere.com” color=”white, blue, black, green, red, yellow, or custom hex code” text_color=”optional hex color” size=”small, medium, or large”]Label[/button]

Tabs

[tabs]
[tab title=”Title 1″]Content 1[/tab]
[tab title=”Title 2″]Content 2[/tab]
[/tabs]

Accordions

[accordions]
[accordion title=”Title 1″ load=”show”]Content 1[/accordion]
[accordion title=”Title 2″ load=”hide”]Content 2[/accordion]
[/accordions]
Tip load="show" defines to show this accordion (expanded) by default.

Toggles

[toggle title=”Title 1″ load=”show”]Content 1[/toggle]
[toggle title=”Title 2″ load=”hide”]Content 2[/toggle]

Tip load="show" defines to show this accordion (expanded) by default.

Custom List

[list style=”arrow, check, edit, folder, file, or heart”]
[li]Item 1[/li]
[li]Item 2[/li]
[/list]
Custom lists support all of the icons from FontAwesome. Simply type it in style argument without the fa- (ex. arrows for fa-arrows).

Columns

Columns are a border-line layout shortcodes. While they’re also often used in posts, they’re covered below.

Layout & Block Shortcodes — Advanced!

This section is only for advanced users. Use page builder if you are uncomfortable with using shortcodes.

Column Shortcodes

The column shortcode is a special shortcode. Sample shortcode:
[columns]

[column size=”1/4″]Column 1 goes here[/column]
[column size=”1/4″]Column 2 goes here[/column]
[column size=”2/4″]Column 3 goes here[/column]

[/columns]
The [column] shortcode has the following variables/options:

size
5 columns are supported. Hence all combinations are supported up to 5 such as 1/2, 2/3, 1/4, 3/5 etc. Alternatively, English version of the numbers
is also supported, such as half, one-third, three-fourth, four-fifth etc. Example: size=”one-fourth”.
text_align
left, center, and right are valid alignment values. left is used by default. Example: text_align=”right”.
class
Any of the custom CSS classes can be defined for the column using this attribute.

Separator

[separator type=”space” /]

type
value: space, line, half-space, half-line. The separator can be either be a large empty space, line-based, small empty space, or line-based but with lesser space.

Media Shortcodes

WordPress core supports embedding much of media out of the box.

Galleries

Galleries were already covered in Gallery Post Format section. For advanced usage, refer to
Gallery Shortcode section in WordPress docs.

Embedding Videos & Audio

To show a video from YouTube or Vimeo for example, you would just copy the link and paste it into your post content.

Checkout the Embeds section of WordPress’s docs to find the supported sites.

Should that fail, you can use the embed shortcode as

[embed]https://www.youtube.com/watch?v=IiCmEzjV3_Y[/embed]

Self-hosted Audio & Video

Starting WordPress 3.6, you can self-host audio or video easily. However, not many webhosts will allow you to upload files of large size.

  1. While adding a post, click Add Media. Go to Insert Media > Upload Files.
  2. Select and upload your audio or video file.
  3. Make sure Embed Media Player is selected in “Embed or Link” option.
  4. Click Insert into post.

For advanced usage, check out the Audio and
Video sections of the WordPress docs.

SPREAD THE STORY