Wordpress change url from http:// to tel:

Question

I've been stuck on this all day!

I'm using a custom wp_nav in Wordpress and I need to change one custom menu item from href="http://555.555.5555" to href="tel:[phone]". I've added a class="phone" to the menu-item and I'd like to change it using that class (since I can't add a custom id in WP).

I'd prefer it be done onLoad and not onClick. Your help is much appreciated.

The code output by Wordpress is:

<li id="menu-item-654" class="phone menu-item menu-item-type-custom menu-item-object-custom menu-item-654"><a href="http://555.555.5555">Call</a></li>

I need it to look like this using Javascript:

<li id="menu-item-654" class="phone menu-item menu-item-type-custom menu-item-object-custom menu-item-654"><a href="tel:[phone]">Call</a></li>

Answer 1

Granted you're comfortable with a little jQuery, load it up in WordPress and paste this into your header, or create an add_action for wp_head.

<script type="text/javascript">
jQuery(document).ready(function(){

  var href_value;

  href_value = jQuery('li.phone a').attr('href');

  href_value = href_value.replace('http://','tel:');

  jQuery('li.phone a').attr('href',href_value);

});
</script>

Let me know if that worked for you.

Answer 2

Use my plugin - it's simpler - plus putting jQuery directly into the header is a bit messy. http://wordpress.org/extend/plugins/telephone-number-linker/