To create a hyperlink using text, you have two choices. If you are trying to setup a hyperlink in a Widget then use the Plain Text instructions. If you are trying to setup the hyperlink using the Visual editor, use the WordPress Visual instructions.

Plain Text or HTML:

HTML, links are defined with the <a> tag. The href attribute specifies the destination address (http://www.w3schools.com/html/). The link text is the visible part (Visit our HTML tutorial). Clicking on the link text, will send you to the specified address.

HTML Links - The target Attribute

The target attribute specifies where to open the linked document. This example will open the linked document in a new browser window or in a new tab:

HTML Links - Image as Link

It is common to use images as links:

  • <a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0"></a>

Summary

  • Use the HTML <a> element to define a link
  • Use the HTML href attribute to define the link address
  • Use the HTML target attribute to define where to open the linked document
  • Use the HTML <img> element (inside <a>) to use an image as a link
  • Use the HTML id attribute (id=value) to define bookmarks in a page
  • Use the HTML href attribute (href="#value") to address the bookmark

WordPress Visual Hyperlink

Creating Links

  1. Highlight the text you want to link.
  2. Click the link button on the toolbar.
    In Visual mode: 

       In Text mode: text_link2.png

  3. In the popup that appears, enter the URL you want to link to. 

     

  • URL: The URL of the link (include http:// at the start for external websites)
  • Title (Optional): Title of the link when a visitor hovers over it (a small tooltip will appear with the title)
  • Open Link in a New Window/Tab: If this box is checked clicking on your link will open up a new window/tab.

  • Or, if you want to link to one of your existing posts or pages, use the search box to quickly find what you’re looking for. Simply enter a keyword or two that appears somewhere on the post or page you want to link to.  existing_content1.png

  • Click the title of the post or page you want to link to, and the URL and Title fields will be filled in automatically. 

  • After you’ve entered the URL, click Add Link.  In Visual mode: the highlighted text will be underlined and blue to let you that it is linked. 

     In Text mode: highlighted text will be wrapped with the HTML link code. 

    • Removing Link

    To remove a link in the Visual editor, highlight the text and click the broken link icon:


    Troubleshooting

    Links containing the “at sign” symbol

    For example, if you try to put this

    into the Add Link page, the “@” gets removed for security reasons and unfortunately means that your link will not work.

    To get around this, you need to instead enter #64; as in the image below:


    Please be aware that if you re-edit the link the “@” once again disappears so you’ll need to redo the above.