how to add links with Gutenberg

How to Add Links in WordPress

Tutorial #15

Sooner or later, you’ll want to add links to other websites, or even another page in your own site. Fortunately, in a WordPress site it’s pretty straightforward.

Note: this article was updated on July 15, 2019.

Understand the Two Types of Links

There are text links and there are image links. A text link changes a word or phrase to an active link. When your reader clicks on it, they’ll be taken to another web page. It could be a different page on your site, or it could link to a totally different site.

An image link does the same thing, but your reader clicks on an image instead of words to get there.

Here’s an example of a text link:

Download your copy of The WordPress Beginner’s Blueprint.

Here’s an example of an image link that will take you to the same page. Go ahead and click – I’ll wait.

WordPress Beginner's Blueprint

How to Add a Text Link

WordPress makes it easy to create the links you want. Here are the steps to create a text link:

#1. Get the exact URL you want to link to.

The URL (Uniform Resource Locator) is what shows up at the top of your browser when you’re visiting a web page. If you look up, you’ll see the URL for this page is https://dhjvu814gu-staging.onrocket.site/how-to-add-links-in-wordpress. (Your particular browser might not show the http:// or https:// part of it, but trust me, it’s there.)

To make sure you get it exactly right, it’s probably wise to copy and paste it rather than trying to type it by hand.

#2. Highlight the text you want to link

In your WordPress editor, highlight your link text. Your highlighted text will look something like this:

highlight the word(s) you want to link to

#3. Click the icon to create the link

Once you begin highlighting, you’ll see this set of icons pop up. It includes your link tool. Go ahead and click it.

start your link by highlighting text

#4. Paste the link URL

Underneath your highlighted text, you’ll see a new box that says Paste URL or type to search. Type, or better yet, paste, the URL into the box.

type or paste the URL you're linking to

Note that if you want to link internally (in other words, to another post or page within the same WordPress site), you can search for the link you need by typing a few words into that box. When you do, WordPress will show you a list of available items. Simply click the correct one, and WordPress will insert the right link.

Here’s what the link to The WordPress Beginner’s Blueprint above, looks like.

Notice the link tool in the menu bar

#5. If you want, set up the link so it opens in a separate browser tab

Click the small arrow next to the URL to open the dialog, then select Open in New Tab.

Select the arrow to open the dialog
Make the link open in a new browser tab

#6. Save the link

Click the arrow to save the link.

Click the arrow to save your link

That’s all there is to it!

How to Add an Image Link

#1. Get the exact URL, as above

#2. Add your image

Here’s a quick tutorial on how to add an image.

#3. Highlight the image and add link details

Highlight the image, then look at the Block tab to your right. Scroll down until you see the Link Settings.

image link settings

Select the type of link from the dropdown box.

select the type of link

If you select Media File, WordPress will automatically insert the proper link. When your readers click, they’ll see a separate page displaying only that image.

media image ink

If you select Attachment page, WordPress will create the link and take your readers to a separate page that looks something like this.

media attachment page

To link to another page, post, or a completely different website, select Custom URL.

insert your custom link here

Just as you did with the text link, paste or type in the URL you’re linking to, and select Open in New Tab if appropriate. Your link will be saved when you save your draft.

That’s it! You’ve added an image and linked to it.

I hope you’ve found this tutorial helpful. If you have a question, please contact me. I also teach WordPress — here’s more information.


See more basic WordPress tutorials for beginners here.

2 thoughts on “How to Add Links in WordPress”

  1. Hi Susanna — I have been following your sage advice since starting my website in August via the MMW course. You may have answered this but herre’s a question: I started my site on GoDadddy, mostly because I needed to be walked through the process and have NO HTML savvy. I like a lot of the “look” of WP theses and wondered how complicated it would be to transfer this site to a WP theme. Any suggestions? Thanks and keep up the great work!

    1. Hi Jane, so glad you’re finding the information here helpful!

      Switching over to WordPress won’t be difficult. I took a quick look at your site, and you’re off to a good start. I think there’s a lot you could do with it in WordPress, and it would be good to do it now before you have reams of content. The only caveat is, GoDaddy is a TERRIBLE WordPress host.

      Please feel free to email me to talk about specifics.

Comments are closed.

20 Shares
Tweet7
Share2
Pin
Buffer11