WordPress. How to add clickable phone numbers for smartphones

This tutorial will show you how to add clickable phone numbers for smartphones in WordPress.

WordPress. How to add clickable phone numbers for smartphones

1. Open your website. If you need to add a clickable phone number to your header, the proper format to write a telephone number is the following:
   <Country Code> <(Area Code)> <Local Number>. Example: +1 (555) 555-1212. However, most smart phones would also recognize these formats:

   • +15555551212

   • +1.555.555.1212

   • 555-555-1212

   • 555 555 1212

   Writing phone numbers in proper format will automatically convert them into links for mobile phone users. However, users with older phones may not see the link.

   Open your WordPress admin panel, navigate to Appearance -> Editor. Look for wrapper-header.php file and insert the following link. This link will work on Android and iPhone. It will be visible to desktop users but will result in an error when clicked:

   <a href="tel://+15555551212">+1 (555) 555-1212</a>
   <a href="tel://15555551212">Call Me</a>
   

   

   Click Update.

2. Check your website, please. You can see the link has appeared:

   

   This link will be visible to users on all devices. If someone on the desktop clicks on it, then it will do nothing on Google Chrome and will show an error in Firefox.

3. There is another way to insert the link and it will open Skype on desktop and notebooks, on mobile phones it will ask users if they would like to open Skype or dial this number using their phone.

   There is the code:

   <a href="callto://15555551212">+1 (555) 555-1212</a>
   

   

4. Check your website, please. The link has appeared:

   

5. If you need to link a number to an image, use this code:

     <a href="callto://15555551212" title="Call Me"><img src="/images/call-me.png" alt="Call Me" /></a>  

   When you put this code in your wrapper-header.php file, You can add a specific class, so you will have opportunity to align your image with the help of css styles.

   For example:

     <a href="callto://15555551212" title="Call Me" class="new"><img src="http://localhost/kristy/wordpress4/wordpress/wp-content/themes/theme51975/images/call-me2.jpg" alt="Call Me" /></a>  

   Make sure that you have uploaded image you need to your server and wrote the right way to this image. In our case http://localhost/kristy/wordpress4/wordpress/wp-content/themes/theme51975/images/call-me2.jpg:

   

6. Check your website, please. You see there is the image. Please align it with css styles. Add a New css code to your style.css file:

   

7. You can also create links to Skype usernames and provide live chat support, or voice call support to your visitors.

   Use this code in your wrapper-header.php file:

     <a href="skype:echo123">Skype</a>  

   

8. Check your website, please. You see Skype text. When you click it, it links to Skype:

   

Thank you for watching our tutorial, now you know how to add clickable phone numbers for smartphones in WordPress.

Feel free to check the detailed video tutorial below:

WordPress. How to add clickable phone numbers for smartphones