0

Here is the widget function from a widget I created. For the phone number, I don't understand why it is making it into a hyperlink on desktop sites, using the value of the if before ($gplus) for the hyperlink. Please can someone explain?

class phone_social extends WP_Widget {

    function phone_social() {
        parent::WP_Widget(false, $name = __('Phone and social widget', 'phone_social') );
    }

    function form($instance) {
        if( $instance) {
            //$title = esc_attr($instance['title']);
            $email = esc_attr($instance['email']);
            $facebook = esc_attr($instance['facebook']);
            $twitter = esc_attr($instance['twitter']);
            $gplus = esc_attr($instance['gplus']);
            $telephone = esc_attr($instance['telephone']);
        } 
        else {
            $email = '';
            $facebook = '';
            $twitter = '';
            $gplus = '';
            $telephone = '';
        }
?>

    <p>
        <label for="<?php echo $this->get_field_id('email'); ?>"><?php _e('Email:', 'wp_widget_plugin'); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id('email'); ?>" name="<?php echo $this->get_field_name('email'); ?>" type="text" value="<?php echo $email; ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('facebook'); ?>"><?php _e('Facebook URL:', 'wp_widget_plugin'); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id('facebook'); ?>" name="<?php echo $this->get_field_name('facebook'); ?>" type="text" value="<?php if(empty($facebook)) { echo "http://";} else { echo $facebook; } ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('twitter'); ?>"><?php _e('Twitter URL:', 'wp_widget_plugin'); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id('twitter'); ?>" name="<?php echo $this->get_field_name('twitter'); ?>" type="text" value="<?php if(empty($twitter)) { echo "http://";} else { echo $twitter; } ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('gplus'); ?>"><?php _e('Google Plus URL:', 'wp_widget_plugin'); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id('gplus'); ?>" name="<?php echo $this->get_field_name('gplus'); ?>" type="text" value="<?php if(empty($gplus)) { echo "http://";} else { echo $gplus; } ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('telephone'); ?>"><?php _e('Telephone ', 'wp_widget_plugin'); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id('telephone'); ?>" name="<?php echo $this->get_field_name('telephone'); ?>" type="text" value="<?php echo $telephone; ?>" />
    </p>
<?php 
    } // end 'form' function

    function update($new_instance, $old_instance) {
        $instance = $old_instance;
        // $instance['title'] = strip_tags($new_instance['title']);
        $instance['email'] = strip_tags($new_instance['email']);
        $instance['facebook'] = strip_tags($new_instance['facebook']);
        $instance['twitter'] = strip_tags($new_instance['twitter']);
        $instance['gplus'] = strip_tags($new_instance['gplus']);
        $instance['telephone'] = strip_tags($new_instance['telephone']);

        return $instance;
    }

    function widget($args, $instance) { 
        extract( $args );
        $telephone = $instance['telephone'];
        $email = $instance['email'];
        $facebook = $instance['facebook'];
        $twitter = $instance['twitter'];
        $gplus = $instance['gplus'];

        echo $before_widget;
        echo '<div class="widget-text wp_widget_plugin_box" style:>';


        if( $email ) {  
            echo '<a href="mailto:' . antispambot($email) .'" target=""><img src="'. get_stylesheet_directory_uri() .'/images/email.png" height="24" width="24" alt="email">';  
        } 

        if ( $facebook ) { 
            echo  '<a href="'.$facebook.'" target="_blank"><img src="'. get_stylesheet_directory_uri() .'/images/fb.png" height="24" width="24" alt="facebook">';  
        }

        if ( $twitter ) { 
            echo  '<a href="'.$twitter.'" target="_blank"><img src="'. get_stylesheet_directory_uri ().'/images/twitter.png" height="24" width="24" alt="Twitter">';  
        } 

        if ( $gplus ) { 
            echo  '<a href="'.$gplus.'" target="_blank"><img src="'. get_stylesheet_directory_uri() .'/images/googleplus.png" height="24" width="24" alt="gplus">';  
        } 

        //If you add an ID to your link inside the wp_is_mobile() conditional, do you see that same ID on the front end?
        if( $telephone ) {
            if ( wp_is_mobile() ) { 
                echo  "<a href='tel:$telephone' id='T_E_S_T'>$telephone </a><br />";
                //tel:$telephone
            }
            else { 
                echo '
                    <div class="widget-textphone">' . $telephone . ' </div> '; 
            }
        } 

        echo '</div>';
        echo $after_widget;
    }
}   
add_action('widgets_init', create_function('', 'return register_widget("phone_social");'));
  • If you add an ID to your link inside the wp_is_mobile() conditional, do you see that same ID on the front end? – Howdy_McGee Aug 14 '14 at 21:09
  • @Howdy_McGee How should I add the ID, please? – mattnewbie Aug 14 '14 at 21:17
  • echo "<a href='tel:$telephone' id='T_E_S_T'>$telephone </a><br />"; <-- like this. – Howdy_McGee Aug 14 '14 at 21:19
  • @Howdy_McGee No the ID isn't displayed on the front end – mattnewbie Aug 14 '14 at 21:22
  • Then the code shown above isn't the cause of your phone number having a link, it's happening somewhere else that we do not know about. What happens when you view it on mobile? – Howdy_McGee Aug 14 '14 at 21:23
1

I think I see the problem now. None of your links have a closing anchor tag which is cascading down until it hits the end at which point you close it on phone number:

Your Code:

echo  '<a href="'.$facebook.'" target="_blank"><img src="'. get_stylesheet_directory_uri() .'/images/fb.png" height="24" width="24" alt="facebook">';

What it should probably look like:

echo  '<a href="'.$facebook.'" target="_blank"><img src="'. get_stylesheet_directory_uri() .'/images/fb.png" height="24" width="24" alt="facebook"></a>';

So after you link your images in your callback function you need to close your anchor tags.

  • Thank you so much. That seems to be it. I just need to figure out why it's showing img src="http://mydomain.co.uk/wp-content/themes/testthis/images/email.png" height="24" width="24" alt="email"> in the browser now. This is my 1st WP website. I can't thank-you enough!! – mattnewbie Aug 14 '14 at 21:43
  • 1
    No problem, classic mistake that happens to everybody now and then ^_^ good luck! – Howdy_McGee Aug 14 '14 at 21:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.