How to add one click phone number and email to top headeer?


I want to add Phone number and Email to my to my top header left area.  Like this:

1. When i click phone number, it will open my skype software.
2. When i click email, it will open my email software.

Thank you 


  • Hi, @woolars

    WBR: Header Widget has no such functionality. Still, it could be achieved but after that Top header left area remains dedicated for your requirements(static contact number & email), means whenever need to change the contact number or email address you manually need to edit in a file. It would look like as in the screenshot:

    If you agree, I will share the custom code for the same.

  • Hello Imraz, 

    Thank you so much for your kind reply.  But i really want that function to start my skype and email automatically. 
    Is there any other ways can i realize this function?

    For example, aditional code? or aditional plugin?

    Thank you so much.

  • Please ignore my previous reply. Yes, BusiProf's "WBR: Header Widget" is enabled to show contacts with links. Use the widget two times one for email and another for your skype, & put respective links in a specific pattern like as in the screenshot:

    Put a link for email like this mailto:[email protected]
    & for skype like this callto://+***********

    Replace the red color text with your own

    Let me know did it work!
  • Hi Imraz, 

    Thank you so much, you do help me a big time. 
    1. Here i have a new problem, phone number locate under the Email, how can i put phone after email? (line them up at the top left)
    2. When i put my mouse on phone number or email, i want them turn color to yellow. Thanks for your help.

    Thank you

  • Copy and paste the below CSS in your theme's custom CSS box:

    /*widget: Header  info widget*/
    .top-header-widget .busiprof_header_info_widget{
    display: inline-flex;
    .top-header-widget .busiprof_header_info_widget:hover{
    /*widget: Header  info widget*/

    Let me know did it work!
  • Dear imrazimraz

    Thank you for your reply.    

    1. However, the email and phone number is not show in line. Phone number still located under email. (what i want is show as attachment)
    2. The background color i want it to be yellow (like this         ), not the current color. 

    Thank you so much for your help.


  • Please try this CSS, but space b/w both the links would not be possible more than 5px.

    If still, you need more space b/w links, then you need to add a new file in your child theme. You can follow the below steps:
    a) Create a new file with name header.php in your child theme and edit it, then paste the code in it from LINK
    b) Add this custom CSS in your theme's custom CSS box. To add more space, edit the value 50 to higher.

    Let me know after this!
  • Hello Imraz,

    I tryied the CSS, but still can not make the in line.  There must be some error. 


  • I share this all after testing, and it's working fine at our end. Could you please share us your wp-admin details on my email address, let me see why doesn't it taking changes.

    Email Address: [email protected]

  • Hello Imraz, 

    Before that, i want to explain that, i also added a Search widget onn the right, and have added CSS to adjust the height and color. 

    My current total css code is: (blue code is for search, and the black code is from yours.)
    .top-header-widget .widget input[type="text"], .top-header-widget .widget textarea {
        width: 70% !important;
    .top-header-widget .widget_search {
        padding: 8px 46px 0px !important;
    .top-header-widget .widget_search input[type="submit"]:hover{color:yellow !important;}

    /*widget: Header  info widget*/
    .top-header-widget .busiprof_header_info_widget{
     display: inline-flex !important;
     margin-right:5px !important;
    .top-header-widget .busiprof_header_info_widget:hover{
     background-color:#f99901 !important;
    /*widget: Header  info widget*/

  • Hi, 

    Here I notice the changes on your site:

    Please check again after clearing your browser caches.
  • Oh i see, it's not because of caches, it's because of browser.

    And by the way, as it shows on your screen shot, is this the biggest space can you make between email and phone?(without more child theme)

  • Without child theme, it would not be possible to add more space b/w them.
  • if add more child theme, will it slow the website?  if yes,i will accept the current space
  • You don't need to add more child theme, only add one new file in your already existing child theme.
  • It will not slow down your site.
  • Thank you so much Imraz,  i understand now. It works fine.

    I have one more question, can i modify the php files in the parent theme? (for example, the category.php, header.php)
    I want to delet the child theme, incase it slow my site. 

    Is this possible? or does this have any risk?

    Thank you so much Imraz.
  • edited August 2018

    Yes, there is a great risk if you make changes in the parent theme. Because when you update your theme, all changed file in parent theme would also get changed. So to prevent the changes we always prefer to use a child theme.

    Let me know if any confusion!
  • Totally understand now, than you for your great support Imraz, have a nice evening!
  • Glad to help you! @woolars

    You can rate us with your kind review HERE

    Thanks for contacting us :)
This discussion has been closed.