Smooth Slider Plugin Revisited
acnease

As a note, I replaced Smooth Slider with Meteor Slides instead because I don’t need to feature a post, and because I found it to be much more user friendly and lighter. However, if you are looking for a featured posts image slider or one that allows text and images, the notes below still apply.

I’ve been working on a new project for an acne treatment company, and I’ve incorporated Smooth Slider into the theme. I’m so pleased with the results! As a note, I used Artisteer 3 beta and installed the theme to the most recent version of WordPress. I’m going to show you how you can easily add the slider into your WP header. I basically wanted the header to be only the smooth slider to show featured posts and information in a beautiful way. So, after installing the plugin, I inserted the following code into my Header.php file just above the logo within the div-header-wrapper.

<!– Slideshow Start –>
<div>
<?php if ( function_exists( ‘get_smooth_slider’ ) ) {get_smooth_slider(’1′); } ?>
</div>
<!– Slideshow End –>

Notice there is a little number ’1′ in parenthesis.  That’s because the Smooth Slider plugin allows you to have more than one slider. That way, you could have different sliders on different pages. You could also style them differently, but adding a custom css sheet to the css folder. Very nice! (Please, also note that the paranthesis aren’t quite right here because of putting them into WP. If you use this code, please copy and paste into a text editor first.)

After that, I added the posts that I wanted, and used the Excerpt field to add the specific text I wanted to appear in the slider. I used the featured image option to upload the image I wanted in the slider and as the featured image of the post, but not directly within the post itself. This is a nice feature, because I used large png files so they would blend in nicely with the background of the header, however, they wouldn’t look that great within the post itself. I could still put whatever other images within the post as desired, and still just choose the option to pull the image for the slider from the featured image only.

Smooth Slider’s settings panel is very user friendly, and I was able to do most of the editing within that section itself. However, there were a few things I wanted to change. For example, I wanted the picture to fill the slider at the full height, but I wanted a top margin for my text. I also wanted a small margin below my post title and I wanted to change the styling of the “Read More” link. To do, this, I used edited the Sample.css file as they suggest and set that as the css file to call within the Smooth Slider settings page. Note, you also have to make sure to select that option for each post that you include in the slider as well.

The other thing I did was to replace the previous and next arrow buttons with my own images. You would need access to your site’s ftp folders in order to do this.

Here is a sneak preview of the site I’m working on and examples of how the different slides look. The first one is a link to their main website, while the other sliders link directly to the posts they were taken from. Again, this is all chosen easily from the bottom of the Post’s editing page, and the options are really endless.

This slide shows how the post linked to appears. As you can see, the text styling within the post is completely different from the styling used in the header. You can choose to add text from the post itself, from the post excerpt, from a custom field, or use the image only. Nice feature!

I’m looking forward to finding other creative ways to use this tremendous plugin! Please leave a comment if you have a question or suggestion regarding smooth slider. And, as always, feel free to contact me if you are interested in your own customized, beautiful WP or Blogger theme design.

© 2010 – 2011, reflectingthedesigner.com. All rights reserved.

February 6th, 2011 at 11:19 am

I’m stuck!

My header.php file does not contain a div-header-wrapper, and yes, my site was designed with Artisteer…
I am completely baffled as to how images are implemented into the slider without updating them into a post or page???
Not certain if you have the time, but I sure could use some help.

Thanks,

Scott

February 6th, 2011 at 8:01 pm

The header code is very different in Artisteer 3 which is what I was referring to. If you are using Artisteer 2.5 you’ll need to insert the code into the page.php file within the header div. The same principles apply, however. Yes, you do need to upload images into a post or page in order to implement them into the slider. That’s the one negative about Smooth Slider. Because I linked the actual slider images to different pages, I didn’t want the posts that I used for the slider images to display. So, I backdated them all the way to 2008, and I also made sure to leave off all tags and categories for those specific posts. Hope that helps.

L
February 28th, 2011 at 6:25 pm

Hi again! Thanks for your cool tutorials, and by the way your designs are really inspiring! :)
I have a question regarding this slider, does it simply “lie over” the header design so that the actual header can still be seen, and the images and text sliding over it have a transparent background?

February 28th, 2011 at 7:58 pm

