Whenever you are working on your WordPress blog and adding new content, its often nice to be able to refer to some other websites. For example if I was talking about searching on the internet, I might mention the names of websites like Google or Yahoo.
It is even nicer to be able to provide a direct link to these site from my WordPress article, and to make this link clickable. This is known as a hyper-link. Today I will demonstrate how you can do this yourself, i.e. how to add links in WordPress, or more technically, how to add anchor links in WordPress.
Obviously if you want to try this, you need to go into WordPress yourself, then edit any of your existing posts, or create a blank temporary one. I mentioned Google as an example, so let us continue with that one. Type in the word Google into your article. Then highlight it by dragging the mouse across it or even by double-clicking it.
Click the link icon next. This icon usually looks like a tiny piece of a chain. If you are currently in the HTML mode of WordPress, then the icon is just a little button with the word “link”.
Next you get a small pop-up window asking you for some details. It asks for the URL, and the title. You should also see a check-box marked “Open link in a new window/tab”, depending on your version of WordPress.
The URL: Put the URL, the web address in here, in this case it would be: http://www.google.com You need to be extra careful with the URL, make sure to type it in exactly, or else it just will not work if people try to click it. URLs are usually all lower-case. Better than actually typing it in is to ‘paste’ it in, i.e. navigate to that website in your internet browser and ‘copy’ the address from the address bar.
The Title: Just put in the name of the site, in this example”Google”. This is the one that will be displayed within your article, so it is OK to use upper-case and make it look proper. This is also known as the anchor or anchor-text.
Ignore any other options in that window and just click the “Add Link” button to go ahead and insert it into your post. Preview your post, and you should see your new link. That’s how to put links in WordPress. And of course, test it by clicking it to make sure it works. Always test your links.
Switching between Visual and HTML: Whenever you are working in WordPress, you have a choice of working in the visual mode or in the HTML mode. There are two buttons for this, usually in top right-hand section of the screen, labelled “Visual” and “HTML”. Each time you click one or the other, the view changes appropriately. The visual mode displays your post like a WYSIWYG screen (What-You-See-Is-What-You-Get), with lots of formatting and style buttons along the top. The HTML mode displays the raw HTML codes, like any web editor, and usually the formatting and style buttons are not visible.
Look at the HTML mode, and you see your new link similar to the following (without the colours):
That’s how a basic link is composed. It has two main parts, URL and title. All the other characters that you see make up the rest of the HTML code. You can change the URL to a different one and you can change the title, but you should make sure not to delete any of those extra characters, or else the link might not work correctly.
That method of link will work just fine if you go ahead and publish your article, and if that’s all you want to learn, you can stop reading right here.
There are two extra features of links that you should be aware of, and these are explained next. These are not strictly necessary, but they help to improve your website.
Open Link in a new window: At present, if that link was published as part of an article post, people will leave your website whenever they click it. Generally we do not want too much of that happening, but whenever it does, we want them to easily find their way back. Yes, they could just click the “Back” button on their browser, but don’t take that chance. Instead, we prefer that when they click links within our site, a new tab is opened for that link. When that tab is eventually closed, they automatically return to our website. And it’s really not complicated, I promise.
Return to the earlier pop-up window by placing your cursor into the link title and clicking the link button again. This time, click the little box to turn on the option “Open link in a new window/tab” and update it. Then preview and test, and this time you should notice that when you test it, a new Google tab opens up in your web browser. When you close that tab, you return to your own website. Easy!
Switch over to the HTML mode to see the updated link, and you should see the following:
<a href=”http://www.google.com” target=”_blank”>Google</a>
Most of that looks the same as before, but there is an extra piece in there: target=”_blank”
That’s how that is done. We could have just typed that manually in, but the syntax is important so its usually easier to click the button to make sure it is done correctly.
Make the links Nofollow: One last thing about links out from your website, is the Nofollow attribute. The reason to make the links Nofollow is a bit complicated, but basically we want to link to the other website, but we do not want our link to influence the ranking of that site. There is a bit more to it than that, but here is the general rule of thumb: always make your links in WordPress Nofollow unless you have a specific reason not to, because it could have a bearing on your own website ranking.
To do this, we must add it in manually within the html mode window. The syntax is exactly like this: rel=”nofollow”. Go ahead and type that in, just before the first closing “>”, with a space in front of it. The new link should look like this:
<a href=”http://www.google.com” target=”_blank” rel=”nofollow”>Google</a>
Preview and test, as before. There will be no obvious difference this time, as that clause works behind the scenes.
Useful Tip: Notepad is your best friend whenever you are working with links in WordPress in HTML mode. Before you start modifying any of those codes, select all, ‘copy’ it, and ‘paste’ it into notepad. This will be your backup, just in case things get screwed up.
P.S. You are very welcome to sign up for my free email newsletter and get regular emails with lots of top information just like this sent directly to your inbox. You can read some more about it here Links In WordPress. Just enter your name and email address. Your privacy is always assured!
Filed Under: Links In WordPress