Create a clickable "tel:" link

Sdarter,

This should be pretty simple, you don’t tell me where this clickable telephone number is to be shown, so I can’t get too specific about where you need to put your modification.

You’ll need to create a template for the shortcode, there’s a brief explanation of how to do that in the “other notes” section here.

In that template, after the line that has “$this->the_field()” in it, put something like this:

<?php if ($this->field->name == 'telephone' ) $this->field->value = 'tel:' . $this->field->value ?>

All that does is tack “tel:” on to the beginning of the number. You can do something a lot more elaborate if you want. Be careful of the “<?php ?>” tags around that…if it’s already inside php tags, you won’t need them for the code you’re adding.

Thanks – I think I’m almost there, but something isn’t right. This is going to display on the single page, so I added the code to the single template (and added the template in a subdirectory of the theme folder). Then I created a field called telephone, made it a link field, and put in the number in both fields. In theory, the first field should be the link, the second the display number, right?

Only I nothing shows up. I just get blanks beside the telephone label. If I make it a text field, then it prepends the tel: and shows the number, but doesn’t make it a link. Obviously I need to tweak the php, but I haven’t been able to do so successfully yet. Here’s the entire text of the single template:

// define an array of fields to exclude here
$exclude = array();

?>

<div class="wrap <?php echo $this->wrap_class ?>">

  <?php while ( $this->have_groups() ) : $this->the_group(); ?>

  <div class="section" id="<?php echo Participants_Db::$css_prefix.$this->group->name ?>">

    <?php $this->group->print_title( '<h2>', '</h2>' ) ?>

    <?php $this->group->print_description( '<p>', '</p>' ) ?>

      <?php while ( $this->have_fields() ) : $this->the_field();  

          // skip any field found in the exclude array
          if ( in_array( $this->field->name, $exclude ) ) continue;

          // CSS class for empty fields
					$empty_class = $this->get_empty_class( $this->field );

      ?>

      <?php if ($this->field->name === 'telephone' ) $this->field->value = 'tel:' . $this->field->value ?>

    <dl class="<?php echo Participants_Db::$css_prefix.$this->field->name.' '.$this->field->form_element.' '.$empty_class?>">

      <dt class="<?php echo $this->field->name.' '.$empty_class?>"><?php $this->field->print_label() ?></dt>

      <dd class="<?php echo $this->field->name.' '.$empty_class?>"><?php $this->field->print_value() ?></dd>

    </dl>

    	<?php endwhile; // end of the fields loop ?>

  </div>

  <?php endwhile; // end of the groups loop ?>

</div>

Thanks for taking the time to help me with this. Here is the list – click through to the single page to see where my problem is.

Ooops – here’s the link: https://thestudentloanlawyer.com/workshop-graduates-2/

Dom’t use a link field. Use a plain text line and it will work.

I tried that too (see same link). Maybe I’m not clear on what I want? I need the end result to be a clickable link so when people view it on mobile it will call the phone number.

I think I understand what you want… You should use a plain text-line form element, however if the data was saved into the field while it was a link field, it won’t work properly until the data is resaved as a text line…a link field saves it’s data in a different format, that’s why the code I suggested won’t work with it. Changing the field to a different element doesn’t change the data that was saved before, so your telephone fields will need to be saved again so they are just plain text.

That still didn’t do it, but I finally got it with this:

<?php if($this->field->name === 'telephone') : ?>
                                 <a href="tel:<?php echo $this->field->print_value() ?>">
                            	<?php echo $this->field->print_value() ?>
                            </a>
                        <?php else : ?>
                            <?php $this->field->print_value() ?>
                        <?php endif; ?>

Thanks so much!

Ah, I see. Good you figured that out!

I would like to do the same thing – make the telephone number clickable on mobile devices. I used the code above – with a couple changes because it was displaying each field data twice. (I also have 2 phone fields). Now it is displaying the phone numbers clickable like I want, but above the field header. Here is the link to view my data.

It is also listing the phone number data again without the link in the correct place. Can you help me get this PHP code correct?

