How to Add Header Phone and Email in Themes where that Functionality is Missing by Default

Most of our themes comes with Customizer options to display Phone and Email in Header. But some themes comes without such functionality (i.e. tTourism theme). If you use such theme and you want to add header phone and/or email it will require a small code change. Here are all of the necessary steps:

1. Login to your Admin Panel

2. Navigate to Left Menu -> Appearance -> Customize -> ‘Additional CSS’ section and insert the following code:

#header-top #header-email,
#header-top #header-phone {
	display: inline-block;
}

#header-top #header-phone {
	margin-right:20px;
}

#header-top #header-phone:before {
	content: "\f095";
}

#header-top #header-email:before {
	content: "\f003";
}

#header-top #header-email:before,
#header-top #header-phone:before {
	font-family:'FontAwesome';
	margin-right:5px;
	color:#555555;
	font-size:15px;
}

@media screen and (min-width: 800px) {
      .phone-and-email {
		display:inline;
	}
}

@media screen and (max-width: 799px) {
      .phone-and-email {
	    clear: both;
	    text-align: left;
	    padding-top:10px;
	}
}

3. Save changes by clicking on ‘Publish’ button

4. Navigate to Left Menu -> Appearance -> Theme Editor

5. Open functions.php file for edit

6. Find the following code:

<div id="header-top">

and immediately below it insert the following code:

<div class="phone-and-email">
		<span id="header-phone">
			Your Phone
		</span>
        <span id="header-email">
        	<a href="mailto:info@example.com" title="info@example.com">info@example.com</a>
        </span>
    </div>

*Note: Replace ‘info@example.com’ and ‘Your Phone’ with preferred mail and phone number.

7. Save changes