Sydney: Contact Info Widget

Hello there,

For security reason, HTML code isn’t allowed in that field. But we still have a chance to do so by using jQuery approach. Please try to do the following steps:

1. Install and activate the Header and Footer Scripts plugin
2. Go To Settings > Header and Footer Scripts panel
3. Paste the following code into the provided “Scripts in footer:” box

<script>
(function($){

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

    var getText = $('.contact-phone').contents().filter(function() {
                    return this.nodeType == 3;
                  }).text();
    var tel     = '<a href="tel:'+getText+'">'+getText+'</a>';              

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

  }

})(jQuery);
</script>

4. Save settings
5. Clear you web browser’s cache before reloading your site.

I’ve also noticed that a lot of the input boxes on the Sydney theme strip out HTML code – is there a reason for this?

We always follow the WordPress coding standard. Every input field must be sanitized contextually. Please read the WP codex.

Regards,
Kharis

Hi Kharis, thanks for the help with this!

As for the jQuery code, I list multiple numbers in the ‘contact-phone’ field:

+60 9085 4566 / +60 9895 4554 / +60 9055 1235

The current code wraps the ‘tel:’ tag around all the numbers – not really working properly.

Is there a way to tweak the code to add the ‘tel:’ around each individual set of numbers?

Hello there,

Please try to replace the code I previously suggested with this one:

<script>
(function($){

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

    var tel    = '<a href="+6090854566">+60 9085 4566</a> / ';
        tel   += '<a href="+6098954554">+60 9895 4554</a> / ';
        tel   += '<a href="+6090551235">+60 9055 1235</a>';           

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

  }

})(jQuery);
</script>

Clear your web browser’s cache, then reload your site.

Regards,
Kharis

I am trying to use the first script:
<script>
(function($){

if( $(‘.contact-phone’).length ){

var getText = $(‘.contact-phone’).contents().filter(function() {
return this.nodeType == 3;
}).text();
var tel = ‘‘+getText+’‘;

$(‘.contact-phone’).html(‘<span><i class=”fa fa-phone”></i></span>’+tel);

}

})(jQuery);
</script>

It is returning my phone number 3 times. How can I change it to listing it only once? I would also like to make my address line in this widget 2 lines. It appears like this:

Thank you.

I have used the recommended Header and Footer Scripts plugin, but want to know where exactly the script is stored: I have looked at the Theme Footer (footer.php) but I don’t see the added script.