Build Your Own Business Website header image

How To Add A Link In A Post That Opens In A New Window

Someone on the BYOB Forum asked how to create a text link in a post or page that opens in a new window. In HTML speak this is called adding a target to an a tag. This is a very easy HTML function to use.

In this video I demonstrate how to use the add link function in the WordPress text editor to accomplish this. I also explain the HTML behind it and show you how to create the same thing using html.

Add A Link That Opens In a New Window

We got a forum question about how to add a link that opens up in a new window. It is absolutely possible to do and we’re going to take a look at how to add a link like that right now. I’m going to show you the simple way which won’t require you to know any HTML and then I’m going to explain how that works in HTML.

Add a Link Opening in a New Window without Knowing HTML

Come over to my categories demonstration website which is categories.byobwebsite.com. I’m going to go on over to the Dashboard. We’ll go to edit a post, we’ll add a link in and we’ll just do Northern Spy, select Edit. For this I’m going to be in my Visual view of the Text Editor. I’m going to take this section of text right here and I’m going to make it link back to my BYOB website. We’ve got that piece of text selected, select the link tab, type byobwebsite.com and here’s where we do it, right in this section called Target. If we take our Target and say Open link in the same window, that’s the default behavior. If we select Open link in a new window then that’s what it’s going to do – add a link that opens in a new window.

Say Insert and now we have a link that’s going to open in a new window. Say Update to this and then let’s go to the Northern Spy apple. Scroll down here to our link and if we select that it takes us to byobwebsite.com.

Add Title Text to Your Link

Let’s look at one other possibility here for this. Come back to the visual editor. Put your cursor inside the link, select the link again and see this section called Title, you could add the title Go to my home page right there. Update it, refresh it and now when you hover over this you can see the text there that says Go to my home page. It’s a good idea, after you add a link, to put a title in because it gives people a hint as to what’s going on.That’s the quick and easy answer.

Understanding the HTML in the Link

In order to understand how that works we’re going to go to W3 Schools. Click on Learn HTML and we’re going to look at HTML Links. Scroll down and you can see here’s the hyperlink syntax. It starts with an a, it’s the a tag and then it says href, equals and then that’s the URL of where you want the page to go and then Link Text which is the text you’re going to use as the link and finally the closing a tag.

That’s your standard hyperlink. If we come over and look at this in the HTML view you can see here that here’s the beginning and it says a title, Go to my home page. So it’s a, it puts the title in place and then the href, equals – if we strip a way for a moment this extra stuff out of our href this is a more traditional href – a href, equals, there’s the destination, here is the text that happens inside of that and then here is the closing a. What we did was to put a couple of attributes in here. The first attribute that we put in there was the target attribute and you can see here it attribute looks like target, equals, underscore, blank which is actually the target that we used.

However there are other choices besides target, equals blank. We’ll copy this one for just a moment and place it in there. target, equals, blank. In order to get an understanding of what the other possibilities are come up over here to the HTML reference to look at the tag list. Here’s the a tag, then scroll down here and look at the Optional Attributes. In this case the target attribute is the attribute that we’re looking at and it has blank, parent, self, top and frameset. Target Attribute blank means it opens the linked document in a new window, self is the default and it opens the linked document in the same window. Parent is something that you use if you are using frames. Top actually is like a full screen view of the window and then framename again is something that you’re going to use with frames which we generally don’t do anymore.

HTML for a Link That Opens In a New Window

That’s the target value and really the one that you’re using all the time is this target, equals, blank. The other attribute was the title. The title attribute is a Standard Attribute so let’s go ahead and look at those. Here is a Standard Attribute which is title and it specifies extra text information about an element.

If we select that you can see that the title equals some amount of text. If we bring this back over here, copy this, come back to this, we’ve got our href, our target, equals, we’ll add title, equals and in place of value we’ll type Go to my home page.

Update this and it’s going to look exactly like it did. See there it is – Go to my home page. If we click on it, it goes to the Home page. So that is the a tag with target, equals, blank and with title, equals and with that we’re done.

2 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options

Related Posts

2 comments… add one
  • Mindy Lighthipe August 10, 2010, 12:50 pm

    Thanks Rick,
    The video for redirecting the link helped alot. The link is working great in opening up in a new window. I like the idea of displaying the call to action or “hint” when the mouse is over the link. I am in Thesis 1.7 and I was not able to find a Title drop down tab to type text into. My window for adding links is much different than the video. I am on a Mac. I am using WordPress 2.9.2.
    Mindy

    • Rick Anderson August 10, 2010, 1:04 pm

      So Mindy, it shouldn’t matter if you’re on the mac or not since it’s a web application. In your situation I’m guessing that you are looking at it in HTML view rather than Visual View. In the upper left hand corner of the editor there is a pair of tabs, one says HTML and the other says VISUAL, try selecting the visual view.

Leave a Comment