MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Add an email icon to Hemlock

Please note: This FAQ Article is specifically for the Hemlock theme.


To add an email icon to your Hemlock social icons which would allow visitors to send you an email, you can follow these steps:

Hemlock Email Icon Screenshot #1


Adding an email social icon to your top-bar


Navigate to WP Dashboard > Appearance > Editor > and open up the theme's "header.php" file. Beginning on Line 49, you'll see a long list of the various social network icon options. At the bottom of the list, on the blank Line 58, you can copy and paste the following bit of code:

<a href="mailto:YOUR-EMAIL-ADDRESS-HERE?subject=ADD-SUBJECT-LINE-TEXT-HERE &body=ADD-DEFAULT-BODY-TEXT-HERE" target="_blank"><i class="fa fa-envelope-o"></i></a>


Hemlock Email Icon Screenshot #2


There are three optional elements within the above code that you can replace in order to customize how the email looks when a user clicks on the email icon:

Mail to: Replace the "YOUR-EMAIL-ADDRESS-HERE" dummy text in the code with the email address you would like the emails to automatically be addressed to.

Subject: Replace the "ADD-SUBJECT-LINE-TEXT-HERE" dummy text with the text you'd like to automatically appear in the email's subject line.

Body: Replace the "ADD-DEFAULT-BODY-TEXT-HERE" dummy text with any text you'd like to automatically appear in the body of the email. If you'd like the email body to be blank, you can simply remove the dummy text.

Be sure to save the "header.php" file when you're done making changes.


Adding an email social icon to your footer


Hemlock Email Icon Screenshot #3


To add an email social icon to your footer, navigate to WP Dashboard > Appearance > Editor > and open up the theme's "footer.php" file. 

Beginning on Line 32, you'll see a long list of the various social network icon options. On the blank Line 41, copy & paste the following code:

<a href="mailto:YOUR-EMAIL-ADDRESS-HERE?subject=ADD-SUBJECT-LINE-TEXT-HERE &body=ADD-DEFAULT-BODY-TEXT-HERE" target="_blank"><i class="fa fa-envelope-o"></i><span> Email</span></a>


Hemlock Email Icon Screenshot #4


There are four optional elements within the above code that you can replace in order to customize how the email looks when a user clicks on the email icon:

Mail to: Replace the "YOUR-EMAIL-ADDRESS-HERE" dummy text in the code with the email address you would like the emails to automatically be addressed to.

Subject: Replace the "ADD-SUBJECT-LINE-TEXT-HERE" dummy text with the text you'd like to automatically appear in the email's subject line.

Body: Replace the "ADD-DEFAULT-BODY-TEXT-HERE" dummy text with any text you'd like to automatically appear in the body of the email. If you'd like the email body to be blank, you can simply remove the dummy text.

Icon title: At the end of the code where it says "Email" between the two "span" tags, feel free to change this to whatever text you'd like. This text will appear after the social icon within the footer.

Be sure to save the "footer.php" file when you're done making changes.


Adding an email social icon to your social icon widget


Hemlock Email Icon Screenshot #5


To add the email icon to your social icon widget, you can navigate to WP Dashboard > Appearance > Editor > "inc" folder > "widgets" folder > and open the file titled "wocial_widget.php". 

Beginning on Line 55 is a long list of the available social networks. Create a new, blank line immediately following the last option for "RSS" and before the closing "/div" tag. On this blank line, copy and paste the following:

<a href="mailto:YOUR-EMAIL-ADDRESS-HERE?subject=ADD-SUBJECT-LINE-TEXT-HERE &body=ADD-DEFAULT-BODY-TEXT-HERE" target="_blank"><i class="fa fa-envelope-o"></i></a>


Hemlock Email Icon Screenshot #6


To customize the "to" address, subject line, and body text of the email that will pop up for users, follow the previously noted steps above. When you're finished, be sure to save any changes to the "social_widgets.php" file.