WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] Call to Action for each slide (11 posts)

  1. mmergola
    Member
    Posted 1 year ago #

    I love meteor slides, and I love the documentation/support even more. It is the main reason I went this route.

    However, I have been wracking my brain and finally have conceded to just start a new thread. Very simply put, I want to be able to add a different call to action button on each slide.

    I know I could technically make a jpeg that makes the entire picture clickable, but I don't want that for two reasons:
    1. I feel the hover effect on the button draws attention to it, and makes it more likely for the user to "take action".
    2. I don't want to limit my request to call to action buttons. I may, for example, decide to place a field (i.e. sign up for newsletter) right on the slide.

    So far, I have tried everything, including Advanced Custom Fields. I think the answer lies somewhere in the meteor-slides.php file, where I used your tutorial to have the navigation be the page title.

    At this point, I have reset everything back to scratch (except for the customizations that work) and I am asking for help. Thank you in advance.

    I am using Responsive theme (blogger child theme) and my website is http://www.dadfeed.com

    http://wordpress.org/extend/plugins/meteor-slides/

  2. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Thanks, you're totally on the right track with Advanced Custom Fields, I love that plugin and use it with Meteor Slides all the time.

    Start by using a custom slideshow template and following the instructions to make a simple caption. In the slideshow template you'll see how the slide images are linked using the slide link, you could add that same link to the slide title and use some CSS to make a nice big button instead of a caption.

    If you need more, like a couple of fields to add a title, description, and button text, you can add a custom meta box using Advanced Custom Fields. Check out this tutorial about Customize Meteor Slides with ACF to learn more.

  3. mmergola
    Member
    Posted 1 year ago #

    Thanks for the help. I am currently using your template/css/js file to have the slider change images when you hover over the titles. However, I think it is conflicting with my inability to get ACF to work.

    I made a separate custom form (slides_cta) and, I think, called it right in the CSS just to display a simple text. I used the tutorial you linked me to and still can't get it to work. I need to use a custom field because I am using your Title code as explained above.

    How on earth do I get my custom field to display with the Titles remaining where they are? I can't move on to formatting a button until I get past this simple roadblock. Thanks in advance!

  4. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Hi, I tried to check dadfeed.com, but the site is down for me, did you get this figured out or are you still having problems?

  5. mmergola
    Member
    Posted 1 year ago #

    Unfortunately it is still a problem. I've been toying around with options and haven't found anything yet (which is why the site was down). If it's not a problem, could you check it out again? Thanks so much.

  6. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Sure, I would start by getting the basic captions to work, from there you could adapt those into buttons easily, or expand on them with Advanced Custom Fields. I can see the paragraph tags in there, did you try adding the titles like in the slideshow caption example:

    <p><?php the_title(); ?></p>
  7. mmergola
    Member
    Posted 1 year ago #

    Yes, but if you look on the home page (not the code), I use your tutorial to have the titles be the menu for the slide. So I can't re-use the titles again elsewhere. That's why I'm trying to get ACF to work with it.

    I made an Advanced Custom Field called slides_cta and put a name to each slide. For whatever reason, I cannot get that to show in any capacity on the slide. I'm thinking it's conflicting with the title menu thing I'm talking about.

  8. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Ah cool, I didn't see those on there.

    The custom metabox you created with ACF is showing up alright on the slide posts in the admin and you're able to use it? You just can't get it to output that data on the frontend?

    Are you using the ACF functions to get data? The data is stored as standard custom field data, so you can load it using the standard WordPress functionality.

    The slide links are stored as custom fields too, you can see how I am getting the slide links in the custom slideshow template, I would try the same thing with the ACF data. Maybe something like this:

    <?php if ( get_post_meta( $post->ID, "slides_cta", $single = true ) != "" ): ?>
    					<p><?php echo get_post_meta( $post->ID, "slides_cta", $single = true ); ?></p>
    				<?php endif; ?>
  9. mmergola
    Member
    Posted 1 year ago #

    Okay, that worked so far!

    I now am able to get my ACF input to show on the slide. I know I can change the "p" in your code to "a" and make it a link, buuuut I now need to format the output into a button.

    I am using Responsive theme which has a call to action button (but is currently disabled because I have a full screen slider).

    If it isn't too much to ask, where do I go next? How do I turn this into a button? I think it is in the CSS, where I call .meteor-slides p {... but do I change that to .meteor-slides...(something else?)? This is where I get hung up again.

    I cannot thank you enough for the help so far, it is why Meteor Slides is the best option I have come across.

  10. mmergola
    Member
    Posted 1 year ago #

    Success! I was able to get it to work from the help of the guys at Responsive since their theme had the Call to Action button I needed.

    For anyone that cares, the solution was actually not in the CSS, it was in the meteor-slideshow.php file that Josh helped me edit. In the second line of his code, where it calls for <p><?php echo get_post_meta( $post->ID, "slides_cta", $single = true ); ?></p> , the p is a type of paragraph. I changed that to "a" to call a link (haven't actually gotten the right link). But, that's where I needed to call the button, using <a class="silver button"><?php echo get_post_meta( $post->ID, "slides_cta", $single = true ); ?></a> Once I did this, I just had to change .meteor-slides p{... to .meteor-slides a.button{... and it all worked!

  11. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Glad to hear you got it working!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.