How to Create HTML Links in WordPress - Several Tips

By Philip Light,
the founder of the WordPress WebKit

http://www.wordpresswebkit.com/

Become a member of TranslationDirectory.com at just $12 per month (paid per year)

WordPress makes it easy to add links in your content to other pages on your website and to pages on other websites. However, there are right and wrong ways to do things. There are also times when you'll need to create an HTML link yourself manually such as in Text Widgets. Finally, there is a Links Manager built into WordPress for showing a list of links in your sidebar.

We're going to take a deeper look at creating links properly in WordPress, in all these situations. First though, there is some general information about HTML links that applies to all of your links, regardless of how you create them. Let's cover that first.

Note: Use the link at the bottom of this article to view the original article on my own blog which has links to more resources on a couple of the topics below.

Some General Information about HTML Links

The Link Text.

The actual text of the link you create is referred to as the "Link Text". For instance, if we had a link that says "click here" then the Link Text for that link is also "click here". Note that it's much better for users and Search Engines if you use something more descriptive for the link text instead of generic terms like "click here". Be sure to include the keywords for the page you are linking to as well. This helps you get more SEO (Search Engine Optimization) value for your pages.

The Link Target.

You can set whether a link should open in the same browser window where the link is displayed, or to have the browser open a whole new window for the linked-to page. The general best practice is to always to use the same window for any page on your own website and to use a new window for any page that goes outside your website. This way you aren't opening new windows needlessly and you make sure your site stays up after the person clicked on the link. You don't want them accidently closing your website thinking they were just closing the page you linked to!

The Link Title.

This text you use as the Link Title will display when a user hovers over your link. This attribute is useful if the Link Text doesn't give much specific information about what you are linking too, "click here" for instance. In general, it's better to use more descriptive terms in your links but there are times when you may not want to.

Absolute or Relative Path.

There are two kinds of links that you can use. An "Absolute" link includes the full URL of the page you are linking to, including the http:// and domain name. It is necessary to use Absolute links where you are linking to someone else's website, which you probably already knew.

You can also use "Relative" links to pages on your own site. These links let you create your link relative to the location of the current page. For instance, if you had a page at "www.mydomain.com/my-pages/this-is-my-page/ and were linking to a page at www.mydomain.com/my-pages/this-is-my-page-2/, you could simply use "this-is-my-page-2" as the Link URL.

You can also use "../" in front of a link URL when the linked-to page is in a higher directory than the current page. For instance, if you are linking from www.mydomain.com/my-pages/this-is-my-page/ to www.mydomain.com/another-page/. That URL would be like "../another-page/". You can add as many of these as necessary i.e. "../../../some-other-page/".

Using Relative links are beneficial on your own site as they won't necessarily have to be updated if part of the directory structure changes. For example, if you changed the parent page in the example above to "my-old-pages" then you would have to update an Absolute link whereas a relative link would not need to be updated.

Test Your Links! Be sure to test all your links! Make it a point to click every single link you create to make sure you got it right. It's pretty embarrassing to point someone to a URL that doesn't exist.

Creating Links in WordPress Content.

This couldn't be easier. You just select the text in your pages or posts and click the "Insert/edit link" button (hover over the buttons to see their names). This will bring up a dialogue box with a couple options for you to fill in. See the General Information above for more information about each of those fields. The Link Title will automatically be the Link Text of the link if you don't enter something different in the Link Title box. You really only need to use it when you want the Title to be something different than the text a visitor clicks on to follow the link.

You can also select a CSS "Class" which will change some aspects of the links such as formatting and positioning, depending on your theme. You can experiment with those classes to see the effect it will have on your particular website. Most times you won't need to select a class.

You can also create links from your images in WordPress using a similar method. Instead of selecting the text to generate the link you will simply click on your image first. You follow the same steps from there. Note that you may get a colored 'border' around the image on your page. To eliminate this, edit your image and go to Advanced Settings and set "0" into the border property.

The WordPress Link Manager.

WordPress also has a built-in feature to display a list of links in a Widget which you can access via the Links tab in your Admin Center. Here, you can easily add/edit/delete new links, including putting them into categories, selecting if they should open in a new window or not, etc. You can even add images to them if you'd like. You can then display these links using the Links Widget by going to Appearance > Widgets just like any other Widget.

Creating Links Manually.

There may be times when you need to create the HTML code for a link manually. For instance, you want to create a Text Widget in your sidebar that has a link in it. You'll have to create the HTML for the link by hand in these cases, but fear not, it's not too hard. A typical text link will look something like this...

(I can't use HTML here, see the original article by clicking below for an example)

You can copy and paste this directly into where ever you need it (use the HTML tab if editing a page or post) and replace some of the text to the particulars of your link. You'll replace everything between the quotes for the "href" section, which is the link URL, and the "title" section. You'll then need to replace the text of "Click Here" to whatever you want your link text to be. Just be sure to try the link out to make sure it works properly.

Alrighty, that's about all there is to know about creating links in WordPress. I hope that will help you create your own links properly in WordPress where ever you may need them. Now go create some great content to link to!

Published - August 2010

Submit your article!

Read more articles - free!

Read sense of life articles!

E-mail this article to your colleague!

Need more translation jobs? Click here!

Translation agencies are welcome to register here - Free!

Freelance translators are welcome to register here - Free!