Blog, PHP, WordPress, WordPress Plugins, WordPress Shortcode

Telephone Call HTML Link (and WordPress Shortcode)

Your website should do everything it can to make the user experience a pleasurable one, and to reduce the barriers necessary for a user to convert as you want them to. In essence, the former consideration is a key component to the latter objective. A small but effective change to your contact link will draw you closer towards meeting both those aims. While a contact form is still a necessity on both mobile and desktop applications, you can add an additional link for mobile users to launch a telephone call. It's this feature that is discussed in brief on this page (with supporting WordPress shortcode).

Note: The WP plugin version that originally accompanied this article will be added back in soon. Shortcode and PHP code remains.

In our case, we have a small telephone icon at the bottom of every page that renders a link based on the platform the visitor is using; either a link to our contact page or a call link. We use WordPress' largely flawed wp_is_mobile() function to determine the platform, and then display an icon.

The icon above demonstrates the end result. Again, the icons renders a contact page if on a PC and a telephone link if on a phone.

You may optionally wrap text in telephone shortcode tags to return a text link. The shortcode of [telephone]call me[/telephone] returns call me. Note: The shortcode parser is unable to handle mixing of enclosing and non-enclosing forms of the same [$tag]. You should use one or the other (inside the loop). If you do require a mix of text and image links on the same page, close all shortcodes.

Tel: Schema

In addition to the tel: schema, some modern browsers also support the sms: and mms: schemas (all supported in our code) - though support is not as consistent, and some features like setting the message body don't always work. In its simplest form, the schema for a mobile link is as follows.

<a href="tel:+61400777300">link</a>

Note that we've started the phone number with a + sign. The country code and area codes should follow. So, always use the international calling format.

WordPress Shortcode

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin. You may optionally download and install our plugin from the bottom of of the page.

<?php

Link to contact page or launch phone call

http://www.beliefmedia.com/telephone-link

function beliefmedia_telephone_link($atts, $content = null) {

$atts = shortcode_atts(array(

'type' => 'tel', /* tel, sms, mms */

'tel' => '+61300235433',

'image' => 'http://www.beliefmedia.com/wp-images/site/telephone-footer.png',

'link' => 'http://www.beliefmedia.com/contact',

'title' => 'Contact BeliefMedia',

'style' => 'vertical-align:-5px;',

), $atts);

/* Check permitted schema */

$permitted = array('tel', 'sms', 'mms');

if (!in_array($atts['type'], $permitted)) $atts['type'] = 'tel';

if ($content == '') {

return (wp_is_mobile() !== false) ? '<a href="' . $atts['type'] . ':' . $atts['tel'] . '" title="' . $atts['title'] . '"><img src="' . $atts['image'] . '" style="' . $atts['style'] . '"></a>' : '<a href="' . $atts['link'] . '" title="' . $atts['title'] . '"><img src="' . $atts['image'] . '" alt="' . $atts['title'] . '" style="' . $atts['style'] . '"></a>';

} else {

return (wp_is_mobile() !== false) ? '<a href="' . $atts['type'] . ':' . $atts['tel'] . '" title="' . $atts['title'] . '">' . $content . '</a>' : '<a href="' . $atts['link'] . '" title="' . $atts['title'] . '">' . $content . '</a>';

}

add_shortcode('telephone', 'beliefmedia_telephone_link');

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

Shortcode Attributes

Alter the attributes to reflect your default behaviour. That said, you can alter the behavior with the following:

type

Permitted schema types include tel, sms, and mms. The message option was left out simply because it's largely unsupported.

tel

The full the international calling format of a telephone number.

image

The image to display.

link

The image link.

title

The image title attribute.

style

Style applies to the alignment of the image. If using inline, you may have to alter it to center it with text.

WordPress Plugin

If you download our plugin below, you'll have a control panel option to update your default settings.

Telephone Call HTML Link (and WordPress Shortcode)

PHP Function

If you choose to use the feature outside of WordPress, use the beliefmedia_wp_is_mobile() from this page (it's a copy of the WP function). The function is included in the download below.

<?php

Link to contact page or launch phone call

http://www.beliefmedia.com/telephone-link

http://www.beliefmedia.com/mobile-redirects

beliefmedia_wp_is_mobile()

function beliefmedia_telephone_link($tel = '+61400777300', $type = 'tel', $args = '') {

$atts = array(

'image' => 'http://www.YourDomain.com/images/telephone-footer.png',

'link' => 'http://www.beliefmedia.com/contact',

'title' => 'Contact BeliefMedia',

'style' => 'vertical-align:-5px;',

);

/* Merge $args with $atts */

$atts = (empty($args)) ? $atts : array_merge($atts, $args);

/* Check permitted schema */

$permitted = array('tel', 'sms', 'mms');

if (in_array($atts['type'], $permitted)) $atts['type'] = 'tel';

return (beliefmedia_wp_is_mobile() !== false) ? '<a href="' . $atts['type'] . ':' . $atts['tel'] . '" title="' . $atts['title'] . '"><img src="' . $atts['image'] . '" style="' . $atts['style'] . '"></a>' : '<a href="' . $atts['link'] . '" title="' . $atts['title'] . '"><img src="' . $atts['image'] . '" alt="' . $atts['title'] . '" style="' . $atts['style'] . '"></a>';

}

Usage:

/* Usage */

echo beliefmedia_telephone_link($tel = '+61400777300', $type = 'tel');

/* With args */

$args = array('link' => 'http://www.beliefmedia.com/');

echo beliefmedia_telephone_link($tel = '+61300235433', $type = 'tel', $args);

Other than the telephone number and schema type, other arguments are (optionally) passed via the $args array. Alter the $atts array to reflect your own defaults.

Considerations

The tel URI for Telephone Numbers on ietf.org .
URI tel schema on schema.org .
To prevent Mobile Safari from automatically detecting phone numbers, add the following meta tag to the top of the page: <meta name="format-detection" content="telephone=no">.
While not absolutely necessary, it's a good idea to separate each segment of the number with a hyphen (-) for easier reading and better auto-detection.

Download

Title: Telephone Call HTML Link (WordPress Shortcode)
Description: Renders a telephone image link or text link with shortcode.
Download • Version 0.1, 685.0B, zip, Category: WordPress Shortcodes
PHP Code & Snippets, (969.0B)

■ ■ ■

Download our complimentary 650-page guide on marketing for mortgage brokers. We'll show you exactly how we generate billions in volume for our clients.