Jump to content


Photo

Add Phone Number To Header


  • Please log in to reply
No replies to this topic

#1 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 19 April 2016 - 04:07 PM

A common request I get is how to add a clickable phone number to the right of your site's header. I've written the code out a few different times and figured it'd be best to post a thread here we can all refer back to it when we need it.

 

 

The screenshot below is what we'll be making. I left it unstyled and simple, and you'll be able to style it any way you want with CSS.

 

 

Attached File  2016-04-19 at 5.05 PM.jpeg   28.27KB   0 downloads

 

Place this function in your child theme's functions.php file:

/**
 * Add phone # to header
 */

function md_phone_number( $items, $args ) {
	if ( $args->theme_location == 'header' )
		$items .= '
			<li class="menu-item header-number">'.
				'<a href="callto://15555551212">'.
					'<b>+1 (555) 555-1212</b>'.
				'</a>'.
			'</li>';

	return $items;
}
add_filter( 'wp_nav_menu_items', 'md_phone_number', 10, 2 );

If you have the header menu enabled, this will add a new menu item to the end of your nav menu items. You can change out the phone number and ensure it's clickable by filling out your phone number in the <a href=""></a> element.


- Alex
Check out the Kolakube blog or follow me on Twitter.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users