Creating HTML Hyperlinks (Links) in WordPress

linkA hyperlink (or link) is a word, group of words, or image that you can click on to navigate to another web page. The HTML <a> tag defines a hyperlink. The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

The guide for creating links in posts and pages in WordPress.com blogs is found in the support document titled Links. You can create links in either the Visual editor or the Text (HTML) editor.

If you are using a text widget, you may find it easier to create your links in the in a draft post in the Visual editor. Create a draft post and set it up the way you want. Then you can copy the code from the Text (HTML) editor in the draft post, paste it into the text widget and delete the draft post. For details on creating links in a text widgets see: Text widget links and Text widgets.

This is the general link model:
<a href="URL HERE">Highlighted anchor text here</a>

This is the visual result but as it’s just an example it’s not actually linked to a page:
Highlighted anchor text here

Creating links in the Visual Editor

visual editor links icons

  1. Enter the anchor text ie. word or group of words you want to link to.
  2. Use your mouse to highlight that anchor text. (If you don’t highlight the anchor text the chain icon will remain grayed out and not be useable.)
  3. Next click the chain icon in the Visual editor and when the popup box appears enter the URL and the Title. Note the title may be the same as the anchor text or it might be different.
  4. Proceed to create the link in the pop-up box. (You have the option of ticking the box for the link to open in a new window.)
  5. Click “Add Link”.

Key Points:

  • If many links point to a page with the right keywords in their anchor text, that page has a very good chance of ranking well. Many of the Google results for these queries rank solely due to the anchor text of inbound links.
  • People have a tendency to link to content using the anchor text of either the domain name or the title of the page. This is an advantage to SEOs who include keywords they want to rank for in these two elements.  — Anchor Text

pop-up link  box

Creating links in the Text (HTML) Editor

Text (HTML) editor link icon

  1. Enter the anchor text ie. word or group of words you want to link to.
  2. Use your mouse to highlight that anchor text.
  3. Click the link icon in the Text (HML) editor and when the popup box appears enter the URL and the Title. Note the title may be the same as the anchor text or it might be different.
  4. Proceed to create the link in the pop-up box. (You have the option of ticking the box for the link to open in a new window.)
  5. Click “Add Link”.

How to set links to open in a new window

You cannot set your entire WordPress.com with a default setting so every link opens in a new window. Be aware that it interferes with the ability of the reader to make their own choice and it can be extremely annoying to readers to have many open windows. If they are on a slow connection it can cause crashing.

This is the general link model (link to open in a new window):
<a href="URL HERE" target="_blank">TEXT HERE</a>

Blogroll
Dashboard > Links > Edit / Add new >
Advanced settings > Target (check the blank option)

Posts and Pages (using the link button to create them)
Select “Open link in a new window” from the dropdown before inserting the link. You can also go back and edit old links and check the “Open link in a new window” checkbox and then re-save the link.

Images
You upload the image, click File URL, insert it, then click on the image (in the visual editor), click on the edit button (mountain icon), click “Advanced Settings”, scroll down to “Target”, tick “Open link in a new window”, click Update, click Update Post.

Or, you upload the image, click File URL, insert it, then in the Text (HTML) editor you add this to the image code (after href… etc… jpg, with a space before it):

target=”_blank”

With the advent of CSS3, you can also make links open in new tabs in browsers that support CSS3 using the following code:target=”new”
style=”target-name: new; target-new:
tab;”

Note: There is no option provided in the Image widget  to open a link in a new window.  See here for Codes useful for Text Widgets.

Now that you are familiar with what a properly formed HTML link is, it’s time to go over some linking guidelines. Visit Lorelle’s teaching site, read her post on properly formed links and scroll down to Link Format Guidelines.

24 thoughts on “Creating HTML Hyperlinks (Links) in WordPress

  1. Where do I go to find out why the hyperlinks are not showing up? I have done everything as directed over and over in visual and text. The links come up blue and should be there but when I visit the site the link area is blank. It is driving me crazy :(

    • I wish so of the new bloggers posting to the support forums would find this post. If you meet any who need to locate it please point them here.

  2. Pingback: Social Media Icons for WordPress.com Blogs | one cool site

  3. First of all, I want to thank you! I have incorporated so many of your tips and suggestions into my blog (although if you went there, it might not look like it!). I am hoping you can direct me to a post about HTML Tables … more specifically to figure out how to get started! I have read and will use the suggestions in your posts about this subject from 2011. I just can’t figure out how to get started. Is there a link? a widget? a setting? I understand your directions in terms of making the tables … but how do I get to a place where I can get started.
    Does that make ANY sense?
    Feeling stupid,
    Laurie

  4. I learned from this and the linked post that my personal preference to have links open in a new window (then close them when I’ve read them) is probably not shared by many!
    Also – I like posts to include links and I nearly always check them when I’m reading online, but I notice in my stats that only a tiny minority follow up on the links in my posts. Is that generally the case or does it just reflect the nature of my blog? (For example, do you notice a big difference on clicks away, between your personal and your blogging advice blogs?).

    • My preferences is the same but we do all have the opportunity to choose to open links in new tabs/windows or not and we have back buttons. I acknowledge it’s discourteous to compel your visitors’ browsers to open new windows/tabs. I know it can cause crashes when the visitor is on a slow connection.

      What you observe is what I observe. When most of the links in articles do not get clicked it indicates that people are skim reading or scanning content.

Comments are closed.