When building dynamic templates, you may want to display a clickable phone number or email on the front end using data from a custom field. This is especially useful for people-based post types or directories. In this article, I’ll show you how to retrieve the phone or email from a custom field and make it clickable.
Step 1: Insert the Button (or other) Element
The Button element is ideal for displaying a clickable link, but you can also use other elements like Headings, List Items, Icon Boxes, or Social Links as they work the same way.
After adding your element, you can update the text to display the custom field as your text like such:
For elements that don’t support selecting a text source, you can use a dynamic variable like this:
Step 2: Select Your Custom Field as a Link
Next, go to the Link tab to set your custom field as the link. The theme will automatically detect if it is a phone number or email and add the correct prefix, tel: for phone numbers and mailto: for emails.
If you are using a version of Total older than 6.4 you wouldn’t be able to select a standard text or email link as the URL so you would need to add the name of your custom field manually. It’s recommended to update to the latest version though!
Step 3: Customize the Element Design
When using the button element, you might want it to look like a regular link instead of a button. You can easily adjust the design in the style settings like this:
You might also want to add an icon next to the phone number to make it clear what it represents:
If you want to add text like “Call us at:”, go back to the General tab and use a dynamic variable. This lets you combine custom text with the custom field, like this:
