Title: Create a clickable "tel:" link
Last modified: August 20, 2016

---

# Create a clickable "tel:" link

 *  Resolved [Sdarter](https://wordpress.org/support/users/sdarter/)
 * (@sdarter)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/create-a-clickable-tel-link/)
 * I would like to have a telephone number field that will automatically create 
   a tel: link so it is clickable on mobile. Obviously I can have them type “tel:”
   before their number in the link field, but is there a way to just wrap that field
   somehow so it happens automatically?
 * [http://wordpress.org/extend/plugins/participants-database/](http://wordpress.org/extend/plugins/participants-database/)

Viewing 15 replies - 1 through 15 (of 17 total)

1 [2](https://wordpress.org/support/topic/create-a-clickable-tel-link/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/create-a-clickable-tel-link/page/2/?output_format=md)

 *  Plugin Author [xnau webdesign](https://wordpress.org/support/users/xnau/)
 * (@xnau)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/create-a-clickable-tel-link/#post-3521775)
 * 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.
 *  Thread Starter [Sdarter](https://wordpress.org/support/users/sdarter/)
 * (@sdarter)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/create-a-clickable-tel-link/#post-3521897)
 * 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.
 *  Thread Starter [Sdarter](https://wordpress.org/support/users/sdarter/)
 * (@sdarter)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/create-a-clickable-tel-link/#post-3521898)
 * Ooops – here’s the link: [http://thestudentloanlawyer.com/workshop-graduates-2/](http://thestudentloanlawyer.com/workshop-graduates-2/)
 *  Plugin Author [xnau webdesign](https://wordpress.org/support/users/xnau/)
 * (@xnau)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/create-a-clickable-tel-link/#post-3521922)
 * Dom’t use a link field. Use a plain text line and it will work.
 *  Thread Starter [Sdarter](https://wordpress.org/support/users/sdarter/)
 * (@sdarter)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/create-a-clickable-tel-link/#post-3521923)
 * 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.
 *  Plugin Author [xnau webdesign](https://wordpress.org/support/users/xnau/)
 * (@xnau)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/create-a-clickable-tel-link/#post-3521936)
 * 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.
 *  Thread Starter [Sdarter](https://wordpress.org/support/users/sdarter/)
 * (@sdarter)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/create-a-clickable-tel-link/#post-3521939)
 * 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!
 *  Plugin Author [xnau webdesign](https://wordpress.org/support/users/xnau/)
 * (@xnau)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/create-a-clickable-tel-link/#post-3521941)
 * Ah, I see. Good you figured that out!
 *  [vandeberg25](https://wordpress.org/support/users/vandeberg25/)
 * (@vandeberg25)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/create-a-clickable-tel-link/#post-3522012)
 * 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](http://indianaangus.com/wordpress/member-contact-details/?pdb=505) 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.]_
 *  Plugin Author [xnau webdesign](https://wordpress.org/support/users/xnau/)
 * (@xnau)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/create-a-clickable-tel-link/#post-3522013)
 * 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>
       ```
   
 *  [vandeberg25](https://wordpress.org/support/users/vandeberg25/)
 * (@vandeberg25)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/create-a-clickable-tel-link/#post-3522014)
 * 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](http://indianaangus.com/wordpress/member-contact-details/?pdb=510)
 * 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.
 *  Plugin Author [xnau webdesign](https://wordpress.org/support/users/xnau/)
 * (@xnau)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/create-a-clickable-tel-link/#post-3522015)
 * 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 ?>
       ```
   
 *  [vandeberg25](https://wordpress.org/support/users/vandeberg25/)
 * (@vandeberg25)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/create-a-clickable-tel-link/#post-3522016)
 * 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.](http://indianaangus.com/wordpress/member-contact-details/?pdb=510)
 * 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!!
 *  Plugin Author [xnau webdesign](https://wordpress.org/support/users/xnau/)
 * (@xnau)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/create-a-clickable-tel-link/#post-3522017)
 * Try this…
 * `<a href="tel:<?php echo $this->field->value ?>">`
 *  [vandeberg25](https://wordpress.org/support/users/vandeberg25/)
 * (@vandeberg25)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/create-a-clickable-tel-link/#post-3522018)
 * Sorry – that did not work. Other Suggestions?

Viewing 15 replies - 1 through 15 (of 17 total)

1 [2](https://wordpress.org/support/topic/create-a-clickable-tel-link/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/create-a-clickable-tel-link/page/2/?output_format=md)

The topic ‘Create a clickable "tel:" link’ is closed to new replies.

 * ![](https://ps.w.org/participants-database/assets/icon-256x256.jpg?rev=1389807)
 * [Participants Database](https://wordpress.org/plugins/participants-database/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/participants-database/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/participants-database/)
 * [Active Topics](https://wordpress.org/support/plugin/participants-database/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/participants-database/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/participants-database/reviews/)

 * 17 replies
 * 3 participants
 * Last reply from: [vandeberg25](https://wordpress.org/support/users/vandeberg25/)
 * Last activity: [12 years, 11 months ago](https://wordpress.org/support/topic/create-a-clickable-tel-link/page/2/#post-3522020)
 * Status: resolved