Add email link in header

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

20% Discount!!!
Divi WordPress Theme

Divi comes with the option to add a phone number and email in the top header but the email address is not linked. This tweak will show you how to add a link so the user's default email application will automatically open when the email is clicked.

PHP

Locate the header.php file in the Divi folder

Copy this file into your Divi-child theme folder

Find these lines of code around line 74:

<?php if ( '' !== ( $et_email = et_get_option( 'header_email' ) ) ) : ?>
<span id="et-info-email"><?php echo esc_html( $et_email ); ?></span>
<?php endif; ?>

Change them to this:

<?php if ( '' !== ( $et_email = et_get_option( 'header_email' ) ) ) : ?>
<span id="et-info-email"><a href="mailto:contact@example.com"><?php echo esc_html( $et_email ); ?></a></span>
<?php endif; ?>

That's it. Make sure you replace "contact@example.com" with the correct email address. I also added CSS to make the email address underlined when hovered on:

CSS

Open your style.css file in your Divi-child folder and add the following code:

#et-info-email a:hover {
text-decoration: underline;
}

    7 Comments

  1. Hi. I’d like to make the phone number field in the header a callto link. Could you tell me how to do this? Thanks!

    Nick

    February 9, 2015

    • Hi, I’d like to do exactly the same thing as Nick. is there a way to do that?

      Sanaz

      May 5, 2015

    • Hey Nick, I figured out how to make the phone number clickable. Sharing in case you still need it.
      in header.php you need to change

      to

      <a href="”>

      Sanaz

      May 5, 2015

  2. How do you add other info at the header element right next to phone and email and not above or below it?

    And how do you make it visible when let’s say you leave the phone and email blank?

    Thanks in advance 🙂

    Rambo Ruiz

    October 28, 2015

    • Hi Rambo. You’ll have to remove the conditional if statements in the header.php file:
      < ?php if ( $et_top_info_defined ) : ?>
      < ?php endif; // true ==== $et_top_info_defined ?>

      and

      < ?php if ( $et_contact_info_defined ) : ?>
      < ?php endif; // true === $et_contact_info_defined ?>

      Then just add your own text or links and delete the phone and email if you don’t want them. You should do this in a child theme.

      Brad (admin)

      November 6, 2015

  3. Hi, I am trying to add link to header next to phone number. How I can do it? Thank you.a

    Uygar

    December 16, 2015

  4. Hi, i wont to make the mailto clickeble to a url page (my contact page).
    how to do that what do i have to change in de copy header.php file in my child theme.
    working whit divi 3.0 elegant theme and make my chld theme whit te plugin divi children.

    percy s robles

    February 22, 2017

Post a Reply

Your email address will not be published. Required fields are marked *