If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

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>
    

    screen1_howtoadd_phonelink_tosmartphone

    Click Update.

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

    screen2_howoadd_phone_link_to_smartphome

    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>
    

    screen3_howtoadd_phone_link_to_smartphone

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

    screen4_howtoadd_phone_link_to smartphone

  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:

    screen7_howtoadd_phone_link_tosmartphone

  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:

    screen8_howtoadd_phone_link_tosmartphone

  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>  

    screen5_howtoadd_phone_link_tosmartphone

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

    screen6_howtoadd_phone_link_to_smartphone

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