Create Presentations Easily on WordPress.com with Shortcodes

On WordPress.com, you can use a number of shortcodes to embed features and create objects with little effort, and make your site look just the way you want. We’re excited to announce new shortcodes you can use to whip up a slideshow presentation — and display it on your WordPress.com site.

A sampling of features

Selecting different slide transitions (up, down, left, right)

Rotating and scaling slides

Choosing colors or images for backgrounds (HTML color, image URL)

Setting transition durations and sizes

You can see these features in action, along with shortcode instructions to get you started, in the sample presentation below. Don’t forget to view it in full-screen — just click the four-arrow icon on the bottom right corner.

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

Presentations Shortcode Plugin

for WordPress.com sites

Who doesn’t love awesome presentations?

This presentations plugin provides shortcodes to let you quickly and easily put together amazing presentations!

Supported features include:

Choosing slide transitions

Rotating and scaling slides for extra awesomeness

Setting presentation backgrounds with solid colors or images

Setting transition durations and sizes

Viewing

Presentations can be navigated either using the onscreen arrows, or by using keyboard arrow keys. Tab or space will also navigate the slideshow forward.

Fullscreen mode is toggled using the icon on the lower right. Hitting ESC on the keyboard will also exit fullscreen.

To begin, simply start with the [presentation] shortcode. Then put all your individual slide content inside [slide] shortcodes and you are good to go!

[presentation][slide]Pretty cool, huh?[/slide][/presentation]

Transitions

Transitions are specified using [slide transition=].
The following options are available:

Down

The default transition!

Right

Up

Left

Or none!

Which only really works when fading is enabled.

Rotation

Slides can be rotated using [slide rotate=] where the value is in degrees.

Scaling

Backgrounds

Solid color backgrounds can be set using [slide bgcolor=] where the value can be any valid HTML color.

Alternatively [slide bgimg=] with a valid image url will set it as the background, stretching the image to fill the slide.

Fading

Fading between is enabled by default. It can easily be disabled via [slide fade=] with a value of “off” or “false”.

Fading

When you start to miss it re-enable it anytime with “on” or “true”.

Miscellaneous

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

Also, any valid [slide] attribute can be placed in the [presentation] shortcode, and it will apply to every slide unless explicitly overridden.

Enjoy making your own presentations :)

We’re excited that you can use these shortcodes to create presentations, from simple slideshows to sleek, professional presentations. For more detailed steps, visit the presentations shortcode support page.

Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications - please check your spam folder if you don't receive this.

Hi James — can you provide more info so we can help you troubleshoot? Can you see the first slide in the slideshow above? If you hover over the slideshow, do arrows appear on the left/right to navigate the slides? (Let us know your setup, too — browser, computer, etc. Thanks!)

Still looking for the magic tour arrow icon you say there is on the right to comment, what is the point of constantly sending new things when it seems a struggle to get them. I am logged in to my account yet cannot comment nor find this blasted tour arrow icon.

The left-right arrows let you move back and forth in the slides, and the icon at the bottom right allows you to view in full screen. To clarify these arrows do not allow you to comment — that’s not a stated feature.

You actually don’t have to be logged in to your WordPress.com account to view it. It works with all major browsers (Chrome, Safari, Firefox…). Let us know if you still can’t view it.

There is a huge gulf between those who use standard WordPress templates and the HTML Geeks who understand the content of this short presentation, and where to apply it. You do not present this in a way that a typical user can actually use. Unless you can bridge this gap, then cheerful posts like this do nothing but frustrate the majority of your users.

Hi cdtobie — thanks for the feedback. We use this blog to share announcements of new features, and generally these announcements summarize what’s new and basics to get started, and then link to further documentation — this presentations shortcode support page — for more details. Sometimes, we offer more in-depth tutorials (many over on The Daily Post) to supplement these types of announcements. Taking note of your comment — we certainly can publish more of a how-to on these shortcodes that offer steps on creating a presentation from start to finish.

