Add an email link to your post or page

‘How do I add an email link to my WordPress 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 WordPress editor 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.Inline link editor
  5. You will probably want to tick ‘Open link in a new tab’.  So click on the cog on the right hand side of the inline link editor shown above.
  6. That will bring up the WordPress link box shown below – tick the Open link in a new tab box.WordPress link editor
  7. Then click on the blue ‘Add Link’ button.
  8. That is it, your link will now show up nicely in the page.
    Here is my link:
  9. Remember to click the Update Post button over on the top right of your WordPress 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 WordPress 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-6 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. Tick the Open link in a new tab box.
  4. 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 cog in the WordPress inline link editor to add the link you will 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 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 WordPress 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 WordPress gives you the tools to make it all very easy to do.

More WordPress tips and tricks »

A note for WordPress 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;

© Copyright protected by Copyscape.