Support

Account

Home Forums Backend Issues (wp-admin) Phone field with href="tel:" link

Solving

Phone field with href="tel:" link

  • 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>
    
    • amos

    • August 14, 2019 at 9:14 am

    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.

    • amos

    • August 14, 2019 at 9:49 pm

    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;
    }
    
    • Brevalo

    • September 6, 2020 at 8:47 am

    Hello,

    So which of these codes work?

    Thank you.

    • Brevalo

    • September 6, 2020 at 10:48 pm

    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.

    • Brevalo

    • September 7, 2020 at 2:25 am

    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.


    screen-2
    screen-3

    P.S. I applied it with Elementor Pro.

    • Brevalo

    • September 7, 2020 at 2:38 am

    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.

    screen-1
    screen-2
    screen-3
    screen-4
    screen-5

    P.S. I applied it with Elementor Pro.

  • This reply has been marked as private.
    • Brevalo

    • November 20, 2020 at 6:08 am

    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);
      });
    • Brevalo

    • November 23, 2020 at 2:42 pm

    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)

Viewing 17 posts - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.