Polylang for call-to-action button link

I am setting up Polylang to make my site bilingual french/english, so far it has been smooth except I am having trouble with the call-to-action button in the header. The button text is fine, strings translation in settings took care of that, however both the english and french button link to the english page. I have no idea how to correct this. Can I make it choose where the button leads based on the language selected?
Sorry, can’t link to my site as it is on localhost.
Thanks

Hello there,

Thank you for asking. I thought it couldn’t be achieved instantly via the plugin’s settings panel. You might need to try to use this plugin https://github.com/JoeHana/polylang-conditional. As it works with a schortcode, you can use text widget to substitute the call to action button.

In your content box of the text widget, enter the following shortcodes.

https://gist.githubusercontent.com/kharissulistiyo/b5156e22e2fc1bf5734a/raw/5ebf602fd64df84e4f12bacb53ae0cdbd39dc7bc/polylang-shortcode.txt

Make your own adjustment as needed.

Regards,
Kharis

Hi,
I have downloaded the plugin but am not sure how to use the text widget to substitute the call to action button as you suggest. Can you please clarify in more detail? Thanks

Hello there,

Please see this screencast https://cloudup.com/cAOVTdHK7K4

I hope it helps.

Regards,
Kharis

Hi,
I see how that works for a button on a page or post, but I am working on the call-to-action button that is part of the slider header.

Hello there,

In order to achieve that objective, could you please try to do the following?

  1. Insert a text widget with a language-button class name in any row of your page. Edit widget > Widget Styles > Attributes > Widget Class

  2. In the content box, put the following

https://gist.githubusercontent.com/kharissulistiyo/98aa8a4568f3e3ce86d3/raw/7863549d165bc051c8ee3412974de93d0c53949c/button.php

Please make your own adjustment as needed.

  1. Install and activate the Header and Footer Scripts plugin. Go to Settings > Header and Footer Scripts.

  2. Paste the following to the “Scripts in header:” box

<style>
.text-slider-section .button-slider{
  display: none;
}

.text-slider-section .button-slider.lang-btn{
  display: inline-block;
}

.language-button{
  display: none;
  visibility: hidden;
}
</style>
  1. Paste the following to the “Scripts in footer:” box
<script>
(function($){

    "use strict";
    var langBtn = $('.language-button .textwidget').html();

    $('.text-slider-section').append(langBtn);

})(jQuery);
</script>
  1. You’re done.

You would need to clear your site’s cache if you have cache plugin like W3 Total Cache being enabled and clear your browser’s cache as well before reloading your site.

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hi Kharis,
Almost there. Both buttons appeared on the default english slider, and the css code was visible behind the buttons.
Thanks

Hello there,

Could you confirm if your shortcodes are correct?

If possible, could please post your URL here so we can have a closer look?

Regards,
Kharis

How does this work for 5 slider buttons ?

jQuery(function($) {

//Define the new buttons. Delete the lines you don’t need
var button1 = ‘Button 1’; //Slide 1
var button2 = ‘Button 2’; //Slide 2
var button3 = ‘Button 3’; //Slide 3
var button4 = ‘Button 4’; //Slide 4
var button5 = ‘Button 5’; //Slide 5

//Hide the default button
$(’.slide-inner a’).hide();

//Add the new buttons. Delete the lines you don’t need
$( ‘.slide-item:nth-of-type(1) .slide-inner’ ).append(button1); //Slide 1
$( ‘.slide-item:nth-of-type(2) .slide-inner’ ).append(button2); //Slide 2
$( ‘.slide-item:nth-of-type(3) .slide-inner’ ).append(button3); //Slide 3
$( ‘.slide-item:nth-of-type(4) .slide-inner’ ).append(button4); //Slide 4
$( ‘.slide-item:nth-of-type(5) .slide-inner’ ).append(button5); //Slide 5
});

Hi @yadihinz,

Please check the code on this thread. You need jQuery code in similar fashion as suggested on there. For five custom slide buttons, use the following code:


