Hot to make a phone number clickable link in DIVI theme

Hot to make a phone number clickable link in DIVI theme

The DIVI WordPress theme has a phone number in the secondary header but, as many of us have noticed, it is not clickable on mobile devices. Even if you place a valid ahref tag (tel:) in the same field still nothing happens and the link does not work. Here is the thing that worked out for me.

1. Insert the following script in the header

Navigate to Divi > Theme Options > Integration > “Add code to the < head > of your blog” and insert the following code:

<script type="text/javascript">
jQuery(document).ready(function(){
var number = jQuery('span#et-info-phone').text();
var tel = "tel:"+ number;
jQuery('span#et-info-phone').text('');
jQuery('span#et-info-phone').prepend('<a href=""></a>');
jQuery('span#et-info-phone a').text(number);
jQuery('span#et-info-phone a').attr('href',tel);
});
</script>

2. Insert the phone number

Go to Appearance > Customize > Header & Navigation > Header Elements and place the phone number in the PHONE NUMBER field. In case this does not work after the first save, go back and enter the number in the following format:

<a href="tel:+381112994601" rel="nofollow">011/299-4601</a>

Save, reload the front page and I hope you will enjoy the clickable phone link in DIVI WordPress theme.

Published
Categorized as WordPress

By janoshke

Web developer and IT consultant. Freelancer with full respect for OpenCart and WordPress. Gamer, (ex)drummer and parent.

Leave a Reply