Create Presentations Easily on WordPress.com with Shortcodes
August 14, 2013
Cheri Lucas Rowlands
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!
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
Emphasize your big ideas or explain the tiny details using [slide scale=].
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.
Other slideshow embed options
You can create other slideshows on your WordPress.com site, too:
SlideShare: Upload and share PowerPoint presentations, Word documents, and Adobe PDF Portfolios publicly and privately.
Is there a list of all the “commands” to use? The presentation example is great, but it would be nice to printout a list of all the options available! Thanks.
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.
Hi Angeline — if you hover over the slideshow in this post with your mouse, left-right arrows and a four-arrow icon on the bottom right of the slideshow should appear:
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.
Hi there — a browser is required to view the presentation (a presentation would show an error if viewed in an email). You’d need to follow the permalink to view it on a WordPress site.
Presentations have been tested on all major browsers: Firefox, Chrome, Safari, Opera, and IE 10. Most features are supported on IE 9, while presentations are not supported on IE 8 or lower.
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.
Thanks for your comment. The line above caught my attention in particular. We periodically publish posts about features that are more scenario-driven (ie, this recent post on getting better WordPress.com support, which used more of a narrative based a specific troubleshooting issue; or this post on creating a custom menu). Does this type of approach seem more helpful and provide more context? If so, we can try doing more.
no i mean when you are drafting a post. like if i didn’t saw this post, i wouldn’t know this feature exist. unless if it is in your ‘editing tools’ of your posts you know you have it. 😀
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 [ ].
We have shortcodes to embed videos, other kinds of slideshow features, tiled galleries, audio players, etc. You can access all of our available shortcodes on the support site.
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.
Thanks for the feedback — the sample slideshow in the post is a visual presentation, but we’ll take note that some have asked for a more step-by-step tutorial.
I’m using the “forever” theme on WordPress….can I use this presentation short code on my theme? or is it only for those that are NOT using standard templates like the “forever” theme?
Would love to learn how to implement this presentation short code on my theme!
I agree 100% with jontobey! I have to look for simple, easy to understand and ask question type help outside of WP. The forums are like getting caught up in a geek shoot-out!
No, you don’t upload a presentation at SlideShare. These are shortcodes, which work like all our other shortcodes, to allow you to embed a slideshow into your post.
In a new post, you can play around with this and build a slideshow in your Text Editor. Try inputting the presentation shortcode to get started, and insert individual slides within this code, ie:
You can click “preview” to see how different shortcodes affect what you’re creating.
If you’ve not used shortcodes before, that’s OK! This is some info on codes, and general info on shortcodes, which is just another word for a shortcut.
We’ll likely consider a more hands-on tutorial in the future, given the comments here.
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…
Anyway, that’s how I’m interpreting your advice so far.
You can also search on the internet for other tutorials and videos on other sites (ie, YouTube) — there’s a big WordPress community out there who offer their own tips as well.
We’ll likely follow-up with a more hands-on tutorial for the presentation shortcode sometime soon, perhaps on The Daily Post.
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.
P.S. : This presentation is awesome. Thanks guys ! Will check it out
Hi, Cheri! Thanks for this presentation tool. Very cool. Put together a rudimentary slide show just to see if I could. Check it out if you get a free moment. Hope all’s well. Joe http://wp.me/9WSK
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
WordPress.com News 
Thank you. Please Add Office 2013 Visual Effect to it.
LikeLike
Is there a list of all the “commands” to use? The presentation example is great, but it would be nice to printout a list of all the options available! Thanks.
LikeLike
There’s a list of shortcodes on the presentations shortcode support page, which is linked at the bottom of the post.
LikeLike
This is awesome! I haven’t made any presentation on/for my blog. This is really tempting me to create one just to try this feature.
LikeLike
What about us folks using WordPress.org? Any self-hosted equivalent?
LikeLike
I believe this will be available to Jetpack users in the future.
LikeLike
Couldn’t open the presentation feature
LikeLike
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!)
LikeLike
This might be just the solution we need for our new “Faces of Mental Illness” project. Can you use it for video montage, or just stills?
LikeLike
The presentations should be able to show any content you can embed on WordPress.com — like YouTube videos, for example.
LikeLike
As usual. WordPress just keeps getting better and better!
LikeLike
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.
LikeLike
Hi Angeline — if you hover over the slideshow in this post with your mouse, left-right arrows and a four-arrow icon on the bottom right of the slideshow should appear:
http://cl.ly/image/3t0e391p1l2h
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.
LikeLike
How does it show up in an email, does it require audience to be on WordPress site? Does this require specific browser version?
LikeLike
Hi there — a browser is required to view the presentation (a presentation would show an error if viewed in an email). You’d need to follow the permalink to view it on a WordPress site.
Presentations have been tested on all major browsers: Firefox, Chrome, Safari, Opera, and IE 10. Most features are supported on IE 9, while presentations are not supported on IE 8 or lower.
LikeLike
We love it.
LikeLike
Awesome!
LikeLike
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.
LikeLike
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.
LikeLike
super excited to try this. now, with what?
LikeLike
I’ll try this out soon for sure! Thank you WordPress!
LikeLike
That is quite interesting. I look forward to trying it. 🙂
LikeLike
Cooool 😀 Only question is what I should use it for… Hmm, time to brainstorm 😀
LikeLike
This is excellent….astonishing even why didn’t we get this sooner! Thank you WordPress!
LikeLike
This is waayyyyyyyyyy too cool!
LikeLike
Really great tools for marketing online…
LikeLike
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.
LikeLike
LikeLike
A quick question though, will it have a button or something when creating a post? surely if it doesn’t people won’t know it’s there.
LikeLike
LikeLike
no i mean when you are drafting a post. like if i didn’t saw this post, i wouldn’t know this feature exist. unless if it is in your ‘editing tools’ of your posts you know you have it. 😀
LikeLike
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 [ ].
We have shortcodes to embed videos, other kinds of slideshow features, tiled galleries, audio players, etc. You can access all of our available shortcodes on the support site.
LikeLike
Ok thanks. I’d better check on those too.
LikeLike
jontoney is correct .. and quite time consuming with all their links etc..
LikeLike
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.
LikeLike
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.
LikeLike
Thanks for the feedback — the sample slideshow in the post is a visual presentation, but we’ll take note that some have asked for a more step-by-step tutorial.
LikeLike
Is this feature available with wordpress.org?
LikeLike
I believe this is in the works for Jetpack users.
LikeLike
I’m using the “forever” theme on WordPress….can I use this presentation short code on my theme? or is it only for those that are NOT using standard templates like the “forever” theme?
Would love to learn how to implement this presentation short code on my theme!
LikeLike
Yes — like our other shortcodes, you can use these presentation shortcodes on themes on WordPress.com sites, like Forever.
LikeLike
It’s a possible to remove border?
LikeLike
Hi there — to which border are you referring?
LikeLike
I agree 100% with jontobey! I have to look for simple, easy to understand and ask question type help outside of WP. The forums are like getting caught up in a geek shoot-out!
LikeLiked by 1 person
I was very interested in this feature, but do not understand how to make a slide. We need a step by step tutorial.
LikeLike
Do I need to upload a presentation at slideshare first or just putting images in a post will do? I am not able to get how to start 😦
LikeLike
No, you don’t upload a presentation at SlideShare. These are shortcodes, which work like all our other shortcodes, to allow you to embed a slideshow into your post.
In a new post, you can play around with this and build a slideshow in your Text Editor. Try inputting the presentation shortcode to get started, and insert individual slides within this code, ie:
http://cl.ly/image/3I0C1I0i2H3E
You can click “preview” to see how different shortcodes affect what you’re creating.
If you’ve not used shortcodes before, that’s OK! This is some info on codes, and general info on shortcodes, which is just another word for a shortcut.
We’ll likely consider a more hands-on tutorial in the future, given the comments here.
LikeLike
Thanx — let me try.
LikeLike
But that means only text will work here. and what if I want to post images as slides?
LikeLike
In the slideshow, there’s a page that describes changing a slide’s background color or inserting an image:
http://cl.ly/image/0M3h1U0g0N1f
For example, see how that specific slide is blue (while the others are light gray)? The shortcode for that slide is…
[
slide bgcolor=#d3e7f8]…where #d3e7f8 is: http://www.color-hex.com/color/d3e7f8
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”)LikeLike
hmmmmmmmmmmm, ok, thanx once again.
LikeLike
This is awesome! Now I don’t need to upload my slide on SlideShare! I will make a post about this on my blog as soon I know how to do this! 🙂
LikeLike
Nice little feature for the WordPress.com blogs. Would be great if something of this sort is made available for the self-hosted ones as well. 🙂
LikeLike
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.
LikeLike
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.
LikeLike
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.
LikeLike
Would have been nice if this post explained how to use it. At least add the short code your talking about as text to the post.
LikeLike
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.LikeLike
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…
Anyway, that’s how I’m interpreting your advice so far.
LikeLike
hello, is there such….wordpress for dummies?
LikeLike
There are some websites that offer how-tos and tutorials:
Our beginner’s tutorial site, from the editors: https://learn.wordpress.com/
Videos under the “beginner” tag at WordPress.tv: http://wordpress.tv/?s=beginner
Our support site: https://wordpress.com/support/
You can also search on the internet for other tutorials and videos on other sites (ie, YouTube) — there’s a big WordPress community out there who offer their own tips as well.
We’ll likely follow-up with a more hands-on tutorial for the presentation shortcode sometime soon, perhaps on The Daily Post.
LikeLike
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.
LikeLike
Awesome! It works great! I only have question: Is there anyway we can set the navigation automatic?
LikeLiked by 1 person
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.
P.S. : This presentation is awesome. Thanks guys ! Will check it out
LikeLike
Yes, you can use images — see this blogger’s creative use of it in this post.
Example of what you’d use:
[presentation]
[slide bgimg=YOURIMAGEURL.jpg]
Type your text here.
[/slide]
[/presentation]
LikeLike
Hi, Cheri! Thanks for this presentation tool. Very cool. Put together a rudimentary slide show just to see if I could. Check it out if you get a free moment. Hope all’s well. Joe http://wp.me/9WSK
LikeLike
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.
LikeLike
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
LikeLike
I will definitely try this later after work. WordPress, I’m getting addicted to you 😉
LikeLike
I love this feature, Cheri. I made a children’s story with it. It really came out great. Got some rave reviews.
LikeLike
I have just done in my Japanese blog.
http://wp.me/pXnA6-3Ay
LikeLike
It took me a long time to get it right. But I did it. I did a little demo to show the necessary steps. Hope this will answer some of the questions people have. Demo: http://ilovecongee.wordpress.com/2013/08/22/adventure-of-a-brownie-presentation/
LikeLike
Great — thanks for sharing this!
LikeLike