Multiple Call to Action Buttons - New Tab or Window

Hi,

Thanks to Kharis for wonderful advice on these forums, I have successfully gotten the first CTA button on my website to open in a new tab.

Issue: I would like my second and third call to action buttons to link out to websites. Though I have tried different coding fixes, I can’t seem to figure out how to get my other two CTA buttons to link out to new tabs/windows.

Any help would be appreciated.

Below are the scripts I’ve used from Kharis, and they’ve worked like a charm.

Dave

HEADER AND FOOTER SCRIPT:
<script type=“text/javascript”>

jQuery(function($) {

if( $(’.button-slider’).length ){

  $('.button-slider').attr('target', '_blank');
  
}

});

</script>

CUSTOM JAVA SCRIPT:
jQuery(function($) {

 var myButton1 = '<a href="https://www.amazon.com/You-Know-Ones-Dave-Malone-ebook/dp/B073K35XWQ/">ebook</a>';
 var myButton2 = '<a href="http://eepurl.com/bIwkIn">Join the Posse</a>';

 $( '.slide-inner' ).append(myButton1 + myButton2);

});

Hello there,

Technically, we have to add a target attribute to your link and its value must be _blank to make it opens in new tab or window. You can read about it on this W3S docs. To apply it on your other extra buttons, replace these lines:


var myButton1 = '<a href="https://www.amazon.com/You-Know-Ones-Dave-Malone-ebook/dp/B073K35XWQ/">ebook</a>';
var myButton2 = '<a href="http://eepurl.com/bIwkIn">Join the Posse</a>';

to


var myButton1 = '<a href="https://www.amazon.com/You-Know-Ones-Dave-Malone-ebook/dp/B073K35XWQ/" target="_blank">ebook</a>';
var myButton2 = '<a href="http://eepurl.com/bIwkIn" target="_blank">Join the Posse</a>';

Regards,
Kharis

Thank you, Kharis. That worked–to make the links open in a new window. But it caused the button style to go away on the buttons “ebook” and “join the posse.” See this screenshot:

What do you think?
Dave

Hello Dave,

Please use this code:


var myButton1 = '<a href="https://www.amazon.com/You-Know-Ones-Dave-Malone-ebook/dp/B073K35XWQ/" target="_blank" class="roll-button roll-button2 button-slider">ebook</a>';
var myButton2 = '<a href="http://eepurl.com/bIwkIn" target="_blank" class="roll-button button-slider">Join the Posse</a>';

Then add the below extra CSS code to Appearance > Customize > Additional CSS to add some spaces.


.roll-button2 {
  margin-right: 4px;
}

Do adjustment as needed.

Regards,
Kharis

Kharis,
Brilliant! It worked like a charm. Thank you so much!
Dave

You’re welcome, Dave! We’re glad to have an opportunity to assist you.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

One more thing.

If you enjoyed Sydney and our support service, would you mind rate it here:https://wordpress.org/support/view/theme-reviews/sydney#postform like some of our users did? We would highly appreciate it if you do so.

Regards,
Kharis

Done. Thank you!

best,
Dave

Thank you very much!

Thanks the Additional CSS trick helped me too.