How to add a link to your WordPress page or post

This is a question that we’re often asked, so it make senses to make it the subject of a short post. We’ll take about how to add three different types of links: (a) how to link to a page on your website, (2) how to link to a web page on someone else’s website, and (3) how to add a link to an email address.

The steps

Step 1: create your link text

In all three cases, you’ll need to have some text written, and you’ll need to know where you want to insert the link.  For example, you might have a sentence like:

Get in touch for more information.

In this case, it make sense to add a link to a contact page in the text for Get in touch. We do this a lot on the Stress-free WP site. For example:

Get in touch for more information.

You may have different link text depending on the type of link you are creating – the example above might work well for a link to a contact page or to an email, whereas if you are referencing an external site, you might say something like:

Visit my LinkedIn page for more information.

Hopefully this makes sense.

Step 2: insert your link

To insert a link to a page on your site:

1. Highlight the text into which you wish to insert your link
2. Click the Insert Link icon on your toolbar
3. In the link box that appears, start typing the name of the page you want to link to – in our example, I’ll use Contact Us:
4. Click the relevant page – in our case Contact – to select it:
5. Click the apply button and your link will be inserted.

To insert a link to an email address:

The initial process is similar.

1. Highlight the text into which you wish to insert your link
2. Click the Insert Link icon on your toolbar
3. In the link box that appears, you’ll need to type “mailto:” plus the email address you want to use.  For example, mailto:hello@lovelybusiness.com:
4. Then click the apply button (the blue button with the arrow). Your email link will be inserted. You can check if the link is correct on the front-end, or by click the link once in the backend, and a little hover box will appear showing you the link:

How to insert a link to an external web page (not on your site):

1. Highlight the text into which you wish to insert your link
2. Click the Insert Link icon on your toolbar
3. In the link box that appears, type in the page URL that you want people to see – I am using a LinkedIn page as an example:
4. When you send people to a page that isn’t on your website, you might want to open the new website in a new tab or new page – this means that people won’t lose your site. I recommend doing this, and to do this, click the settings button to open up additional options:
5. In the pop-up that appears, tick the open to open in a new window or tab, then click the update button.
6. The link will be inserted and if you click on it, you’ll see what URL is contained in the linked text:

Extra options for inserting an email link

If you follow the instructions above for inserting an email address into some text, visitors will be able to click the link, which in turn will open their email client (Outlook, Thunderbird, whatever they use), and create a new email with the email address automatically added to the “To” or “Recipient” area.

You can, however, add even more information to the new email.

Here are the options available:

mailto:
to set the recipient, or recipients, separate with comma for multiple recipients

&cc=
to set the CC recipient(s)

&bcc=
to set the BCC recipient(s)

&subject=
to add a pre-defined subject o the email. If you use more than one word, you need to use %20 instead of spaces

&body=
to add pre-defined text to the body of the message.  You can add as much text as you want here, with normal spaces.

Practical examples:

To create your mailto syntax, you simply build the code as you need it.

For example, if I wanted to have a recipient, plus a CC and a BCC email, as well as a subject and body, my syntax would look as follows:

mailto:hello@hello.com&cc=hello@otherhellow.com&bcc=me@hello.com&subject=Please%20call%20me%20back&body=Hello Hello, I’d like a call-back.  Here is my number:

If I just wanted a recipient, a subject and some body text, it would look as follows:

mailto:hello@hello.com&subject=Please%20call%20me%20back&body=Hello Hello, I’d like a call-back.  Here is my number:

And if I just wanted a recipient and a subject, it would look like this:

mailto:hello@hello.com&subject=Please%20call%20me%20back

You can build your code as needed and when you are inserting your email address as a link, instead of adding:

mailto:hello@hello.com

You’d add the full code, like:

mailto:hello@hello.com&subject=Please%20call%20me%20back

A note for developers inserting an email link into text that appears to be an email

Let’s pretend that instead of adding an email into short text like “Contact me”, you want to use the email as normal text and insert the email link into that. And let’s pretend that the email is rather long. For example:

wewouldlovetohearfromyou@verylongdomainame.co.uk

On a desktop, this would look like this:

wewouldlovetohearfromyou@verylongdomainame.co.uk

On a mobile device, however, the hyperlink may run off the screen, or break mobile layout.  You don’t want that! Instead, wouldn’t it be great if the long hyperlink would automatically wrap? Yes! To do this, you’ll need to add the following CSS, using a custom div, for wherever you expect long hyperlinks to appear.

.break-long-hyperlinks 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;
}

That’s it

Hopefully this was useful.  Need more information or fancy a chat?  Just shout!