Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #217258

    Help! So i know enfold offers the option to put your phone number above the header, but I want to actually put a larger number in the header itself. I have already done this, but for some reason mobile phones will not recognize the phone number as a clickable link. Here is the code:

    $phone = avia_get_option('phone');
                                $phone_class = !empty($nav) ? "with_nav" : "";
                                if($phone) echo "<div class='phone-info {$phone_class}'><span>{$phone}</span></div>";
    
                                /* <div class="phone2">503-436-5584</div>
                                *  Hook that can be used for plugins and theme extensions (currently:  the woocommerce shopping cart)
                                */
                                do_action('avia_meta_header');
                            echo '</nav>';
                        ?>
                      </div>
                </div>
    
                <?php } ?>
    
                <div  id='header_main' class='container_wrap container_wrap_logo'>
                   <div class='phone2'><a href="tel:503-436-5582">503-436-5582</a></div>
                       </a></strong><img class='cards' src='http://garagedoorsrepairwestlinn.com/wp-content/uploads/2014/01/crdit-card-logo.jpg' /></div>   
                        <?php
                        /*
                        * Hook that can be used for plugins and theme extensions (currently:  the woocommerce shopping cart)
                        */
                        do_action('ava_main_header');
    
                        ?>
    

    what am i doing wrong? when i add the second </div> it shows up as a link on the computer but it completely takes the logo and number off.

    #217304

    Hey zebraz!

    As far as I know you have it correct. This is the example I always link to and has always worked: https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/PhoneLinks/PhoneLinks.html#//apple_ref/doc/uid/TP40007899-CH6-SW1

    You could try posting on Stack Exchange or checking if its a specific device issue that doesn’t support it.

    Cheers!
    Devin

    #217697

    thanks, but that basically gave me information i already knew lol. It may be that it’s just apple but since i’m using the code they want, i don’t see why iphones wouldn’t be able to read it. I know that weather-tight.com got it to work for them, but reading through their page source i can’t figure out what i’m doing different other than having no div class. They had asked this question previously but the comments are closed, is there a way to look at that reply and see what they did?

    #217721

    Hi!

    Please edit header.php, find this code on line 14:

    <meta charset="<?php bloginfo( 'charset' ); ?>" />

    Below, add this code:

    <meta name="format-detection" content="telephone=yes">

    Best regards,
    Ismael

    #219068

    Thanks for the response Ismael, but it’s still not working >_<. Here is the entire code for the header.php file, with the code you mentioned added:

    <?php
    	global $avia_config;
    
    	$style 		= $avia_config['box_class'];
    	$responsive	= avia_get_option('responsive_layout','responsive');
    	$blank 		= isset($avia_config['template']) ? $avia_config['template'] : "";
    	$headerS	= !$blank ? avia_header_setting() : "";
    	$headerMenu = $responsive ? avia_get_option('header_menu','mobile_drop_down') : "";
    
    ?>
    <!DOCTYPE html>
    <html <?php language_attributes(); ?> class="<?php echo " html_$style ".$responsive." ".$headerS;?> ">
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="format-detection" content="telephone=yes">
    <title><?php if(function_exists('avia_set_title_tag')) { echo avia_set_title_tag(); } ?></title>
    <!-- page title, displayed in your browser bar -->
    
    <?php
    
    	/*
    	 * outputs a rel=follow or nofollow tag to circumvent google duplicate content for archives
    	 * located in framework/php/function-set-avia-frontend.php
    	 */
    	 if (function_exists('avia_set_follow')) { echo avia_set_follow(); }
    
    	 /*
    	 * outputs a favicon if defined
    	 */
    	 if (function_exists('avia_favicon'))    { echo avia_favicon(avia_get_option('favicon')); }
    
    ?>
    
    <!-- add feeds, pingback and stuff-->
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="alternate" type="application/rss+xml" title="<?php echo get_bloginfo('name'); ?> RSS2 Feed" href="<?php avia_option('feedburner',get_bloginfo('rss2_url')); ?>" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    
    <!-- mobile setting -->
    <?php
    
    if( strpos($responsive, 'responsive') !== false ) echo '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">';
    
    ?>
    
    <?php
    
    	/* Always have wp_head() just before the closing </head>
    	 * tag of your theme, or you will break many plugins, which
    	 * generally use this hook to add elements to <head> such
    	 * as styles, scripts, and meta tags.
    	 */
    
    	wp_head();
    ?>
    
    </head>
    
    <body id="top" <?php body_class($style." ".$avia_config['font_stack']." ".$blank); avia_markup_helper(array('context' => 'body')); ?>>
    
    	<div id='wrap_all'>
    
    		<?php if(!$blank){ ?>
    
            <header id='header' class=' header_color <?php avia_is_dark_bg('header_color'); echo " ".$headerMenu; ?>' <?php avia_markup_helper(array('context' => 'header','post_type'=>'forum'));?>>
    
                <?php
                
                if($responsive && $headerMenu == 'mobile_slide_out')
                {
                	echo '<a id="advanced_menu_toggle" href="#" '.av_icon_string('mobile_menu').'></a>';
    	    		echo '<a id="advanced_menu_hide" href="#" 	'.av_icon_string('close').'></a>';
                }
                
    
                $social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');
    
                //subheader, only display when the user chooses a social header
                if(strpos($headerS,'social_header') !== false)
                {
                ?>
                <div id='header_meta' class='container_wrap container_wrap_meta'>
    
                      <div class='container'>
                      <?php
                            /*
                            *	display the themes social media icons, defined in the wordpress backend
                            *   the avia_social_media_icons function is located in includes/helper-social-media-php
                            */
    
                            if(strpos($headerS,'bottom_nav_header') === false) avia_social_media_icons($social_args);
    
                            //display the small submenu
                            echo "<nav class='sub_menu' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
                                $avia_theme_location = 'avia2';
                                $avia_menu_class = $avia_theme_location . '-menu';
                                $args = array(
                                    'theme_location'=>$avia_theme_location,
                                    'menu_id' =>$avia_menu_class,
                                    'container_class' =>$avia_menu_class,
                                    'fallback_cb' => '',
                                    'container'=>'',
                                    'echo' =>false
                                );
    
                                $nav  = wp_nav_menu($args);
                                echo $nav;
    
                                $phone = avia_get_option('phone');
                                $phone_class = !empty($nav) ? "with_nav" : "";
                                if($phone) echo "<div class='phone-info {$phone_class}'><span>{$phone}</span></div>";
    
                                /* <div class="phone2">503-436-5576</div>
                                *  Hook that can be used for plugins and theme extensions (currently:  the woocommerce shopping cart)
                                */
                                do_action('avia_meta_header');
                            echo '</nav>';
                        ?>
                      </div>
                </div>
    
                <?php } ?>
    
                <div  id='header_main' class='container_wrap container_wrap_logo'>
                      <div class='phone2'><a href="tel:15034365576">Contact Us:(503)436-5576</div></a>
                      </a></strong><img class='cards' src='http://garagedoorsrepairwestlinn.com/wp-content/uploads/2014/01/crdit-card-logo.jpg' />   
                        <?php
                        /*
                        * Hook that can be used for plugins and theme extensions (currently:  the woocommerce shopping cart)
                        */
                        do_action('ava_main_header');
    
                        ?>
    
                        <div class='container'>
    
                            <?php
                            /*
                            *	display the theme logo by checking if the default logo was overwritten in the backend.
                            *   the function is located at framework/php/function-set-avia-frontend-functions.php in case you need to edit the output
                            */
                            echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png', false, 'strong');
    
                                if(strpos($headerS,'social_header') !== false && strpos($headerS,'bottom_nav_header') !== false) avia_social_media_icons($social_args);
    
                            /*
                            *	display the main navigation menu
                            *   modify the output in your wordpress admin backend at appearance->menus
                            */
                                $extraOpen = $extraClose = "";
                                if(strpos($headerS,'bottom_nav_header') !== false){ $extraClose = "</div></div><div id='header_main_alternate' class='container_wrap'><div class='container'>";  }
    
                                echo $extraClose;
    
                                echo "<nav class='main_menu' data-selectname='".__('Select a page','avia_framework')."' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
                                    $avia_theme_location = 'avia';
                                    $avia_menu_class = $avia_theme_location . '-menu';
                                    $args = array(
                                        'theme_location'	=> $avia_theme_location,
                                        'menu_id' 			=> $avia_menu_class,
                                        'container_class'	=> $avia_menu_class,
                                        'fallback_cb' 		=> 'avia_fallback_menu',
                                        'walker' 			=> new avia_responsive_mega_menu()
                                    );
    
                                    wp_nav_menu($args);
                                echo '</nav>';
    
                                /*
                                * Hook that can be used for plugins and theme extensions
                                */
                                do_action('ava_after_main_menu');
                            ?>
                        <!-- end container-->
                        </div>
    
                <!-- end container_wrap-->
                </div>
    
                <div class='header_bg'></div>
    
            <!-- end header -->
            </header>
    
    	<?php } //end blank check ?>
    	<div id='main'>
    
    

    and for custom css:

    #top .social_bookmarks { display: none; }
    #header_meta { display: none; }
    
    #header_main .container, .main_menu ul:first-child > li > a {
    height: 131px !important;
    line-height: 131px !important;
    }
    
    #header_main_alternate .container, .main_menu ul:first-child > li > a {
    color: green !important;
    height: 40px !important;
    line-height: 40px !important;
    }
    
    #top .main_menu .menu>li:last-child>a {
    padding-right: 10px;
    }
    
    .phone2 {
    color: black;
    font-size: 25px;
    padding: 4px;
    position: absolute;
    right: 80px;
    top: 99px;
    }
    
    .cards {
    position: absolute;
    right: 80px;
    top: 50px;
    }

    I feel like I’ve done everything exactly as suggested.. and it’s still not working.

    #219115

    I just noticed you have the phone number div inside a comment. This: /* starts a comment and this ends it */ . Anything inside of that does not get read as code.

    So change it to:

    <div class="phone2">503-436-5576</div>
    /*
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.