I think this is pretty cool. But I have to reply to the comment about the “help.” Even though I’m a pretty high level user, I find if I need help with WordPress, WordPress is the last place to get useful help. Way too high-level, conversations are often closed way before they are actually answered, way too feature-driven (versus scenario-driven), way too much assumed knowledge etc, etc.

Ah, sorry for misunderstanding your question. No — shortcodes aren’t visible/accessible options in your dashboard or editor in your Post/Page Screen; that’s not quite how they work. Shortcodes are bits of code that you can insert into your Text Editor — as with HTML — that act as shortcuts, so you can embed files or create objects that would normally require more complicated code. They are typically words or short phrases (ie, “presentation” or “youtube” or “flickr video” in between brackets [ ].

Thanks for this feature, I will be interested to try this. I have to agree with jontobey though that answers to queries are very high level, as someone who struggles to keep my website going, I find that when searching for an answer I often do not understand the instructions provided as a higherlevel of knowledge is assumed that a basic user does not have. I hate to say it, but answered need to be dumbed down for people like me. We use WordPress as it is better than other options, but it is still a,struggle.

You need a sample tutorial. The specific language used is not enough. You need to explain or show how a specific codes is used. by using only words, I am not clear on how to use the code. A visual presentation says so much more. thanks.

You can insert a background image in a similar way with the [slide bgimg=] shortcode — just make sure you use an image’s URL (where it is online) after the “=” (ie, the URL will probably end in “.jpg”)

This looks like a nice addition to WP. Some examples of blogs that gave this presentation feature a try would be welcome. I’m in the same boat as CDTobie, JonTobey and Helene Feasey. Not everyone has taken classes in web design and is at a lower level. Thanks for the new feature.

I cannot think of any direct need for presentations on my blog, considering the kind of content it hosts. However, I am pretty sure that, now that this feature is available, I am going to come up with some or the other idea which will need presentations.
Kudos to WordPress team.
And thanks for sharing this information.

Great plugin I do hope to see it for the self-hosting blogs. I did encounter a strange issue though and I haven’t scrolled throughout all the comments to see if anyone else has. When I go into full screen by either pressing the lower right button or F11 on Firefox 23.0, the entire screen gets a dark filter over it. Kind of like when a mouse-hover darkens certain gallery boxes to give the navigation arrows more contrast when the mouse is over them. I can’t seem to get rid of it in full screen mode.

Hi Matt — on this page of the sample presentation it shows how to add text to an individual slide (ie, between the [slide] and [/slide] shortcodes), as you treat other shortcodes on WP.com. Commenters have asked for a more hands-on tutorial — we can work on that as a follow-up to this announcement.

Tutorial would be super. The impression I’m getting so far, based on your explanations Cheryl, is on the blog post empty space, use of the presentation code means for a slideshow of just text oriented 5 different slides, it would be simple post of several codes, with text per slide, etc.

Any photo slideframe with pure text slides before and after the photo slide, would be typed out in the same blog post with shortcodes…

I couldn’t read the presentation, the text just scrolled off the screen too fast.
I’m on a Mac running OSX 10.5.8 with Safari 5.0.6.
I then tried in the latest version of Firefox and the presentation wouldn’t open at all.

Is it responsive ? Because I am using 2013 – responsive theme & would like it if the presentation was responsive. Also, I want to know, is it made on HTML 5, javascript or flash ? Because flash can seriously hurt the site. Finally, I want to know whether we can use images in this presentation ? And, if we do not use images, does the presentation count towards our free storage ? Please answer me.
Regards, Jotpreet Singh.

That’s awesome! Glad to see you use this presentation slideshow in your own creative way. I’ll bookmark your post, as it may be worth putting together a roundup of interesting ways people use the tool. (Will be following your blog now as well!)

P.S. That’s great that you offered a mini-tutorial in the comments — good stuff, and thanks for sharing that.

Cheri: Just noticed that while the slide show works well, showing up on the main page and on its own page, it doesn’t show on the 2011 Showcase Template page. Still, the tool is great, adding to flexibility and enhancing options. Joe