Hi y’all,
I need to make a phone field but I need it to be linked to itself. I mean
<a href="tel:{phone-number}"> {phone-number}</a>
I get that there are two fields for “before” and “after” where i can put the <a> and </a> tags, but how can i call the field’s value inside one of it?
Of course, I am using the number type field. Is there a way to do it with url type?
The before and after are only for display of the field in the admin.
You need to do this work yourself in the template file
$phone = get_field('phone-number');
<a href="tel:<?php echo $phone; ?>"><?php echo $phone; ?></a>
hi @hube2 🙂
Where should I put the code? Or what file should I edit?
I want to put the command in all the posts on my site.
BTW, I learn a lot from you here, thank you!
The code goes wherever you’re getting and showing the ACF field in your templates.
Ok, weird, didn’t work for me, I’ll try again 🙂
tnx again!
I created 2 text fields. One called Telephone and one called Telephone URL. I kept the Telephone URL a text field and not a URL field. I enter the telephone number in the first field and then the second I entered tel:01234567890. I use Elementor page editor so it was easy enough to select the ACF Telephone Field for a telephone number and the ACF Telephone URL field for the link. Elementor used the text and made a link of it. No coding required. Maybe if you have a page editor program you could use this method too.
Sorry to bring back an old thread, but is there a way to do this using the acf/update_value filter?
Meaning, what code would fire:
$phone = get_field('phone-number');
<a href="tel:<?php echo $phone; ?>"><?php echo $phone; ?></a>
on all pages, so everywhere the phone-number value appears it is replaced with the linked version?
Thanks.
Use a format value filter
2 fields
add_filter('acf/format_value/name=phone_field', 'convert_phone_to_link', 20, 3);
function convert_phone_to_link ($value, $post_id, $field) {
if (!$value) {
// no value
return $value;
}
// get the tel link field
$tel_link = get_field('tel_link_field')
if (!$tel_link) {
// no link
return $value;
}
$value = '<a href="tel:'.$tel_link.'">'.$value.'</a>';
return $value;
}
1 field
add_filter('acf/format_value/name=phone_field', 'convert_phone_to_link', 20, 3);
function convert_phone_to_link ($value, $post_id, $field) {
if (!$value) {
// no value
return $value;
}
// assumes US number
$tel_link= '+1'.preg_repace('/[^0-9]/', '', $value);
$value = '<a href="tel:'.$tel_link.'">'.$value.'</a>';
return $value;
}
Hello,
So which of these codes work?
Thank you.
John Huebner
Which field is tel_link_field ?
There is not a specific telephone link field in ACF, you need to use a text field and then format the value accordingly.
John Huebner
I’ve done with your way but still not working.
It it very important for me. So I will post screens how I’ve done it and please check if it is correct.
Thank you very much in advance.
P.S. I applied it with Elementor Pro.
John Huebner
I’ve done it the way you said but still did not work.
It is very important and critical for me. So, I will post chronological screen how I did it and I would be grateful if you check if it is correct.
Thank you very much in advance.
P.S. I applied it with Elementor Pro.
This reply has been marked as private.
webicient
I cannot see your reply because it is marked as private….
Sorry here it is 🙂
$(#phone-button a").attr("href", function ( index, currentvalue) {
var url_format = currentvalue.replace(/(^\w+:|^)\/\//, "");
$(this).attr("href", "tel:" + url_format);
});
webicient
Hello, I’ve added your code like this:
add_filter('acf/format_value/name=ტელეფონის_ნომერი', 'convert_phone_to_link', 20, 3);
function convert_phone_to_link ($value, $post_id, $field) {
if (!$value) {
// no value
return $value;
}
// get the tel link field
$tel_link = get_field('-phone-number');
if (!$tel_link) {
// no link
return $value;
}
$value = '<a href="tel:'.$tel_link.'">'.$value.'</a>';
return $value;
}
$(#phone-button a").attr("href", function ( index, currentvalue) {
var url_format = currentvalue.replace(/(^\w+:|^)\/\//, "");
$(this).attr("href", "tel:" + url_format);
});
But it shows me a fatal error in the first line of your code.
Here: $(#phone-button a”).attr(“href”, function ( index, currentvalue)
Hi everyone, thanks for the tip but I found that if you just use the bottom portion of the script it works just as well. In elementor I gave all of my ACF phone buttons a css class of phoneButton (I have multiple acf phone buttons so an ID wouldn’t work for me) and then in Elementor Custom Code I added the script below and applied it to the whole site and it worked (you can also add it to your footer.php). What is the reason for the add_filter? that did nothing for me and I removed it from my functions.php page and my ACF phone buttons still work.
<script>
(function($){
$(“.phoneButton a”).attr(“href”, function ( index, currentvalue) {
var url_format = currentvalue.replace(/(^\w+:|^)\/\//, “”);
$(this).attr(“href”, “tel:” + url_format);
});
})(jQuery);
<script>
Hello,
Thank you for your help.
I have multivendor marketplace website. When the vendor wants to place his product in Add Product Section he writes down his phone number. The phone number field is ACF field which is joined to Elementor.
You said that you gave all of my ACF phone buttons a css class of phoneButton. And how to do this?
Do you mean ACF field name under css class?
[email protected]
I added your script in Elementor Custon Code section but error occurred in the last line:
Then I tried to add slash in the last line like this: </script> but still didn’t helped:
Hi @brevalo, in Elementor, for the button select Advance and give the button a CSS name like phoneButton. That’s what I did for all the phone buttons on my page. Then I added the script above to Elementor / Custom Code and applied it every page.
What error are you getting? Be careful with the quotes within the code when you copy and paste. Sometimes they get screwed up and can cause an error. You should retype the quotes within the function just to make sure. Here is my code again that is working for me.
<script>
(function($){
$(“.phoneButton a”).attr(“href”, function ( index, currentvalue) {
var url_format = currentvalue.replace(/(^\w+:|^)\/\//, “”);
$(this).attr(“href”, “tel:” + url_format);
});
})(jQuery);
</script>
Hello, @rmooreadrearubin-com
If this ( [email protected] ) is your working e-mail I sent you e-mail. Please check your inbox.
Thank you so much.
P.S. This case is very critical for me and I would be so grateful if you’ll help me to solve it.
Hello @brevalo, I just saw your email, I am not an expert so I would not be comfortable touching your site. Please post your error message here so that we can all see what the issue may be.
I am trying to accomplish the same thing and this works for me:
add_filter(‘acf/format_value/name=phone_provider’, ‘convert_phone_to_link’, 20, 3);
function convert_phone_to_link ($value, $post_id, $field) {
if (!$value) {
// no value
return $value;
}
$tel_link= ‘+1’.preg_replace(‘/[^0-9]/’, ”, $value);
$value = ‘tel:’.$tel_link;
return $value;
}
However, this causes the other button on the page, with a “mailto:” link to also show the phone popup. So clicking only on the phone button it works. However if you click on the button with the mailto: link which is supposed to only open your email program, it also shows the phone popup. Any idea why that would conflict?
(Note: I am using elementor. I also tried the javascript adding the class name to my button, but that did nothing at all).
.
