How to Make a Phone Number Clickable in WordPress?

User Experience (UX) plays a vital role in website conversion. Whether you are running a business or managing a personal blog, having clickable phone numbers can significantly improve your website’s accessibility and engagement.

In this blog post, we will learn how to make a phone number clickable in WordPress and how to effectively use phone numbers on your website to improve your conversion.

Let’s get started.

What is the “tel” Link Attribute?

Let’s take a moment to understand the magic behind clickable phone numbers.

To make phone numbers clickable, we use the “tel” HTML link attribute like we use “mailto” for email links. This attribute functions as a direct link to initiate a phone call when clicked on from a mobile device.

By incorporating “tel” links into your website, you allow users to connect with you through a single tap seamlessly.

Benefits of Using Clickable Phone Numbers on WordPress Website

Using clickable phone numbers on a website can offer several benefits to both users and businesses.

Here are some advantages:

1. Improve User Experience using Clickable Phone Numbers

Clickable phone numbers make it easy for users to contact your business with a single tap, especially on mobile devices. This enhances user experience and reduces friction, as users don’t have to dial the number manually.

2. Phone Numbers Help to Increase Conversions

When users can quickly and conveniently contact your business, it can lead to higher conversion rates. Users are more likely to make inquiries, place orders, or ask for information when they can quickly initiate a call.

3. Clickable Mobile Numbers Help in Faster Communication

Click-to-call functionality streamlines the communication process, allowing users to connect with your business instantly. This can be particularly valuable for time-sensitive queries or urgent matters.

4. Local SEO Benefits of Phone Numbers

Search engines often recognize and prioritize clickable mobile numbers, especially when users search for local businesses. This can contribute to improved local search rankings and visibility.

5. User Preferences

Some users prefer to communicate over the phone rather than through other channels like email or chat. Clickable phone numbers accommodate different communication preferences.

6. Clickable Phone Numbers Reduce Errors

Manual entry of phone numbers can lead to errors, especially on small screens. Clickable phone numbers eliminate the risk of mistyped digits, ensuring accurate communication.

Incorporating clickable phone numbers on your website can significantly enhance user engagement, encourage communication, and potentially increase conversions and business growth.

Step-by-Step Guide: Making Phone Numbers Clickable in WordPress

Now, let’s get hands-on and walk through making phone numbers clickable on your WordPress website.

1. Access the WordPress Editor

Log in to your WordPress site dashboard and edit the page or post where you want to add the clickable phone number.

2. Add a Custom HTML Block

Now add a custom HTML Block if you are using WordPress Block Editor.

3. Add Your Phone Number

Now it’s time to add a clickable phone number link. Follow the below steps:

  • Write your phone number like +1 76 7676 8976.
  • Now format it as an HTML link; <a hrefs=”tel: +17676768976″> +1 76 7676 8976 </a>

4. Test and Verify

Save or update the page/post and view it on a mobile device to ensure the clickable phone number functions as intended.

Alternative Method to Make Clickable Phone Numbers

Here is a simple and easy method:

  • Write a text like “Call Us” or a naked Phone Number like +1 02 786 897 5674.
  • Now add a link as we typically link pages or post on a website.
  • In the link, add your phone number formatted like this; “tel: +1 02 786 897 5674”.
  • It will make the phone number clickable.

How to Effectively Use Clickable Phone Numbers

To maximize the impact of clickable phone numbers on your WordPress website, consider these best practices:

  1. Consistent Formatting: Maintain a consistent format for all phone numbers across your site, ensuring a seamless user experience.
  2. Spacing and Alignment: Properly space and align the clickable phone number within your content for visual clarity.
  3. Accessibility Considerations: Remember accessibility guidelines, ensuring that clickable phone numbers are compatible with screen readers for users with disabilities.
  4. Integration Across the Site: Strategically place clickable phone numbers in various sections of your website, such as contact pages, headers, footers, and service pages.

Advanced Techniques

For those looking to add an extra layer of style and functionality, consider these advanced techniques:

  1. CSS Styling: Apply CSS styles to your clickable phone numbers to make them visually appealing and consistent with your website’s design.
  2. Icons or Buttons: Enhance the visibility of clickable phone numbers by incorporating icons or call-to-action buttons alongside the phone number.
  3. Conditional Display: Implement code that displays clickable phone numbers based on the user’s device type, providing a tailored experience.


Implementing clickable phone numbers using the “tel” link attribute is a simple yet effective way to enhance user experience and engagement on your WordPress website. Following the step-by-step guide, you can seamlessly integrate this feature and create a more user-friendly environment for your audience.

Remember, the small details matter, and by making phone numbers clickable, you’re taking a significant step toward providing a smoother and more accessible user experience.