Customize Meteor Slides with Advanced Custom Fields

I’ve spent a large block of time recently working on a project for a new client, intent on proving just how slick it is to build sites from a really solid, clean, FAST platform (Genesis – affiliate link). BUT I found myself stuck on an issue with the front page development and realised just how much of a handicap it can be when you get so welded to a ‘way of doing things’ that you forget just what else is out there.

Here’s the problem.

The site needs a paginated, slideshow for the front page (ok, not much of a problem, every site on the Internet*, has one of those…) whose images link to a specific URL and in which you can include a heading and descriptive text.

Here’s what I brought to the problem. I’m so used to using Genesis plugins that I defaulted to tricking out the Genesis responsive slider to do what we needed… BUT, this was dumb… because while it’s a great plugin in it, each sliding image is linked to a post, and in this scenario we actually only wanted images with links to wherever we direct. To get the Genesis slideshow to go where we wanted would have involved 301 redirects… inelegant, and slow. (Ok, I’m not proud of myself here. But I’m telling you so that you know that it’s OK to be an idiot about how you solve a problem so long as you are open to changing your mind, and changing the plan to do the best job in the long run (and yes, it meant working on the weekend!)).

So, I did a bit of digging to find a better solution, looking instead just for a slideshow in which you could link the images to any arbitrary URL.

Predictably, there are a LOT in the WordPress repository, so the right solution was going to take some time to get to… and while I could regale you with tales of dreadful products, some that even required installing things like Adobe Air to get going, I will, instead, keep this short(ish) and tell you what I found…

WordPress-Meteor-Slides-WordPress-Plugins

Now, Meteor Slides, out of the box isn’t the TOTAL solution, but because it is built on custom post types and because the developer has cottoned on to the fact that there are savvy devs like me (and you) out there who might want to be able to make his plugin go further, he’s built it so it’s extensible and so that we can make it be even more awesome than it already is… So we’re going to customize meteor slides with Advanced Custom Fields (a fabulous plugin).

OK, here’s the tut, I know you’ve been waiting for it…

What you’ll need.

  1. WordPress installed (Genesis optional)
  2. MeteorSlides plugin
  3. Advanced Custom Fields plugin (trust me, you’ll thank me for this one)
  4. Slideshow Images

1. Install and activate the plugins

You don’t need me to show you this bit, right?

2. Create your slideshow, and upload your slides to it.

I’m actually not going to show you how to do this here either, because you can get a ‘how to’ about Meteor slides on the plugin page, there’s even video. What I will point out here is that I have named each slide with the Heading (title) Text we are going to want to display later.

Slideshow_Customisation_Slides

3. Place your slideshow in your site…

I did this using a Widget Area, but you can also put shows into posts, or pages, or can hard code it into your templates if you like. Now – I’ll point out here that this is the point where I tweaked the CSS code to get the pagination where I wanted it and so on, so that the slideshow is looking like I want it to before we get to customising it.

Slideshow-Customisation-without-Title

4. OK, here’s where it gets interesting!

We want to include the title of the image to the slideshow… and because the plugin dev knew we’d need to do such things he’s made it so that you can copy the meteor-slideshow.php template from the includes directory in the plugin files and save it into your theme directory. Now you can tweak the template all you like and A) your changes won’t be overwritten when the plugin is upgraded and B) there is no B.

Here is the code taken from the template that affects each individual slide, now on mine the line started at 103, but yours could be different… the important part is that last line

[php firstline="102" toolbar="true"]

<div class="mslide mslide-<?php echo $i; ?>">

<?php // Adds slide image with Slide URL link

if ( get_post_meta( $post->ID, "slide_url_value", $single = true ) != "" ): ?>

<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>

<?php // Adds slide image without Slide URL link

else: ?>

<?php the_post_thumbnail( ‘featured-slide’ ); ?>

<?php endif; ?>

</div><!– .mslide –>
[/php]

In the first step I just added in the normal WordPress the_title(); wrapped in header tags and placed it after the endif;.

[php firstline="117"]
<?php endif; ?>
<h1><?php the_title(); ?></h1>

<!– .mslide –>
[/php]

You could also wrap it in a hyperlink too (below), so that clicking the title will take you to the page the slide is linked to (I just copied the relevant code from the template where the images get linked to the custom urls we set… no sense in writing code you don’t have to!!).

[php firstline="117"]
<!–?php endif; ?–>

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

<!– .mslide –>
[/php]

Then we need to add in the CSS code to your stylesheet to make the Heading show up on your slide – you can tweak all these attributes to suit your slideshow

[css]
.meteor-slides h1 {
position: absolute;
top: 20px;
left: 25px;
width: 400px;
font-size:24px;
font-weight:300;
}
[/css]

Here’s the result.

