Add an email link to your post or page

Add an email link to your post or page

‘How do I add an email link to my posts or pages?’ is a question that I get asked a lot.

Email links are slightly different to standard links but you add them in the same way.

Here’s how to do it:

  1. Type in the required email address as shown in the box below.
  2. Highlight the text with your mouse as shown.
  3. Click on the insert/edit link icon as indicated.Adding your email link in the WordPress editor
  4. The latest versions of WordPress are clever, you can see from the image below that WordPress knows it is an email link and has added the mailto: prefix in front of your email address.
  5. You will probably want to tick ‘Open link in a new tab’.
  6. Then click on the blue ‘Add Link’ button.The add email link dialogue box
  7. That is it, your link will now show up nicely in the page.
    Here is my link: email@example.com
  8. Remember to click the Update Post button over on the top right of your editing screen to commit your changes to the live site.

Update post button


What if I have a very long email address to add or I want to display text instead of the email address?

When using very long email links in mobile responsive websites, the link can run off the screen and look messy.  You can see this in the example below. Some themes do make provision for this behaviour in advance but many do not.

Equally, you might just prefer a simple text link like ‘email me‘.

iPhone showing long email address overflowing

Here’s how to sort that out/change to a text link:

  1. Follow steps 1-5 above.
  2. Now the difference: change the link text from the email address to ’email me’ as shown (you can type anything you want).
  3. Then click the Add Link in the same way as above.

Changing the email link text in the dialgoue box


What if my version of WordPress does not recognise the link as an email address?

You will need to manually add the email ready link, here’s how:

  1. When you click the icon to add the link you will probably see the box as below with or without the http://Manually adding the email link to the link dialogue box
  2. Now see the image below.
  3. If necessary, backspace to remove the http://
  4. Manually type in the link as shown remembering to add the mailto: before your email link.  (Note that you will replace email.example.com with your own chosen email address).
  5. Change the text link as required.
  6. Tick the ‘Open link in a new tab’.
  7. Then click the blue Add link button.
  8. Remember to click the Update Post button over on the top right of your editing screen to commit your changes to the live site.

The add email link dialogue box


I would like to add a pre-populated subject to my email link

Simply follow the steps just above and add the following your your email URL ?Subject=Web Enquiry – you don’t have to use Web Enquiry, you can use whatever text you want.

Adding a subject to Email URL

 

Once you get going it really is all very easy to do.

More WordPress tips and tricks »

A note for developers only

If you want to prevent long hyperlinks running off small screens by forcing them to break, add the following to your CSS file (using your own div classes of course).  You will probably want to add this for the post content and the comment content:

.example-div a {
word-wrap: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
}

Share on FacebookTweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someone

© Tracey Rickard. If you want to use any of my content please ask me first, you can't use it without permission that's stealing. You can use an excerpt as long as it is linked back to this article.