- WordPress Tutorials
- Artisteer Tips
- Add Button Class to Widget
- Add Style to Text Widget
- Add a Sidebar in the Header
- Create Custom Post Header
- Create Unique Page Template
- Create Secondary Menu
- Create Styled Donate Button
- Create Widget Style – Part 1
- Create Widget Style – Part 2
- Hide Category Titles
- Styling Featured Image
- Styling Sheet Borders
- Using Theme Options
- Design Tips and Tricks
- Recent Projects
Meteor Slides Plugin
In working on a new WordPress theme design for a client, I wanted to incorporate a slider on the home page to display images that would link to specific pages/posts of the website. I wanted it to be simple and user friendly as well as customizable including some nice transition effects. The plugin I went with is Meteor Slides, and I LOVE it! It works great with Artisteer generated themes, and here are some more specs on this simple, yet effective plugin.
First of all, I need to clarify that this is not a “Featured Posts” slider, so you can’t incorporate text into the slider. You can give your images a title, and meta data tags, but no text will actually appear when viewing the slides. This was designed simply as a slide show, and it uses a custom taxonomy to accomplish this. Because of that, it’s The features that I love about this plugin are:
- The ability to easily add and delete photos to the slide show.
- The ability to create multiple slide shows.
- The ability to use a simple shortcode to add the slide show to a post, page, or text widget.
- The ability to incorporate the slide show easily within the page template with simple instructions and provided code (such as placement within the loop or in the header).
- The ability to choose from several different slide transition effects.
- The ability to link each image to a specific page or post (or any custom link desired).
- The ability to easily edit the slide time, transition, time, size of the slide show, view of navigation arrows, etc. all within the plugin settings.
- The ability to easily edit the plugin’s css (you’ll notice in the images below that I added a background color and a double border to the slider I added.)
Here are a couple of screen shots from the site I’m working on which incorporates this slider. The first example demonstrates using only the navigation arrows (these only appear when you hover over the image). The second shows the use of both the arrows and the page navigation dots at the bottom of the image which are built in. There is also the option to show only the bottom page navigation or no navigation at all. The borders and background colors are just examples of how you can change the css file to create a new look.
There are several other awesome features, but those are the specific ones that I like the best. I’ve been super impressed by how lightweight this plugin is and how quickly it loads. There is no lag time, which is terrific! So, if you need a simple yet professional looking slider, Meteor Slides is the way to go in my opinion.
Adding the Slider to your Page, Post, or Header
If you go to your settings panel of the Slides Dashboard, you’ll find that it gives you simple code for inserting the slider into one of your pages or posts, as well as simple php for adding the code to your header. If you have different slideshows that you’d like to add, you simply need to specify the name of the slideshow. So, you’d incorporate into the already given code slideshow=”nameofslideshow” directly after the [meteor_slideshow and don’t forget to put your closing brackets. Of course, I couldn’t add the code as shown exactly because it would insert the slide into this post. 
For more details on setup, installation, and customization make sure to visit the Meteor Slides Plugin Site.
© 2011, Sarah. All rights reserved.
12 Responses to Meteor Slides Plugin
Leave a Reply
Like This Theme?
Make your own theme using Artisteer, then come back here for tips on how to make the most use out of this powerful design tool!
Best Image Resource
Recent Projects
Thank you. This is just what I was looking for as i use Artisteer also. Should be able to improve the quality of my clients sites with this.
Artisteer is a great application is it not?
Regrads,
Stewart
I love Meteor as well, I was just wondering if you know how I can have two images show next to each other and then transition?
Regards
Hanè
Well, I suppose there would be a couple of ways to work around this. One, you could use design software to merge the two images into one which would obviously be the quickest fix.
If you actually want two separate images (or even three), you could add two or more sliders within the same spot (each within separate divs. and make sure that you are calling for separate slideshows as well.) You would then want to style the divs you created to hold the sliders so that they are side by side with no margin or padding between them. They will automatically transition simultaneously, however, you’ll still have separate navigation for each slider. You’d have to make sure that you put your slides into separate Slideshows as well, of course so you aren’t just getting the same images repeated.
Admin, Thanks for you thoughts on this subject. I’m also trying to place Meteor slideshows side-by-side. In your response, you said: “You would then want to style the divs you created to hold the sliders so that they are side by side with no margin or padding between them.”
Can you offer a sample code as to how to ‘style the divs’?
Thanks, – Prem
You would put the php for each slider within it’s own wrapper div in the header. In the css, you would add something like the following:
.nameofleftwrapper
{
display: block;
position: absolute;
padding: 0;
margin: 0;
height: 100%;
width: 50%;
top: 0;
left: 0;
}
.nameofrightwrapper
{
display: block;
position: absolute;
padding: 0;
margin: 0;
height: 100%;
width: 50%;
top: 0;
right: 0;
}
Good Morning,
It was a blessing to find you site. Your words are so inspirational and Heaven sent.
Do you know if I can use this for a website design in Artisteer vs. a blog? I have a client that this would be perfect for, but she has a website.
Thanks in advance
Monique, WordPress is a great platform for a website or blog. I use WordPress for this site. Artisteer can put out basic html pages that can be used on a plain html site, however it’s much more useful to use it for designing CMS sites such as WordPress, Joomla, etc.
Sarah,
I am having difficulty correctly inserting the slideshow in my header.php for an Artisteer 3 generated theme. Could you offer some guidance as to where the code
should be placed?
Copy the Meteor Slides php code given on the Slides Setting Panel and paste it just above the logo div in your header.php file. It should look like this.
<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?> <div class="logo">If you want to specific exactly where the slider appears (for example if you don’t want it to take up the entire header space or float to the top left as it will automatically, you will need to put a div wrapper around this code, and then style that div in your css.
So the header code would then look like this:
<div class="slide-wrapper"> <?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?> </div> <div class="logo">And your css could look something like this:
div.slide-wrapper { position: absolute; display: block; top: 10px; /*this gives it a 10pixel margin from the top of the header. Change as desired. */ left: 10px; /*this gives it a 10pixel margin from the left of the header. Change as desired. */ height: /* add the desired height in pixels just like above. */ width: /* add the desired width in pixels just like above. */ }Thanks for the help. That got it sorted out right away.
In case you are subscribed to comments, you may want to return to the site to see the updates I made to my previous comment with additional code added for adding the Meteor slides plugin to your header.
Hi! I was surfing and found your blog post… nice! I love your blog. Cheers!