This slider was placed within the header wrapper, and I used png images so that the background would show through. As a note, I’m probably going to be switching to Meteor Slides which also has the same capability (gives a transparent background for the use of png or giff files.) It’s a lighter weight plugin and I don’t need the featured post option. It still allows a link to be added to the image. The part I like best about Meteor slides is that I don’t have to create a new post every time I want to add images to the slider. However, if you want to feature a specific post or include text, Smooth Slider is definitely the way to go.

L
February 28th, 2011 at 11:10 pm

Cool thanks for the quick replies. I’m trying to learn a lot about CSS and be able to modify my artisteer templates to get really nice designs. I find your work really nice. How did you learn how to do all this? did you take courses or it’s all self-learned?

March 7th, 2011 at 10:04 pm

I’m self taught with the help of online forums, a few purchased tutorials, and lots and lots of hard work.

Optiweb
March 12th, 2011 at 9:28 am

Thanks for the tutorial. Is it possible to integrate an image slider into a theme without plug ins? So the theme works out of the box once installed?

December 1st, 2011 at 9:59 pm

You could, but there would be a ton of coding involved. It would be like creating your own plugin, which I think is rather pointless since there are such great ones out there. You could do some more simple code for just rotating a few set images. However, you would have to insert those images into the code and you wouldn’t have any flexibility of adding images or deleting them through your WP Dashboard.

December 1st, 2011 at 9:37 pm

I have inserted slider into header section . I want the slider to be right aligned currently it sits behind the header image in the centre… So which file do I edit..I assume it is a css issue.

December 1st, 2011 at 9:53 pm

Yes, you’ll need to add some styling to the css. Did you put your slider within a wrapper div? If so, that’s the easiest way to style it. I would recommend something like “slider-wrapper” for the div class to surround the slider code. Also, make sure you put the code in the header.php directly above the logo code. This should automatically put it on top. However, if not, you can always add a higher z index as in the example css below.

.slider-wrapper
{
  position: absolute;
  display: block;
  z-index: 5;
  top: 0;
  right: 0;
  height: insert pixel number using format above of your actual desired height;
  width: insert pixel number using format above of your actual desired width;
}
December 1st, 2011 at 9:56 pm

forgot to mention that the pixel numbers should be inserted like this 5px with the semicolon. You don’t need to include the “px” if it’s zero as the example above, but any number greater than zero will need the little “px” directly after it.

December 1st, 2011 at 10:11 pm

Hi ya all the way from NZ..

Thnx for the very quick response. Strangely enuff i just did exactly that thn decided to chk forum! I ddnt kno bout the z index or the px thing. Thnx for that. I have the slider in the right position but for some reason it is not …sliding..just 1 of the static images.
The preveiw sample in the smoothslider settings works perfectly.

Help once again!!!

QuestionBoy
December 9th, 2011 at 6:48 am

Is there any way to have variable size Slideshows?

I installed and configured the Height and Width. Typically within my posts this is fine, but on my Homepage header I would like it bigger. Is there a way to acheive this?

Thank you in advance for the help!

December 9th, 2011 at 7:02 am

As far as I can tell, you can alter the size but it applies across the board. However, you might find a solution by checking the Smooth Slider FAQ page.

QuestionBoy
December 9th, 2011 at 8:51 am

Thank you for the quick response. I checked the FAQ before posting the question here, sadly I did not see anything relating to this in the FAQ.

Thank you once again.

May 26th, 2012 at 9:03 pm

Sarah, you are a great communicator. I don’t have any questions since you explain things so well. I am a fan and I owe you one. If you ever need any assistance or just have technical questions hit me up. So refreshing to read how you assist these people with the slider plugin and quick responses. I don’t do that, lol! Maybe I should but at the moment I have a low tolerance level for people who do not have the basic knowledge needed to be in our industry. I am self taught too and it was hard work. I usually trade some sort of service if I could not afford to pay for something when I first started. That’s a message to those who seek your assistance without offering something that shows their gratitude. Regards, Bayne Parker

May 26th, 2012 at 9:18 pm

Thanks for the kind remarks, Bayne.

October 30th, 2012 at 11:16 am

At this time it sounds like BlogEngine is the top blogging platform available right now.
(from what I’ve read) Is that what you’re using on your blog?

November 12th, 2012 at 8:45 pm

WordPress is what I use exclusively.

LEAVE A COMMENT

Powered by sweetCaptcha


Anti-Spam Protection by WP-SpamFree