Add a clickable phone number
To make a phone number clickable in WordPress, link it to an address that starts with tel:, like tel:+16085550123, instead of https://. Tapping it on a phone starts a call. On a computer, it opens whatever calling app the visitor uses, such as FaceTime, Skype, or Teams.
How should the tel: link be written?
The link address is tel: followed by the full number, with the country code and no spaces:
| Number on the page | Link address |
|---|---|
| (608) 555-0123 | tel:+16085550123 |
| 020 7946 0123 (UK) | tel:+442079460123 |
The +1 is the country code for the US and Canada. Countries that start local numbers with a 0, like the UK, drop that 0 after the country code. With the country code, the link works for visitors calling from anywhere. The text visitors see can be formatted however you like; only the link address needs this format.
Link a number in text
- Open the page in the editor and type the phone number in a Paragraph (or any text block).
- Highlight the number.
- Click the link icon in the block toolbar, or press Ctrl+K (⌘K on a Mac).
- Type the link address, like
tel:+16085550123, and press Enter. - Click Update (or Publish).
Type tel: yourself. If you paste only the number, WordPress treats it as a web address and the link won't work.
Put a number on a button
- Add a Buttons block and type the label, like Call (608) 555-0123.
- Click the link icon on the button and enter the
tel:address. - Click Update.
A call button works well in a hero or a call-to-action section, where most phone visitors look for it.
Add a number to a menu
- Go to Appearance → Menus.
- Open Custom Links.
- Enter the
tel:address as the URL and the number as the Link Text. - Click Add to Menu, then Save Menu.
For a menu item styled as a button, see Add a header menu button.
How do I test a phone link?
Open the live page on your phone and tap the number. Your phone should offer to call it. On a computer, hover over the link: the address in the bottom corner of the browser should start with tel:.
The same trick works for email: a link to mailto:hello@example.com opens a new email.
If your site runs on Dirigible
Several Dirigible fields turn your number into a tap-to-call link automatically, so you don't need to build the link yourself:
- Footer phone number: the Phone you enter under Appearance → Customize → Footer & Contact → Contact Information shows in the footer as a clickable link. Type it the way you want it to look. See Set up the footer and contact info.
- Phone icon: a Phone number under Appearance → Customize → Settings → Social Media adds a phone icon beside your social icons that starts a call. Enter it in international format with no spaces, like
+16085550123. - Locations and People: phone numbers on location and staff pages and in their listings link automatically. See Add locations and a store locator map and Build a staff directory or team page.