Website links allow you to easily move between content on your own site and on other websites.
In this tutorial we we look at adding various links to a WordPress page, blog post or text widget. We will look at:
- Basic requirements for links.
- How to link to another web page on the same WordPress website.(internal link)
- How to link to another web page on an external site.
- How to create download links for documents e.g. pdfs
- How to link within a web page in WordPress. (bookmarks)
- Broken Links.
Creating Links – The Basics
To create a link you need a starting point and ending point.
You can use text or an image to start a link.
The starting point of a link is known as an hotspot, and is usually a different colour than the surrounding text, often it is blue and underlined when viewed in a web browser.
If you are using text for the starting point ( most common) the text with the link (shown in blue) is also known as the link anchor text.
If you are linking to another page then the page URL is the endpoint for the link.
However when linking within a page you will need to create an end point within the page.
This endpoint is known as a bookmark or named anchor. (diagram below)
Creating a Bookmark or Named Anchor In WordPress
The standard WordPress visual editor doesn’t let you create bookmarks, and so you will need to switch to text mode, and manually edit the HTML to create one.
We start by creating the bookmark or named anchor which is the destination of the link.
Here is a picture showing the HTML of the bookmark for the bottom of this page.
The bookmark is created using the <a> (anchor) tag, the attribute name= is the name of the bookmark.
This name will be used when creating the link.
The text inside the closing </a> tag is the destination of the link.
Using an ID Selector for A Bookmark
There is an alternative form of named anchor which is more common today, which simply uses CSS id selector tags.
So if you had an header 3 tag with an id of bottom the HTML for the tag would look like this.
You create the link to the selector the same way as shown above.
Creating a Link in WordPress
To create a link highlight the text you want to use as the starting point and then click on the link icon.
A small text window opens and you can type or paste your link into.
Alternatively click on the link options on the right and another larger window opens.
You can use the search box to search for internal pages on your site.
Enter the text into the search box and pages matching the text appear in the box below.
Click on the desired result and the URL of the page appears in the url field above.
Click Apply when done and you should see the link created underlined in blue text.
If you are creating links to external web pages it is a good idea to open the web page in another browser window and copy and paste the URL from the browser. You would also normally click the open link in new tab option.
Creating Links within a Page
When Linking within the same page you can create a named anchor or alternatively use a CSS ID selector. Prefix the ID/anchor with a # as shown below.
You can remove a or edit an existing link by hovering over or clicking in the link and clicking the unlink icon or selecting edit then link options.
Adding a Download Link
When creating a download link you will first need to upload the files that you want to make available by going to the media library.
Creating Links in a Text Widget.
The easiest way of doing this is to create them as normal in a WordPress page or post and then go to source mode and copy them from there.
Then create the text widget or custom HTML widget and paste the text you copied into the widget and save.
Avoiding Broken Links
If someone clicks on a link and the destination page isn’t found they will get a page not found or 404 error.
Broken links to pages on your website should be avoided, and so it is important to check all links on any posts or pages that you create to make sure that they work correctly.
You will find that external links can become broken over time as the pages can be moved or removed by the owner.
Therefore it is a good idea to check these from time to time to make sure they still work and remove ones that don’t.
Creating Links Video
This how to create Links in WordPress video covers the main points above.
Related Articles and Resources:
