Customizing The Slideshow Template

The layout of the Meteor Slides slideshow is determined by a template file. You can copy this file into your theme to override the default template and customize the slideshow loop or other markup without hacking the plugin.

Adding a custom slideshow template

Copy meteor-slideshow.php from /meteor-slides/includes/ to your theme’s directory to replace the plugin’s default slideshow template.

Using the slideshow template

Customizing this template should be unnecessary in most circumstances. Custom CSS or metadata should be enough to accomplish most tasks.

Adding a caption or title

One reason you may choose to customize the slideshow template would be to add a title or caption to the slides.

Add the title of the slide posts to the slideshow by adding this line of code:

<p><?php the_title(); ?></p>

That should go directly above the closing slides tag:

</div><!-- .mslide -->

You’ll need to use a custom stylesheet and add a bit of CSS to style the title.

In the code example below, I have added a semi-transparent PNG to the background of the title so that it is more legible over a variety of slides:

.meteor-slides p {
    background: rgba(0,0,0,0.2);
    bottom: 0;
    color: #fff;
    left: 0;
    line-height: 20px;
    margin: 0;
    padding: 2%;
    position: absolute;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
    width: 96%;
}
Captions Skin

To easily add captions to your slideshow, you can use the captions skin in your theme, which contains the custom PHP and CSS from the example above.

Opening links in a new tab/window

To add a blank target to the slide links so that the links open in a new tab or window, replace this line of code:

<a href="<?php echo get_post_meta( $post->ID, "slide_url_value", $single = true ); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'featured-slide' ); ?></a>

With this one:

<a href="<?php echo get_post_meta( $post->ID, "slide_url_value", $single = true ); ?>" title="<?php the_title(); ?>" target="_blank"><?php the_post_thumbnail( 'featured-slide' ); ?></a>