Smooth Slider

There are a number of different slideshows that can be added to WordPress, many of these require the addition of code to the theme, in this series of tutorials we will be using two or three of the slideshows, we are starting with adding Smooth Slider to our home (index) page.

If we follow this tutorial we will be able to add a slideshow to any theme where WordPress 3 is running, in this tutorial we will be adding the slideshow above the content of our blog entries on just the home page.

We have started with Smooth Slider because it is easy to use and administer, we will use a template part to add the slideshow to the theme, this will mean that the slideshow can be added to other pages in the same way if required.

Plugin

We will Install the Smooth Slider plugin from our WordPress admin area, in the right hand menu we will select Plugins > add New > Search > Smooth Slider, installing and activating the plugin.

A new menu will appear in the setting for Smooth Slider, the only change we will make at this time is changing the slideshow width to 640.

 Theme Part

As in the previous part we will create a new file in our child themes folder, this file will hold the code, the code is a conditional call to see if Smooth Slider is active.

If it is active then the slideshow will be added to our home page, open our favourite editor and add the following lines then save the file as slideshow-smoothslider.php.

<?php if ( function_exists( 'get_smooth_slider' )) : ?>
<div class="slideshow-smoothslider" >
    <?php get_smooth_slider(); ?>
</div>
<?php endif; ?>

The first line ‘function_exists’ is a conditional if statement, and if the condition is true and the slideshow is activated, only then WordPress runs the rest of the code block to the endif statement.

The ‘div’ line is a container class to hold our slideshow, we could also add styling to this div inline or in the style.css, the call to get_smooth_slider() returns the slideshow, then the closing div and endif statement.

Index Page

Just as we did with the header.php in the last part, we navigate to the twentyten theme folder and copy do not cut the file called index.php and paste this in our twentyten-templates folder, open the new index.php file and look for the line <div id=”content” role=”main”>, and just below this line we will paste the call to our new template part.

<?php /* Add our SmoothSlider slideshow here above the page content */ ?>
<?php if(is_home() || is_front_page()) {get_template_part( 'slideshow', 'smoothslider' );} ?>

Posts

in the WordPress admin area we will go to Posts > Edit there will be a new checkbox at the bottom of each post to add selected posts to the slideshow, we will be visiting the Smooth Slider plugin again later in the series as there are a number of options for output per category or page.

Slideshow

slide-1

When we open WordPress the slideshow is running, however the twenty ten theme style has no margin around the image and it looks untidy, lets fix this by changing the image style in our child themes style.css, open up the file and add these lines at the bottom.

/* add a margin to the images */
#content img {
    margin: 10px 10px 0 0;
}

All we have done is here is added a margin to the content lmages, the margin is being styled top, right, bottom and left.

As we can see now that looks a lot better to read, there are a lot of other options in the smooth slider setup, fonts, colors, text, borders and images, spend some time testing these which can improve the output.

slide-2

Notice

Note: we do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information This document contains programming examples therefore, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code examples from which you can generate similar function tailored to your own specific needs.

All sample code is provided by www.DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

We hope you will benefit from our tutorials Membership to this website is not required, however the downloading of some themes and files is restricted to site supporters.

You can register for a 10 year ‘Free Supporters Account’ from the members page which will give you access to the source files and free themes, as we introduce premium themes and content some of these these will only be downloadable with a subscription, any revenue from subscriptions is used to support the site costs.

This website is a tool to support and promote WordPress and Artisteer, please support, share and give credit for any benefits you gain from the tutorials on this website.

14 thoughts on “Smooth Slider

  1. When I use smooth slider and twentyten with a custom menu, the menu dropdown always falls behind the contents of the smooth slider box. Is this a css issue? Any help greatly appreciated.

  2. Cool, cool, I like SmoothSlider and I can see it’s potential.

    What I’d really like to know is how to get that image on the left of the post excerpt in there! Updating our child stylesheet with a margin for an image that doesn’t yet exist is, um… not useful.

    The Twenty Ten default for the home page is to show the full post rather than an excerpt. I was able to change this easily by finding a handy answer in the WordPress.org forum (http://wordpress.org/support/topic/twenty-ten-excerpt?replies=4#post-1700477)

    Thanks to you, I was able to put the child theme to work by making a copy of loop.php and sticking it in the child theme folder and editing that copy rather than the original template file. THIS MAKES SO MUCH SENSE I CAN HARDLY BELIEVE IT. This is very exciting.

    Hope the feedback is helpful.
    Cheers,
    Brad

    • The image comes from the post, I know that the post will be in the slider so I add a small image early in the post, Smooth Slider will pick up the first image.

      The image margin is because we cannot tell smooth slider how to style the image, we could investigate it with FireFox, but I felt this was a bit to soon to be changing the styles of a plugin, the default theme comes with different image style, have a look in the parents style.css

  3. Hello,
    congratulations for this project, really good.
    I am struggling with this plugin and would like to request an explanation, if possible.
    I would like to add a slide on a wp template, not 2010, another.
    I add the file ” slideshow-smoothslider.php” (that I created with editor block notes, and renamed in .php) and uploaded with filezilla in the folder Plugin> smooth slider.

    Then I open editor of wordpress, I open file “Index.php” and I add text after this:

    2

    I do not know if I did right.
    The problem is: the slide appears in the footer and it doesn’t work.
    Could you give me some help?
    They are not very practical, but are very stubborn!
    Thanks in advance
    ximi

    • Hi,
      There are many themes out there so it is hard to say where the code should go, but as a rule.

      Wide Slideshow, after header or last call in header.php and before the content.
      Narrow Slideshow, first call inside the content div, befire page/post header or the loop.

      If you are having problems with the code, go to the Downloads page, where the starter theme for “Tutorials 2” is the theme from part one, this has all the files so you can use these files to compare your code!

      Also there are the Artisteer migration tutorials, one of these might help as well, as they are not Twenty Ten.

      Please do work through the tutorials to gain the knowledge.

      Hope this Helps

      David

      • Thank you for your reply.

        On these days I did a test on a different template and I was able to include it without problems!
        It doesn’t work just on my theme!

        I downloaded a few examples that I’m going to see, but I didn’t find the file of the slider plugin!

        I will certainly visit your site that I liked for the resources offered.

        Thanks again for your kind response

        Regards by Ximi

  4. Hello, I have Smooth Slider installed on my site, but I’m having some issues.

    I have the border and background colors set to #E8E8E8, to match the color of the sidebar that the widget is placed in, yet, there are dark gray blotches surrounding the image.

    My questions:

    1. How can I get rid of the dark gray color that’s showing up? It doesn’t show up in the preview that I see from within the WordPress Admin module.

    2. Is it possible to center the title of the slider? If so, how?

    3. Is it possible to center the images, so that they’re aligned perfectly between the two arrows?

    Thanks for your help.

  5. Pingback: Gallerie immagini, presentazioni, slider, carousel: the best! | Blogghidee

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Tutorials 2010

templates

For this series of tutorials we need to have a local WordPress setup, this will enable easy deployment of the theme files, this series will be added to over a few weeks, rather than one big set of files we … Continue reading

Read More