<?php while ( $this->have_fields() ) : $this->the_field();

          // skip any field found in the exclude array
          if ( in_array( $this->field->name, $exclude ) ) continue;

          // CSS class for empty fields
					$empty_class = $this->get_empty_class( $this->field );

      ?><?php if($this->field->name === 'phone1') : ?>
                                 <a href="tel:<?php echo $this->field->print_value() ?>">
                            	<?php echo $this->field->print_value() ?>
                            </a>
                        <?php else : ?>

                        <?php endif; ?>
                        <?php if($this->field->name === 'phone2') : ?>
                                 <a href="tel:<?php echo $this->field->print_value() ?>">
                            	<?php echo $this->field->print_value() ?>
                            </a>
                        <?php else : ?>

                        <?php endif; ?>

      <dl class="<?php echo Participants_Db::$css_prefix.$this->field->name.' '.$this->field->form_element.' '.$empty_class?>">

      <dt class="<?php echo $this->field->name.' '.$empty_class?>"><?php $this->field->print_label() ?></dt>

                        <dd class="<?php echo $this->field->name.' '.$empty_class?>"><?php $this->field->print_value() ?></dd>

    </dl>

    	<?php endwhile; // end of the fields loop ?>

  </div>

  <?php endwhile; // end of the groups loop ?>

[Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]

The method $this->field->print_value() actually prints the value, so it does not need an “echo”. For example:

<a href="tel:<?php $this->field->print_value() ?>">
<?php $this->field->print_value() ?>
</a>

I changed the code to match your suggestion and it is still displaying the phone numbers twice; once before the field header – with the a href link active and a second time after the field header.

See an example here

Here is a big chunk of the code to review

<?php while ( $this->have_fields() ) : $this->the_field();

          // skip any field found in the exclude array
          if ( in_array( $this->field->name, $exclude ) ) continue;

          // CSS class for empty fields
					$empty_class = $this->get_empty_class( $this->field );

      ?>
	  <?php if($this->field->name === 'phone1') : ?>
                                 <a href="tel:<?php $this->field->print_value() ?>">
<?php $this->field->print_value() ?>
</a>
                        <?php else : ?>

                        <?php endif; ?>

                        <?php if($this->field->name === 'phone2') : ?>
                                <a href="tel:<?php $this->field->print_value() ?>">
<?php $this->field->print_value() ?>
</a>
                        <?php else : ?>

                        <?php endif; ?>

      <dl class="<?php echo Participants_Db::$css_prefix.$this->field->name.' '.$this->field->form_element.' '.$empty_class?>">

      <dt class="<?php echo $this->field->name.' '.$empty_class?>"><?php $this->field->print_label() ?></dt>

                        <dd class="<?php echo $this->field->name.' '.$empty_class?>"><?php $this->field->print_value() ?></dd>

    </dl>

    	<?php endwhile; // end of the fields loop ?>

Any other suggestions? I may decide to bale on trying to add this feature this wasy as the WPtouch plugin will render the phone numbers to do this.

Sorry, I just saw the one error…you needed to do your replacement inside the “DD” tag, like this. (I also changed the IF ELSE code to be more complact)

<?php while ( $this->have_fields() ) : $this->the_field();

          // skip any field found in the exclude array
          if ( in_array( $this->field->name, $exclude ) ) continue;

          // CSS class for empty fields
					$empty_class = $this->get_empty_class( $this->field );

      ?>

      <dl class="<?php echo Participants_Db::$css_prefix.$this->field->name.' '.$this->field->form_element.' '.$empty_class?>">

      <dt class="<?php echo $this->field->name.' '.$empty_class?>"><?php $this->field->print_label() ?></dt>

      <dd class="<?php echo $this->field->name.' '.$empty_class?>">

      <?php if($this->field->name === 'phone1') : ?>
               <a href="tel:<?php $this->field->print_value() ?>">
<?php $this->field->print_value() ?>
</a>
      <?php elseif ($this->field->name === 'phone2') : ?>
              <a href="tel:<?php $this->field->print_value() ?>">
<?php $this->field->print_value() ?>

						<?php else $this->field->print_value() ?>

      <?php endif; ?>

      </dd>

    </dl>

    	<?php endwhile; // end of the fields loop ?>

We are getting closer! It is displaying the phone number with the link and in the correct place; but it is still displaying the phone number 2 times. Once without the link and once with.

Here is a sample.

I have used the code exactly as you posted above, only adding the closing tag at the end of the the second a href…

Any other suggestions? I do not know PHP well enough to figure this one out. Thank you for your time and assistance!!

Try this…

<a href="tel:<?php echo $this->field->value ?>">

Sorry – that did not work. Other Suggestions?