Shortcodes – Media

Icon

Choose any icon type to be displayed on the page. The size of this icon can be set to any valid css font-size property such as pixels, em's, rem's, etc. The color of the icon can also be set using any valid css property such as hex number, rbg, rbga, or written notation (i.e. red, blue, etc.). Additionally, the icon can be linked using the URL parameter and the target location set using the target parameter.

Code Example

[icon type="" size="" color="" url="" target=""]

Parameters

Parameter Description Required Values Default
type The type of icon you want to display optional See: Example Icons none
size The size of the icon you want to display optional any valid css font-size property. body size (16px)
color Use css color attributes to output a color optional any text grey
url Using the url parameter will link the icon optional any text none
target Target location for the link optional any valid html link target none
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. optional any text none

Output

Image

Wrap any image output to the editor with the img tag with responsive parameter equal to true, to let the image shrink on smaller screen sizes.

Code Example

[img responsive="" type=""][/img]

Parameters

Parameter Description Required Values Default
responsive Make the wrapped images responsive optional true, false false
type The type of image you want to display. i.e. img-circle, img-rounded, img-cover, img-contain optional any text none
class Any extra classes you want to add. optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. optional any text none

Output

Thumbnail

Use the thumbnail class around an image to add a border to it. Optionally, a link can be specified using the URL parameter.

Code Example

[thumbnail url="" target=""][/thumbnail]

Parameters

Parameter Description Required Values Default
url Using the url parameter will link the icon optional any text none
target Target location for the link optional any valid html link target none
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. optional any text none

Output

Add the gallery shortcode to the visual editor and use the edit command to insert images into a gallery. By clicking the output contextual area, you will be able to choose the media and parameters will automatically be added to the shortcode. Using the "link to media" option will put each item in the gallery into a lightbox that will popup, revealing the full-size image, when an image is clicked.

Code Example

[gallery id="123" ids="729,732,731,720" include="21,32,43" exclude="22,33,44" orderby="ID" order="DESC" size="medium" link="file" columns="4" itemtag="div" icontag="span" captiontag="p"]

Parameters

Parameter Description Required Values Default
id Specify the post ID. The gallery will display images which are attached to that post. The default behavior, if no ID is specified, is to display images attached to the current post. optional post id none
ids Specifying IDs in your shortcode allows you to include images in your gallery that aren't necessarily "attached" to your post — that is to say, not uploaded from within your post or page. This flexibility allows you to create and embed any number of galleries containing any number of images! optional attachment ids none
include Comma separated attachment IDs to show only the images from these attachments. optional attachment ids none
exclude Comma separated attachment IDs excludes the images from these attachments. Please note that include and exclude cannot be used together. optional attachment ids none
orderby Specify how to sort the display thumbnails. The default is "menu_order". optional menu_order, title, post_date, rand, ID none
order Specify the sort order used to display thumbnails. optional ASC or DESC none
size Specify the image size to use for the thumbnail display. The size of the images for "thumbnail", "medium" and "large" can be configured in WordPress admin panel under Settings > Media. optional thumbnail, medium, large, full, or any registered image sizes. thumbnail
columns Specify the number of columns. The gallery will include a break tag at the end of each row, and calculate the column width as appropriate. The default value is 3. If columns is set to 0, no row breaks will be included. optional numeric value 3
link Specify where you want the image to link. The default value links to the attachment's permalink. To open the gallery images in a lightbox, set the link to point to the attachment file ("file" parameter). optional file, none none
itemtag The name of the XHTML tag used to enclose each item in the gallery. The default is "dl". optional XHTML tag dl
icontag The name of the XHTML tag used to enclose each thumbnail icon in the gallery. The default is "dt". optional XHTML tag dt
captiontag The name of the XHTML tag used to enclose each caption. The default is "dd". optional XHTML tag dd
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. optional any text none

Output

Embed

The Embed feature allows you to wrap embedded items using a simple Shortcode to set of a maximum (but not fixed) width and height.

