Shortcodes

Presentations

On WordPress.com, you can use shortcodes to build a slide presentation and display it on your site.

To summarize, with various presentation shortcodes you can:

  • Select different slide transitions
  • Rotate and scale slides
  • Choose colors or images for slide backgrounds
  • Set transition durations and sizes

Shortcodes

To create a presentation, use:
[presentation]

To create a slide, use:
[slide]

All the [slide] shortcodes must be wrapped by a [presentation] shortcode — otherwise, the slides won’t show up.

Presentation-wide settings such as height, width, and transition duration (in seconds) can all be set using the respective attributes in the [presentation] shortcode.

For example:

To create a presentation that’s 600×375 in size (like the example below), use:
[presentation width=600 height=375]

To set the transition duration for each slide to 5 seconds, use:
[presentation duration=5]

Transitions

Here’s a list of transition shortcodes:

To create a transition that moves down (the default transition), use:
[slide transition="down"]

To create a transition that moves right, use:
[slide transition="right"]

To create a transition that moves up, use:
[slide transition="up"]

To create a transition that moves left, use:
[slide transition="left"]

To set no transition, use:
[slide transition="none"]

Setting no transition works when fading is enabled — see below.

↑ Table of Contents ↑

Rotation and Scaling

You can rotate and scale slides to create different effects. To rotate a slide, use:

[slide rotate=]

The value after the = is in degrees. For example: [slide rotate=45].

To scale a slide for emphasis, use:

[slide scale=]

The value after the = can be any scalar value, including decimals. For example: [slide scale=5] or [slide scale=1.75].

↑ Table of Contents ↑

Fading

Fading between slides is enabled by default. To disable fading, use:

[slide fade="off"] or [slide fade="false"]

To re-enable fading, use:

[slide fade="on"] or [slide fade="true"]

↑ Table of Contents ↑

Background

You can dress up a slide with a background color or custom image. To set a solid color, use:

[slide bgcolor=]

The value after the = is a valid HTML color. For example: [slide bgcolor=#d3e7f8].

To set an image, use:

[slide bgimg=]

The value after the = is a valid image URL. The image will stretch to fit the slide.

Tip: Any option that can be set on a [slide] can also be set in the [presentation], which will set it as the default setting for the presentation.

↑ Table of Contents ↑

Viewing

You can view a presentation in full-screen by clicking the four-arrow icon on the lower right of the slideshow. Hitting ESC on your keyboard will also exit full-screen mode.

To navigate, use the onscreen arrows (or keyboard arrow keys). You can also use tab or space to move the slideshow forward.

See these shortcodes in action in this sample presentation:

This slideshow could not be started. Try refreshing the page or viewing it in another browser.

Not quite what you're looking for?

Get Help