Adding a secondary button to the slider in pure javascript

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

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