Code Example

[embed width="300" height="169"]https://www.youtube.com/watch?v=XQu8TTBmGhA[/embed]

Parameters

Parameter Description Required Values Default
width Defines width of the media in pixels. optional px none
height Defines height of the media in pixels. optional px none

Output

Video

The Video feature allows you to embed video files and play them back using a simple Shortcode. This was added as of WordPress 3.6 and is used like this:

[video]

You can also use built in embeds and simply put the media file on its own line:

  My cool content

  http://my.movies.com/cool/movie/coolest.mp4

  More cool content

Usage

I have an old post that has a video file in the Media Library attached to it, and I want to use the new shortcode:

[video]

I have the URL for an mp4, from the Media Library or external, that I want to play:

[video src="video-source.mp4"]

I have a source URL and fallbacks for other HTML5-supported filetypes:

[video mp4="source.mp4" ogv="source.ogv" webm="source.webm"]

Parameters

The following basic options are supported:

src
(string) (optional) The source of your video file. If not included it will auto-populate with the first video file attached to the post. You can use the following options to define specific filetypes, allowing for graceful fallbacks:

  • 'mp4', 'm4v', 'webm', 'ogv', 'wmv', 'flv'
Default: First video file attached to the post
poster
(string) (optional) Defines image to show as placeholder before the media plays.

Default: None
loop
(string) (optional) Allows for the looping of media. Defaults to "off".

  • "off" - ("default") does not loop the media
  • "on" - media will loop to beginning when finished and automatically continue playing
Default: "off"
autoplay
(string) (optional) Causes the media to automatically play as soon as the media file is ready. Defaults to "off".
  • "off" - ("default") does not automatically play the media
  • "on" - Media will play as soon as the media is ready
Default: "off"
preload
(string) (optional) Specifies if and how the video should be loaded when the page loads. Defaults to "metadata".

  • "metadata" - ("default") only metadata should be loaded when the page loads
  • "none" - the video should not be loaded when the page loads
  • "auto" - the video should be loaded entirely when the page loads
Default: "metadata"
height
(integer) (required) Defines height of the media. Value is automatically detected on file upload.

Default: [Media file height]
width
(integer) (required) Defines width of the media. Value is automatically detected on file upload.

Default: [Media file width]

Audio

The Audio feature allows you to embed audio files and play them back using a simple Shortcode. This was added as of WordPress 3.6 and is used like this:

[audio]

You can also use build in embeds and simply put the media file on it's own line:

  My cool content

  http://my.mp3s.com/cool/songs/coolest.mp3

  More cool content

Usage

I have an old post that has an audio file in the Media Library attached to it, and I want to use the new shortcode:

[audio]

I have the URL for an MP3, from the Media Library or external, that I want to play:

[audio src="audio-source.mp3"]

I have a source URL and fallbacks for other HTML5-supported filetypes:

[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav"]

Parameters

The following basic options are supported:

src
(string) (optional) The source of your audio file. If not included it will auto-populate with the first audio file attached to the post. You can use the following options to define specific filetypes, allowing for graceful fallbacks:

  • 'mp3', 'm4a', 'ogg', 'wav', 'wma'
Default: First audio file attached to the post
loop
(string) (optional) Allows for the looping of media.

  • "off" - Do not loop the media.
  • "on" - Media will loop to beginning when finished and automatically continue playing.
Default: "off"
autoplay
(string) (optional) Causes the media to automatically play as soon as the media file is ready.

  • "off" - Do not automatically play the media.
  • "on" - Media will play as soon as it is ready.
Default: "off"
preload
(string) (optional) Specifies if and how the audio should be loaded when the page loads. Defaults to "none".

  • "none" - The audio should not be loaded when the page loads.
  • "auto" - The audio should be loaded entirely when the page loads.
  • "metadata" - Only metadata should be loaded when the page loads.
Default: "none"

Become a Contributing Sponsor

Become a part of projects that need your support.

Become a Sponsor