• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Tips and Tricks HQ

  • Home
  • Blog
  • Projects
    • All Projects
    • Simple WP Shopping Cart
    • WP Express Checkout Plugin
    • WP Download Monitor
    • WP Security and Firewall Plugin
    • WP eStore Plugin
    • WP Affiliate Platform
    • WP eMember
    • WP Lightbox Ultimate
    • WP Photo Seller
  • Products
    • All Products
    • Checkout
  • Support
    • Support Portal
    • Customer Only Forum
    • WP eStore Documentation
    • WP Affiliate Software Documentation
    • WP eMember Documentation
  • Contact

How to Create a Slideshow in WordPress

You are here: Home / Video Tutorial / How to Create a Slideshow in WordPress

Last updated: February 10, 2017 by Keith Lock




This is a tutorial for the video answers to top WordPress questions series that we have been publishing on this site to help users get started with WordPress.

In this tutorial, you will learn:

  • How to create a WordPress.com account.
  • How to install and activate JetPack.
  • How to connect JetPack with your WordPress.com account.
  • Hot to enable JetPack shortcodes for Presentations.
  • How to use the Presentations shortcode to create attractive slideshows.



In order to use the needed shortcode for this demonstration, please be sure that you have a WordPress.com account, and that JetPack is installed on your self-hosted web site, and connected to your WordPress.com account. JetPack is the tool that provides the Presentations shortcode we will be working with.

OK, with JetPack enabled, let’s turn on the extra shortcodes.

  1. From your WordPress Dashboard, click JetPack, then Settings.
  2. Click the Writing link across the top.
  3. Turn on Shortcode Embeds.

When creating your Slideshow or Presentation, it will consist of various slides for which you can configure each slides transition, rotation, scale, fade, and background. Backgrounds can be images or colors. Use colors if you want to type the text for each slide.

The default transition is down. I will be leaving the default for this demonstration. Other values include: right, up, left, and none. I will not be using the rotation and scale properties in this example. Fading between slides is the default behaviour. I won’t be adjusting that for this Presentation.

In this example I will include 5 slides as background images.

Let’s begin.

  1. From you WordPress Dashboard, go to Posts, then open the Post Editor for a new or existing post.
  2. Switch to Text view to prevent the Visual Editor from making changes to the codes you type.
  3. Start with an opening and closing “presentation” shortcode. Type an open square bracket, then the word presentation, then a closing square bracket. Press Enter twice, then open a square bracket, then type a slash, then the word presentation, then a closing square bracket.
  4. Now, go back inside the opening of the presentation shortcode to set the size and transition duration for each slide.
  5. Just after the word presentation, put a space, then type width equals 600, then a space, then height equals 375, then a space, then duration equals 5.
  6. Save the post. We will come back to it in a second.

With 5 images ready to be used in the Slideshow, let’s now upload them to the WordPress Media Library.

  1. From your WordPress Dashboard, click on Media, then Add New. If you right click the Add New link, you can open it in a new Tab in most browsers.
  2. Click the Select Files button.
  3. Locate the images on your computer, select them, and click Open. Using Ctrl+click allows you to select multiple files to upload at once.
  4. Now we will need the URLs of the images. Click the Edit link next to the first image. It will open in a new Tab. Copy the File URL to a text document. Close the Tab.
  5. Do the same for the remaining images.
  6. Go back to your post.
  7. In between the Presentation shortcode, create slide shortcodes for each image. Type an open square bracket, then the word slide, then a space, then bgimg equals open quotes, then paste in the image URL, then close the quotes, then close the square bracket. Now close the slide shortcode by typing an opening square bracket, a slash, the word slide, then a closing square bracket. Press Enter. Then repeat for the other images.
  8. Save and View.

Related Posts

  • How to Manage All Your WordPress Sites With One Tool
  • Adding an Author Image and Bio Box in WordPress, and Linking to a Google+ Profile
  • How to Create a Blog Page in WordPress
  • How to Use FileZilla with WordPress

Video Tutorial,  Wordpress Blogging Tips,  how to,  WordPress tutorial

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Featured & Popular Articles

Video Answers to Top WordPress QuestionsWordPress Optimization Tips and Tricks for Better Performance and SpeedEssential WordPress Security Tips - Is Your Blog Protected?WordPress Simple PayPal Shopping Cart PluginTop 15 Search Engine Optimization (SEO) Techniques I Forget to DoList of the Best and Must Use WordPress PluginsHow do I Start a Blog and Make Money Online?Good Domain Name Picking Tips for Your Blog SetupFind Out Which WordPress Web Hosting Company Offers the Cheapest and Reliable Web Hosting Solution

Featured WordPress Plugins

wordpress estore plugin
wordpress membership plugin
WP Express Checkout Plugin
WordPress Lightbox Ultimate Plugin
WordPress photo seller plugin
wordpress affiliate plugin

Recent Posts

  • Accept Donations via PayPal from Your WordPress Site Easil [...]
  • Buy Now Button Graphics for eCommerce Websites [...]
  • Subscription Button Graphics for eCommerce Websites [...]
  • Adding PayPal Payment Buttons to Your WordPress Sidebar Ea [...]
  • PayPal QR Codes [...]

Comment & Socialize

  • @Rodrigo Souza, Thank you f ...
    - admin
  • The example for 'slm_add_ed ...
    - Rodrigo Souza
  • @Ron, All the valid transac ...
    - admin
  • Hello, when people have sel ...
    - Ron
  • We have hte following featu ...
    - admin

Check out our solutions

View our WordPress plugin collection and start using them on your site.

Our WordPress Solutions

Footer

Company

  • About
  • Privacy Policy
  • Terms and Conditions
  • Affiliate Login

Top WordPress Plugins

  • Simple Shopping Cart
  • PayPal Donations
  • WP Express Checkout
  • WP eStore
  • WP eMember

Blogging Tips

  • How to Start a Blog
  • Selecting a Good Domain
  • Cheap WP Hosting
  • WP Video Tutorials
  • Simple SEO Tips

Search


Keep In Touch

Copyright © 2023 | Tips and Tricks HQ