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.
- While adding a post, click Add Media. Go to Insert Media > Upload Files.
- Select and upload your audio or video file.
- Make sure Embed Media Player is selected in “Embed or Link” option.
- Click Insert into post.
For advanced usage, check out the Audio and
Video sections of the WordPress docs.