If you’re as much a fan of customizing and optimizing Divi websites as we are, you’ve probably noticed some possible improvement for the phone number feature in the upper left-hand corner of WordPress websites running Divi theme. The element containing your contact phone number is a span element, with no anchor nested anywhere above or below. The phone number element won’t even allow you to manually type in your own link.

How to Add a Clickable Phone Number in Divi Theme

Simply putting in your own anchor and hyperlink into the Phone Number field doesn’t work, because Divi parses out HTML from the field.

We decided that providing a clickable phone number not only makes our WordPress site running Divi theme more unique, but would help create a more fluid user experience (and perhaps even help our conversions). We’d like to share this with you so that you can benefit from having a clickable phone number as well.

We scoured Stack Overflow to find some clean code to mash together into our own functional snippet. User gilly3 wrote up a great answer about converting an anchor to a span element. However we wanted to achieve the opposite effect of what his code did, so we had to make a few changes as well as add some code of our own. You can see the final result:

<script type="text/javascript">
jQuery(document).ready(function ($) {
//Prevents $ is not a function error

  $.fn.cloneTo = function (target) {
  //Clones the styling already applied to the existing node

    if (!target || !target.jquery) {
      target = $(target);
    }
    if (this.length) {
      $.each(this[0].attributes, function(i, attr) {
        target.each(function(){
          this.attributes.setNamedItem(attr.cloneNode(true));
        });
      });
      $.each(this.data("events"), function(evt, handlers){
        $.each(handlers, function(i, handler){
          target.bind(evt, handler);
        });
      });
      target.empty().append(this.contents());
    }
    return this;
  };
  var no_spaces = $('#et-info-phone').text().replace(/\s+/g, '');
  //Removes empty spaces in the phone number

  var anchor = $('<a>');
  $('#et-info-phone').cloneTo(anchor).replaceWith(anchor);
  //Runs the cloning function above and then replaces the <span> with <a>

  $('a#et-info-phone').attr('href', 'tel:' + no_spaces);
  //Adds the tel: protocol to the beginning of the hyperlink, so that
  //Skype, Hangouts, or your smartphone will know how to handle it
});
</script>

How this code works is simple: it takes the <span> element that currently houses the phone number info and converts it to an <a> element. There are other (shorter) methods available to do this; the main advantage here being that you get to keep the nifty icon to the left. We find that the phone number looks cleaner with the icon present, and didn’t find a noticeable difference in pagespeed with the code above.

You may paste this code under Divi > Options > Integrations. However under Appearance > Customize, don’t forget to include the country code before the phone number you enter (+1 for the United States, +44 for United Kingdom, etc.).