Slideshow-Customisation-with-Title

5. Adding the Description

Now we need to add in the description… And you may have noticed that there’s no field in the slider settings that allows for such a thing. This is where Advanced Custom Fields(ACF) comes in. Because ACF can be applied to any kind of post type, and because Meteor is made out of a Custom Post type we can simply use ACF to add a custom field called Description to our slides.

1. So open up ACF and create a Field Group. I called mine Slide Descriptions and assign that field group to your Slides post type.

Field-Group-Editing-Advanced-Custom-Fields-Slideshow-Customisation

2. Then Add a Field. Predictably, mine is called Slide Description with a field name of ‘slide-description’. Close and save and return to your slides.

Edit-Custom-Field

Now, when you go back to edit your slides you’ll see we have a nice shiny new field called Description. Type/paste your relevant descriptive text here.

Edit-Slide-add-Description

So the only thing that remains is to then call your description in the slideshow template… which we do as follows.

[php firstline="138"]
<?php endif; ?>
<h1><a href="<?php echo get_post_meta( $post->ID, "slide_url_value", $single = true ); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
<p><?php the_field(‘slide-description’); ?></p>

</div><!– .mslide –>
[/php]

I’ll make a note here for other Genesis users, you can achieve the same result as above using the genesis specific genesis_custom_field() tag as follows

[php firstline="140"]

<?php genesis_custom_field(‘slide-description’); ?>

[/php]

Finally, you need to edit your stylesheet to display the description how you wish.

[css]
.meteor-slides p {
background: transparent url(”) repeat top left;
top: 70px;
left: 30px;
color: #000;
margin: 0;
padding: 5px;
position: absolute;
text-align: left;
width: 400px;
}
[/css]

SO, in short.

  1. Install Meteor Slides and Advanced Custom Fields
  2. Create a Slideshow in Meteor Slides
  3. Insert the slideshow into your theme
  4. Style it to suit your theme
  5. Copy the meteor-slideshow.php to your theme directory
  6. Edit meteor-slideshow.php to include your title();
  7. Style your Title in your CSS
  8. Create a Field Group for your slides custom post type using ACF
  9. Create a Description for your Slides
  10. Edit meteor-slideshow.php to include your Custom Description Field
  11. Edit your CSS to display the custom field as you wish.

Enjoy!

*total exaggeration.

  • http://maddisondesigns.com Anthony Hortin

    What a clever solution. Great use of ACF to extend the slider plugin. Good job Dee!

    • http://182.160.131.226/~pr1nc3ss Dee

      Thanks! Was a fun project :) Glad it can be useful to others

  • http://wpboss.laurahartwigdesign.com Laura Hartwig

    Thanks for this great tutorial. I was able to use it, but ended up having to use


    instead of

    • http://182.160.131.226/~pr1nc3ss Dee

      Hi Laura, I’m sorry WP stripped out your code… can you email it to me? theprincess[ at ] thewebprincess.com :) thanks, I’d love to see it.

  • Thomas

    Hello Princess,
    it seems that images of this post are no longer found :/

    • Thomas

      Ok I found out the problem : there is a missing / in the links :)

      • http://182.160.131.226/~pr1nc3ss Dee Teal

        Thanks Thomas, was a bad db search/replace, fixed it up with a good one. Should find everything now as it should be.

        D

  • Ccile

    Thanks a lot. I didn’t know ACF. Great great solution !!

  • BossLady

    Thank you thank you for this. I love Meteor slides, but I just want to add the slide title, not a post title, which is what the developer’s instructions actually does. And the instructions for adding a caption are the same as post title, which equals broken when implemented. Will give this a try. Thanks again!

    • BossLady

      Worked BRILLIANTLY!!! All I needed was to wrap the code in h1 tags, rather than p tags. Also, I want my slide title at the top, so I just moved the code to just after the opening div, rather than just before the closing. Looks fabulous. Just needs a little styling and that’s it. I tell my husband all the time that I am the Queen. Today I humbly bow to the Princess. Thanks!

      • http://182.160.131.226/~pr1nc3ss Dee Teal

        You’re totally welcome BossLady, glad I could help!

  • http://www.dadfeed.com Mario

    This tutorial is exactly what I was looking for, but somehow I can’t replicate it. I can’t tell if it is because I am placing the “the_field(‘slide-description’)” code in the wrong location or if my CSS is calling the wrong thing. I am using the Meteor Slides’ documentation for the caption title, but ACF for a custom field (called “slides_cta”).

    Basically, where do I put the code to define “p” (I think) as the field?

    • http://182.160.131.226/~pr1nc3ss Dee Teal

      Hi Mario, hard to say without seeing your code, sling me a link via the contact page, I’m happy to have a look for you.

  • benetmc

    Thanks, really useful