Add hyperlink telephone numbers to sydney contact info widget

I see in a previous answer that you can add hyperlink telephone numbers to sydney contact info widget by using Header and Footer Scripts plugin (I want to include multiple numbers. I have tried with this code in the footer

<script>
(function($){

  if( $('.contact-phone').length ){

    var tel    = '<a href="+34656855866">+34 656 855 866</a> / US Toll Free ';
        tel   += '<a href="+0018001234567">+00 1 800 1234567</a> / ';           

    $('.contact-phone').html('<span><i class="fa fa-phone"></i></span>'+tel);              

  }

})(jQuery);
</script>

on this page http://artobatours.com/contact , but it doesn’t appear to be working (I have cleared the cache).

Hi,

I’ve tried to simulate your script using chrome dev, and its working: http://prntscr.com/f6ufpf
can you re-applied your script and let me check it for further?

Regards,
Awan

Hi,
I’ve reapplied it but it’s not working for me.

Hi, It’s working now - but only if I turn off Autoptimize plugin. How to make work with Autoptimize plugin?

Hi,

I am sorry for the delay.
Maybe you can try to used another javascript plugin (not using Header and Footer plugin).
can you try this plugin: https://wordpress.org/plugins/tc-custom-javascript ?

Regards,
Awan

Hello, I would like to add the contact information and the Facebook button on the actual header of the page (titantshealth.com) so that it is on the right side, parallel to the copyright info. I have the child theme from sydney. Please help! :slight_smile:

Hi! I have tried using this script, but the hyperlink works only on the email part and not on the phone.
(www.nancy.rademaker.com/bookings)

any suggestions?

Hi @Nancyrademaker

I can’t access your site, is the URL correct?

Regards,
Awan

So sorry, it should be www.nancyrademaker.com/bookings/

Hi @Nancyrademaker,

I’ve found an error javascript on your site, Did you put the javascript code like below?

<script>
(function($) {

   'use strict'

   var phone = $('.header-phone').html().replace('<i class="fa fa-phone"></i>', '');
   var email = $('.header-email').html().replace('<i class="fa fa-envelope"></i>', '');

   $('.header-phone').wrapInner('<a href="tel:'+phone+'"></a>');
   $('.header-email').wrapInner('<a href="mailto:'+email+'"></a>');
 
})(jQuery);   
</script>

If yes, please try to replace it with this code instead:

(function($) {

   'use strict'

   var phone = $('.header-phone').html().replace('<i class="fa fa-phone"></i>', '');
   var email = $('.header-email').html().replace('<i class="fa fa-envelope"></i>', '');

   $('.header-phone').wrapInner('<a href="tel:'+phone+'"></a>');
   $('.header-email').wrapInner('<a href="mailto:'+email+'"></a>');
 
})(jQuery);   

Regards,
Awan

I have replaced it with the code you suggested, but still the phone number does not function as a hyperlink
Regards, Nancy

Hi @Nancyrademaker,

Yes, it’s not working yet, because I want you to fix the error first then continue solving the issue.
But, looks like the error still remains. From where do you get this code?

(function($) {

   'use strict'

   var phone = $('.header-phone').html().replace('<i class="fa fa-phone"></i>', '');
   var email = $('.header-email').html().replace('<i class="fa fa-envelope"></i>', '');

   $('.header-phone').wrapInner('<a href="tel:'+phone+'"></a>');
   $('.header-email').wrapInner('<a href="mailto:'+email+'"></a>');
 
})(jQuery);

After I re-check your site I am not sure if the code will working on your site because there’s no HTML element that matched to the code.

Can you please to try this code instead?

(function($){
  if( $('.contact-phone').length ){
    var tel    = '<a href="tel:+32477349384">+32 477 349 384</a>';
    $('.contact-phone').html('<span><i class="fa fa-phone"></i></span>'+tel);              
  }
})(jQuery);

Thanks Awan, now it works!!

1 Like