WordPress.org

Ready to get started?Download WordPress

Forums

Participants Database
[resolved] Create a clickable "tel:" link (18 posts)

  1. Sdarter
    Member
    Posted 1 year ago #

    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/

  2. xnau
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  3. Sdarter
    Member
    Posted 1 year ago #

    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.

  4. Sdarter
    Member
    Posted 1 year ago #

  5. xnau
    Member
    Plugin Author

    Posted 1 year ago #

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

  6. Sdarter
    Member
    Posted 1 year ago #

    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.

  7. xnau
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  8. Sdarter
    Member
    Posted 1 year ago #

    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!

  9. xnau
    Member
    Plugin Author

    Posted 1 year ago #

    Ah, I see. Good you figured that out!

  10. vandeberg25
    Member
    Posted 10 months ago #

    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.]

  11. xnau
    Member
    Plugin Author

    Posted 10 months ago #

    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>
  12. vandeberg25
    Member
    Posted 10 months ago #

    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.

  13. xnau
    Member
    Plugin Author

    Posted 10 months ago #

    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 ?>
  14. vandeberg25
    Member
    Posted 10 months ago #

    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!!

  15. xnau
    Member
    Plugin Author

    Posted 10 months ago #

    Try this...

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

  16. vandeberg25
    Member
    Posted 10 months ago #

    Sorry - that did not work. Other Suggestions?

  17. xnau
    Member
    Plugin Author

    Posted 10 months ago #

    Sorry...syntax error...moving too fast! Put this between the <dd> tags:

    <?php if($this->field->name === 'phone1') : ?>
      <a href="tel:<?php echo $this->field->value ?>">
        <?php $this->field->print_value() ?>
      </a>
    <?php elseif ($this->field->name === 'phone2') : ?>
      <a href="tel:<?php echo $this->field->value ?>">
        <?php $this->field->print_value() ?>
      </a>
    <?php else : $this->field->print_value() ?>
    <?php endif; ?>
  18. vandeberg25
    Member
    Posted 10 months ago #

    That did it! Great - Thank you so much for your help!!!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic