How to Add a Hyperlink in WordPress (Block and Code Editors)

Hyperlinks are any link embedded in text (usually they’re a different colour and have an underline). You can use these on your blog for internal links, external links, and affiliate links.

This is much cleaner than just typing out a full link that your audience then has to copy and paste into their search bar.

I’m going to walk you through exactly how to add these to your site, and best practices for each type of link. We’ll go through the ways to do this with the Visual Editor and the Code Editor.

How to Add a Hyperlink in WordPress

If you’re using the block editor, it’s incredibly easy to add a hyperlink.

Highlight whatever anchor text you want to attach the link to and either hit Command + K (Ctrl + K), or click on the link icon in the hovering menu that appears. It looks like this:

Then a bar will pop up asking you to enter the URL you want the text to link to. It looks like this:

You can also search for content on the site by entering keywords. This will bring up a list of posts that include that keyword. It only does this for published posts and pages.

Here’s what it looks like when I type in “WordPress” for She Knows SEO:

Select one of the links or type in your link and hit the enter button on your computer. This will close out of that window and return you to the text editor.

Now your text will be a link. You’ll be able to see this on the backend of your site and when you preview the post to test before you publish it.

I recommend checking the link before the post goes live to ensure it all worked properly.

Author’s Recommendation: Make your links clearly different from your text. No one knows to click on a link if it’s not clear. I recommend underlining your links and changing the colour. Make sure the colour is high contrast and easy to read – neon yellow on neon green backgrounds will be too hard for people to see.

If you aren’t using a block editor, you can still hyperlink but the steps may be minorly different. Typically, you need to use the hovering menu bar to transform the link rather than using a keyboard shortcut.

Author’s Recommendation: Always add the https:// at the beginning of a URL. If you don’t, WordPress will default to add https://URL.com/ in front of the link you typed in, which will result in broken links.

Code Editor

If you’re using HTML, you can make a link using the following code:

<a href=”url“>anchor text</a>

Replace the URL with your URL and the anchor text with the text you want the link to be attached to.

Prefer to watch tutorials? Here’s a video of these exact steps:

Making a Link Open in a New Tab

Hyperlinks naturally open in the same tab and window when you click on them.

But we don’t want our users leaving our site every time they click to read extra sources, like the statistics site where we got a population number.

To counter this, we can make links open in a new tab. That means our site will be open in a different tab on their computer or phone, so they can come back to it.

I recommend doing this for any external link. It’s industry standard for external links (any link not to your own domain) to open in a new tab or window.

I do not recommend it for internal links, but some bloggers choose to do it. I know many people like to read in a new tab, but users can right click and select that option if they prefer it. I find it annoying as a user when internal links open in new tabs. Ultimately, it’s your call to make.

To do this, create your link following the steps above. Then click on the link in your WordPress editor. This will bring up a display of the URL with a pencil icon beside it and a checkbox beneath it that says “Open in new tab.” It looks like this, but will have a URL where I just put “text” as a placeholder:

Simply toggle this checkbox to yes, and the link will open in a new tab. You can then click away from the display and it’ll minimize itself.

You can test this by previewing your post and then clicking on the link. If done correctly, it’ll take you to the link in a new tab.

Author’s Note: Link Whisper can automatically make all external links open in a new tab.

Code Editor

You can also do it with code by adding target=”_blank” and rel=”noreferrer noopener” to the link in the Code Editor of WordPress.

It would look like this:

<a href=”url” target=”_blank” rel=”noreferrer noopener”>anchor text</a>

Making a Link No Follow

No follow links are links that search engines can’t follow. The link is still visible to users and can send referral traffic, but it won’t send link juice as a backlink.

They are used for a few reasons:

1. Affiliate links
2. Sponsored links or sponsor posts linking to the sponsor
3. Linking to a competitor
4. User generated content in a forum or blog comments

As a blog owner, you’ll likely use no follow links for #1-3 above. If you have comments on, WordPress automatically makes them no follow (for any system running WordPress 1.5 and later).

Do NOT use them for internal links or links that you want Google to see.

To make a link no follow, click on the link you’ve created and click the pencil icon in the display. This will allow you to edit the link.

It brings up the options to make your link no follow, open in a new tab, and sponsored. Click the checkbox for no follow, and “save”. This will make your link no follow.

You can check this with the Ahrefs Chrome Extension (free). Select “Outgoing Links” from the left menu on the extension and then find the link to see if it says it’s do follow or no follow. If done correctly, it’ll have an X under the “do follow” column.

Code Editor

You can also do this with code by adding rel=”nofollow” to the link in the Code Editor.

It would look like this:

<a href=”url” rel=”nofollow”>anchor text</a>

Making a Link Sponsored

Sponsored links show Google when a link has been paid for or you could make money from it. This should be turned on for affiliate and sponsored posts/links.

Some people also do it for their checkout/cart pages, just to be safe, if they’re off the site.

To make a link sponsored, click on the link you made and click the pencil to edit it. Using the drop down from making the link no follow, select “Set to sponsored”. Save it.

This will make the link sponsored.