jQuery(function($) {

  // Default links and labels
  
  var links = [
    'http://example.org/1',
    'http://example.org/2',
    'http://example.org/3',
    'http://example.org/4',
    'http://example.org/5'
  ];  

  var labels = [
    'Button 1',
    'Button 2',
    'Button 3',
    'Button 4',
    'Button 5'
  ];

  // Alter links and labels based on current language locale code 

  var currentLang = $('html').attr('lang');

  if(currentLang == 'id_ID'){ // For Bahasa Indonesia
    var links = [
      'http://example.org/id/1',
      'http://example.org/id/2',
      'http://example.org/id/3',
      'http://example.org/id/4',
      'http://example.org/id/5'
    ];  

    var labels = [
      'Button 1 for ID',
      'Button 2 for ID',
      'Button 3 for ID',
      'Button 4 for ID',
      'Button 5 for ID'
    ];
  } // id_ID ends

  
  if(currentLang == 'de_DE'){ // For Deutsch
    var links = [
      'http://example.org/de/1',
      'http://example.org/de/2',
      'http://example.org/de/3',
      'http://example.org/de/4',
      'http://example.org/de/5'
    ];  

    var labels = [
      'Button 1 for DE',
      'Button 2 for DE',
      'Button 3 for DE',
      'Button 4 for DE',
      'Button 5 for DE'
    ];
  } // de_DE ends  

  
  if(currentLang == 'fr_FR'){ // For Français
    var links = [
      'http://example.org/fr/1',
      'http://example.org/fr/2',
      'http://example.org/fr/3',
      'http://example.org/fr/4',
      'http://example.org/fr/5'
    ];  

    var labels = [
      'Button 1 for FR',
      'Button 2 for FR',
      'Button 3 for FR',
      'Button 4 for FR',
      'Button 5 for FR'
    ];
  } // fr_FR ends  
  
 
  // Define the new buttons. Delete the lines you don't need
  var button1 = '<a href="'+links[0]+'" class="roll-button button-slider">'+labels[0]+'</a>'; //Slide 1
  var button2 = '<a href="'+links[1]+'" class="roll-button button-slider">'+labels[1]+'</a>'; //Slide 2
  var button3 = '<a href="'+links[2]+'" class="roll-button button-slider">'+labels[2]+'</a>'; //Slide 3
  var button4 = '<a href="'+links[3]+'" class="roll-button button-slider">'+labels[3]+'</a>'; //Slide 4
  var button5 = '<a href="'+links[4]+'" class="roll-button button-slider">'+labels[4]+'</a>'; //Slide 5

  //Hide the default button
  $('.slide-inner a').hide();

  //Add the new buttons. Delete the lines you don't need
  $( '.slide-item:nth-of-type(1) .slide-inner' ).append(button1); //Slide 1
  $( '.slide-item:nth-of-type(2) .slide-inner' ).append(button2); //Slide 2
  $( '.slide-item:nth-of-type(3) .slide-inner' ).append(button3); //Slide 3
  $( '.slide-item:nth-of-type(4) .slide-inner' ).append(button4); //Slide 4
  $( '.slide-item:nth-of-type(5) .slide-inner' ).append(button5); //Slide 5
  
});

You have to adjust the WordPress locale code in this line to your selected language.


if(currentLang == 'id_ID'){ // For Bahasa Indonesia

Regards,
Kharis

Hi Kharis,

Thanks but now I’m confused.
I’m using this 5 button code in the custom javascript plugin.

Should I put this code in the footer to get the language in the var currentLang ?

<script type=“text/javascript”>
jQuery(function($) {

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

var btnURL      = $('.button-slider').attr('href');
var currentLang = $('html').attr('lang');

$('.button-slider').attr('href', btnURL);

}

});
</script>

Right now only the defaul links and button text are showing up.

Nevertheless this theme is awesome and I’m going to buy the Pro version because you helped me a lot.
I need a invoice with my VATnr though. Who can I contact ?

Aha found it problem was the underscore id_ID I changed it to id-ID