MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Add an email icon to Florence

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




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

Florence Email Icon Screenshot


ADDING AN EMAIL ICON TO YOUR TOP BAR

Navigate to WP Dashboard > Appearance > Editor > and open up the theme's "header.php" file. Beginning on Line 40, you'll see a long list of the various social network icon options. At the bottom of the list, on the blank Line 53, 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>




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 ICON TO YOUR FOOTER

Florence 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 24, you'll see a long list of the various social network icon options. On the blank Line 37, 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>




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 ICON TO YOUR SOCIAL ICON WIDGET

Florence Email Icon Screenshot #5


To add the icon to your social widget, navigate to WP Dashboard > Appearance > Editor > "inc" folder > "widgets" folder > and open "social_widget.php". 

Beginning on Line 59 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>




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.


ADDING AN EMAIL ICON TO YOUR SOCIAL SHARE ICONS

 

The social share icons are the icons beneath your posts on their singular post page. This allows visitors to share your content on their social media sites. To add an email icon to your social share icons, you can navigate to WP Dashboard > Appearance > Editor > and open "content.php".

Scroll down to Line 108, which is a the last line of social share icon code for the Google+ share platform. Create a new, blank line below this Google+ code.

On this new, blank line, you can copy & paste in the following code:

<a href="mailto:?subject=ADD-SUBJECT-LINE-TEXT-HERE &body=Check out this article: <?php the_permalink(); ?>" target="_blank"><i class="fa fa-envelope-o"></i></a>

Feel free to adjust the ADD-SUBJECT-LINE-TEXT-HERE dummy text in the above code to whatever text you'd like to automatically appear in the person's email subject line. 

You can also replace the dummy "Check out this article:" text in the above code if you'd rather have it say something else in the person's email body. The post's URL will then be automatically inserted. 

Please remember to save changes to the file when finished. 

This will add the email share icon to your posts. 

To also add the email share icon to your pages, you can navigate to WP Dashboard > Appearance > Editor > and open the file titled "content-page.php". 

Create a new, blank line below the Google+ code once again (the Google+ code is found on Line 31). Copy & paste the above email icon code. Edit the dummy text as you'd like and then save changes when finished.