You can check this by inspecting the code of the link. Highlight the link, right click, and select “Inspect” in Chrome. This will bring up the coding of the link (or you can select “Edit as HTML” in WordPress. Look for the sponsored tag inside the link code.

Code Editor

Or you can do this manually by adding rel=”sponsored” to the link in the Code Editor.

It would look like this:

<a href=”url” rel=”sponsored”>anchor text</a>

Author’s Note: You can use all 3 elements at the same time. The link would look like this: <a href=”url” target=”_blank” rel=”noreferrer noopener nofollow sponsored”>anchor text</a>

Anchor Text Best Practices

When you add a link to text, you need to assign it “anchor text“. This is the text that is going to turn blue and have an underline when you add the link.

Anchor text should tell a user what the link is going to take them to – or allude to it.

It doesn’t need to say “this link will take you to my 50 things to do in Oklahoma blog post”. In fact, that’s bad anchor text.

Although it tells you where you’re going, it’s not very natural.

But “click here!” is also bad anchor text. Because it gives the audience no context whatsoever.

We want something in between.

Let’s use a blog post about things to do in Rome for example:

“The Trevi Fountain is one of the most beautiful spots in Rome, and it’s next to my favourite pizza place.”

I italicized and underlined the text “my favourite pizza place”. This would be the anchor text that would take the user to a blog post about the best pizza places in Rome.

While I didn’t tell the user exactly what was happening, they had context to understand what the link might take them to.

If I had instead used the same text, but linked to a blog post about best gelato, the user would be confused. Weren’t we just talking about pizza??

We don’t want anyone to be confused.

Giving them helpful anchor text tells them where they’re going – and tells Google.

I like to think of it as giving them a map, some snacks in the car, and a playlist for their day trip. Otherwise it’s the equivalent of blindfolding them and shoving them in the back of a van, where they have no idea where they’re going.

Obviously no one wants the second, so give them the first experience.

This goes for internal links, external links, and backlinks to your site.

How to Make an Image a Hyperlink

Sometimes we need to link from an image to another website.

This might be needed if you sourced the image from somewhere else and want to give credit (always ensure you have usage rights first! Linking an image does not allow you to use anyone’s image without permission), if you want to link to an affiliate that the image represents, or if the image is an infographic that someone could download.

To hyperlink an image, you will need to add an image to the post.

Click on the image and then select the “link” icon from the floating menu bar. This will open up a drop down to either search for the link or type it in. It looks like this:

You will also get the option to link a “Media File” or an “Attachment Page”.

A Media File links to the image’s URL and makes it full screen. The Attachment Page is a link to the page that the file is attached to (aka. the post you uploaded it to). I’ve never used either of these options.

I always search or type in the URL I need.

Hit enter and your link is good to go.

If you need to set it to open in a new tab or be no follow, you will need to click on the image, click on the link icon, and click on the pencil to edit the link.

This will open up a drop down that has the option to toggle “Open in new tab” and two text fields for “Link Rel” and “Link CSS Class”. Like this:

The “Link Rel” area is where you can add the codes we added before, such as “nofollow”, “sponsored”, “noreferrer”, and “noopener”. You don’t need to do the latter two if you toggle on the “Open in new tab” option. It will automatically add those.

The CSS option allows you to edit the look of the link. We don’t need to that here as it’s an image.

Hit enter or the arrow beside the link text and your changes will be saved.

Now you have a linked image!

You can check this by inspecting the code of the image. Right click on the image in Chrome and select “Inspect” from the drop down. This will show the code so you can ensure it has all the necessary elements added on.

Code Editor

To add an image and hyperlink it in the Code Editor, you will first need to upload it to your website’s Media Library.

Then you’ll need to copy the URL of that image.

The code you’ll use will look like this:

<figure class=”wp-block-image size-full”><a href=”URL” target=”_blank” rel=”noreferrer noopener nofollow sponsored”><img src=”Image URL” alt=”Alt text here” class=”wp-image-70436″/></a></figure>

Essentially the “Anchor Text” becomes the image URL code. I italicized the additional code you can add to make it open in a new tab, no follow, or sponsored. Remove any you don’t need.

Don’t forget to add alt text so your visually impaired readers can understand the image!

Conclusion

Now you know how to add links to your WordPress blog posts and pages!

You can add links to content on your site (internal links), other people’s content to back up your claims (external links), affiliates to make some money off recommendations, and products you sell.

Links can also be used to make jump links within the same post to help people navigate the content – but that’s more advanced.

Read More WordPress Blogging Tips

• 7 Worst WordPress Plugins You Should Delete Immediately
• Is a WordPress Blog Free?
• Essential WordPress SEO Plugins for Bloggers
• Blog Accessibility Checklist
• 60+ Best Blog Tools and Resources
• How to Add a Hyperlink in WordPress (Block and Code Editors)
• Lyrical Host Review: The #1 Host for Bloggers
• How to Create Jump Links in WordPress in 2 Steps
• How to Change a WordPress Theme: Step by Step Tutorial
• How to Export A List of All Blog Posts from WordPress Without a Plugin
• WebPageTest.org Tutorial: How to Find and Fix Site Speed Issues for Free
• How to Make an Author Box with Kadence for Better EEAT
• How to Use the Rank Math SEO Plugin: Step By Step Tutorial
• How to Change a Blog Post URL in WordPress Without Breaking Your Site
• When to Mark a Link “No Follow” for SEO
• When to Mark a Link as “Sponsored” for SEO

Like this post? Share it with others!