Adding a secondary button to the slider in pure javascript

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

This snippets will allow you to add another button in any slide like in the picture below.

 

Add_a_button_in_customizr_slider

 

This snippet has been developed in javascript because there are no easier way to do this with filters or actions in the current version of the theme (v3.1.6).

To make the snippet works :

  1. Create a slide with a call to action linked to a page or post of your site
  2. Grab the page/post’s id of this call to action, and replace FIRST-POST-ID ( 2 in the snippet below ) by its value in the code
  3. Grab the id of the secondary  page/post’s you want to link to the secondary buttons and replace SECOND-POST-ID ( 9 in the snippet below ) by its value  in the code

 

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-slide .carousel-caption').length === 0 )
                    return;

                //adds the new button html content after the original button
                $('a[href="'+ target_original_button_link +'"]' ,  '.customizr-slide .carousel-caption').after(new_btn_content);
            }(window.jQuery)
        });
    </script>
    <?php
}

Further reading :

Styling the buttons in Customizr

Adding an external url to a slide

 

Where to paste this code? => in your functions.php file. I strongly recommend to create a child theme. Download a start-up child theme here.

Everything you need to know about child theme with Customizr here.

4 thoughts on “Adding a secondary button to the slider in pure javascript”

Comments are closed.