WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Adding Second Button to one Slide in Slider? (17 posts)

  1. primasilva
    Member
    Posted 6 months ago #

    My clients wants two buttons on one of the slider slides. Anyone know how I can make this happen?

    Thanks!

  2. nikeo
    Member
    Theme Author

    Posted 6 months ago #

    Hi @primasilva, you might want to use this snippet to do this
    http://www.themesandco.com/snippet/adding-secondary-button-slider-pure-javascript/

    Thanks for using the theme

  3. primasilva
    Member
    Posted 6 months ago #

    Awesome, thanks for the help & for creating such a great theme :)

  4. primasilva
    Member
    Posted 5 months ago #

    Hey, so I used your snippet and ran into another problem - the extra button now also appears in the nav menu :-/

  5. rdellconsulting
    Member
    Posted 5 months ago #

    Link to site?

  6. primasilva
    Member
    Posted 5 months ago #

    Link Here

    If you look in the nav menu at Business->Intrusion Alarms, you can see the extra Home Protection button

  7. rdellconsulting
    Member
    Posted 5 months ago #

    Can't see it. Have you tried clearing your cache?

    This snippet might improve your menu dropdown

  8. primasilva
    Member
    Posted 5 months ago #

    Thanks, I'm fine with my dropdown. But the extra button is still there. See image below

    here

    ^ The orange one that says Home Protection.

    (here's the button on the slider)

  9. rdellconsulting
    Member
    Posted 5 months ago #

    As a short fix, try this:

    #menu-item-284 > a {
      display: none;
    }

    but still haven't diagnosed the root cause or filled the white space this creates

  10. rdellconsulting
    Member
    Posted 5 months ago #

    Can't spot a CSS issue. What's in your functions.php around this extra button?

  11. rdellconsulting
    Member
    Posted 5 months ago #

    #menu-item-279, #menu-item-282, #menu-item-280, #menu-item-986 {
      position: relative;
      top: -40px;
    }

    closes the gap.

    This a solution, but I'm not happy with it!!

  12. primasilva
    Member
    Posted 5 months ago #

    Thanks SO much for your help, that works for now at least!

    I used the code in the snippet nikeo provided:

    /**
     * Adds another button to Customizr slider
     */
    
    add_action('wp_footer' , 'add_secondary_button_to_a_slide');
    function add_secondary_button_to_a_slide() {
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function () {
                ! function ($) {
                    //prevents js conflicts
                    "use strict";
    
                    var target_original_button_link    = '<?php echo get_permalink(71) ?>';
                    var new_btn_content                 =  ' <a class="btn btn-large btn-warning" href="<?php echo get_permalink(128) ?>">Home Protection</a>';
    
                    //checks if the target slide url exists first
                    if ( $('a[href="'+ target_original_button_link +'"]').length === 0 )
                        return;
    
                    //adds the new button html content after the original button
                    $('a[href="'+ target_original_button_link +'"]').after(new_btn_content);
                }(window.jQuery)
            });
        </script>
        <?php
    }
  13. primasilva
    Member
    Posted 5 months ago #

    Ugh... it still shows in the collapsed menu, though >.<

  14. primasilva
    Member
    Posted 5 months ago #

    Shoot, nevermind, that was a no-go. That CSS also removed the Intrusion Alarms button that I need. So the new Home Protection button must actually be appended to the Intrusion Alarms one?

  15. rdellconsulting
    Member
    Posted 5 months ago #

    OK, I've asked Nic to take a look as it may be a bug in his snippet. Hang in there!

  16. nikeo
    Member
    Theme Author

    Posted 5 months ago #

    Hi @primasilva, your feedback helped me to fix a tiny issue in the snippet!
    Here's the updated code that should prevent the button to be displayed in the menu :

    add_action('wp_footer' , 'add_secondary_button_to_a_slide');
    function add_secondary_button_to_a_slide() {
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function () {
                ! function ($) {
                    //prevents js conflicts
                    "use strict";
    
                    var target_original_button_link    = '<?php echo get_permalink(2) ?>';
                    var new_btn_content                 =  '&nbsp;<a class="btn btn-large btn-warning" href="<?php echo get_permalink(9) ?>">Call to action #2</a>';
    
                    //checks if the target slide url exists first
                    if ( $('a[href="'+ target_original_button_link +'"]' , '#customizr-slider' ).length === 0 )
                        return;
    
                    //adds the new button html content after the original button
                    $('a[href="'+ target_original_button_link +'"]' , '#customizr-slider').after(new_btn_content);
                }(window.jQuery)
            });
        </script>
        <?php
    }

    Thanks
    @rdellconsulting : thanks for reporting as always!

  17. primasilva
    Member
    Posted 5 months ago #

    Awesome, I think that did the trick - Thanks so much for both your help!

Reply

You must log in to post.

About this Theme

About this Topic