Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Step by Step Guide to Creating a Slider in WordPress with SlideDeck

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

After our launch of WPBeginner Coupons yesterday, we are totally focused on building the best design for the main WPBeginner site that integrates everything while still looking good. We wanted to add a slider in our site, but every script had its limitation. Then thanks to the awesome Matt Mickiewicz from 99designs, SitePoint, and Flippa (see his Interview on WPBeginner) for referring us to the folks over at Digital Telepathy who are the creators of SlideDeck (by far the best slider script on the web). We played around with it, and we were impressed. It is great for beginners because it provides a complete WordPress plugin that lets you use the easy drag-drop interface to create sliders. However, it is also great for developers because it has a jQuery version that offers additional freedom to developers to customize it to their needs. In this article, we will show you how you can create a slider in WordPress without editing a single line of code with the SlideDeck WordPress Plugin.

If you want to see what you can create with this plugin, here is a LIVE Demo.

Step 1. Downloading and Installing the Plugin

Head on over to SlideDeck’s Website and download the plugin. They have a FREE version and a PRO version which offers support and a lot more features. Whenever we are working with a new product, we always get the support version. We got stuck a few times in our development, and their support was amazing and helped us out. We highly recommend that you get the PRO version because it includes cool features like: Vertical Slides, Touch Screen Support, Support, RSS Feed Smart SlideDecks, Background Image Support, and much more.

Once you have downloaded the plugin, then go ahead and install/activate the plugin. (Follow our Step by Step Guide to Installing a WordPress Plugin)

Let’s Create a Slider

Once you have activated the plugin, you will see a new tab added called the SlideDeck. Lets go, and click Add New SlideDeck. You will be prompted to a screen that looks like the Post Write Panel.

Add New Slide

So what we did was add the content in our slide, and gave it the title. We could have a custom background image (PRO Feature), but for the sake of simplicity, we did not do that. We want to show what this plugin can do out of the box. That was our first standard slide. The next slide we added in our demo was a vertical slide (PRO Feature). Vertical slides are basically multiple slides within a slide. If you look in the image above, there is a button called Convert to Vertical Slide. Well that is the button we clicked for our next slide, and this is what added:

Add New Vertical Slide

Now repeat the process for as many slides as you want. Once you are done creating slides, lets look at the SlideDeck Options for publishing the slides on your site. You will see this in the right hand side of your Edit slides screen.

SlideDeck Options

You can select it to auto-play, allow keyboard navigation, allow mouse scroll-wheel navigation, set animation speed, pick one of their amazing skins, and select which slide you want to start from. You can also re-order the slides by the drag-drop. You see there is a theme code snippet that has the code for you to include in your theme. You can add it anywhere you want in your theme. Oh wait, didn’t we say you won’t have to edit a single line of code to integrate SlideDeck in WordPress. Yes, we will stick with our words in this tutorial. Let us show you how you can integrate it in your WordPress without editing a single line of code.

Integrating SlideDeck in WordPress Post/Pages

Create a New Post or Page. You will see a new SlideDeck box added in the right hand sidebar.

Insert SlideDeck

Click on the Insert SlideDeck button. Pick the Slider that you want to add, and Publish the post. Once you publish the post, your slider will look like this with the Classic Skin:

SlideDeck Demo

You can use it on a sticky post, full-width page template, or anything else you like. But wait, it doesn’t end here. Let’s take it a little further.

Add a Slider with Featured Posts

Featured post sliders are blogger’s favorites. We see this feature on numerous blogs, but most of those sliders are hard coded into themes with limited control for users. Well let’s take a look at how easy it is to do it with SlideDeck. You can add a dynamic slider called “Smart SlideDeck” that lets you show either your most recent posts, most popular posts, featured posts (the ones you pick), you can sort this by category, you can even import RSS Feeds from another site to add in your slider. You can select from their various skins, choose the different type of navigations, and pretty much have a slider ready in less than 5 minutes. Let us show you how. In our tutorial, we will be displaying Featured entries from our Posts.

Go to your current posts, and pick out 5 posts and add them in Smart SlideDecks by checking the box.

Feature Posts in Smart SlideDecks

Now, lets go to your SlideDeck Panel, and Click on Add Smart SlideDeck. Choose Your Skin:

Choose Skin in Smart SlideDecks

Select how many slides you want to display, play back options, type of content (See how we have it as Featured entries from the Post). You can select the Content Settings like image options, title length, excerpt length etc. Choose your Navigation Styles, and click Publish.

Select Options in Smart SlideDecks

You need to edit the code on this one. Grab the code from the Sidebar, Theme Snippet Code, and paste it in your theme. Most likely at the top of your index.php. An example code would look like this:

<?php if (is_home()) { slidedeck( 73, array( 'width' => '100%', 'height' => '370px' ) ); } ?>

This would display your slider only on your homepage.

If you want to see some real cool demos of SlideDeck, then visit SlideDeck’s website, and check it out.

Let us know your thoughts about the plugin as you implement it.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

12 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. delpihero says

    I put <?php if (is_home()) { slidedeck( 72, array( ‘width’ => ‘849px’, ‘height’ => ‘300px’ ) ); } ?>

    at the top of index.php and it worked but its at the top, i need it in the middle, so I place the code where I need it and it shows up but the slider does not work so what have I done wrong.

    I also tried putting this in another directory library/includes/featured-page-php but that has the same corrupted effect

  3. CaroletteGoodlowWright says

    So I am needing help. I have slide deck pro and I would like to customize it at place it in the header next to my logo. but i do not know how to code it properly.

    my site is http://www.chrisrogersconstruction.com can you help? I cannot find any help on this issue.

    Thanks,

    • wpbeginner says

      @CaroletteGoodlowWright Sure we can help for a fee. We don’t offer free customization as part of our tutorial. Please use the contact form if you are interested in hiring us.

  4. web design thailand says

    The pro version of the plugin is a bit expensive but really worth it. We start to use here and we are very happy about it !

  5. Adriana says

    My template came with an integrated slider too. I didn’t know you can take it down and replace it with another slider.

    I have to try in my posts so see exactly how it works before replacing my main slider – I guess.

    Thank for the tutorial.

  6. S says

    Would it be possible to integrate this into the header only and use it to display an array of header images with link to different sections of the website?

    I am trying to figure out how to do this but no luck! :-(

    • Editorial Staff says

      Yes it is possible. You would have to create a slider, then edit your header.php file to paste the code. You can use the smart slider option which only shows images… and display your most recent posts … most featured posts etc.

      Admin

  7. Michele Welch says

    Awesome tutorial! I have a slider integrated into my template, but always had issues with it so had to take it down. This definitely seems like a good alternative! Will definitely give it a try.

    I think the best part is that you can add it to your posts. This way you have integrated related posts and decrease bounce rates.

    Thanks for sharing this application!

Leave a Reply to wpbeginner Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.