Skip to content

How to Use the Gutenberg Editor to Add a Link

Learn how to add hyperlink to WordPress content with this quick tutorial.

Maybe you want to add a link for the sake of sharing a cool recipe you just found, or a great guide you found to building airplane engines. Whatever it is, it is links that make that internet. In this little Quick Guide we’ll cover how you can add a link in the new Gutenberg (block) editor. There are a variety of ways, as the video highlights:

1. Add a Button Block

Learning how to create a link button in WordPress is very easy. All you need to do is navigate to “Add a New Block” and select the Button Block. From here, you can add your preferred anchor text, then simply copy and paste your destination URL and click save. This is a great solution if you want a big, bold link in your WordPress page or post. Some call this a Call to Action or CTA.

Use your mouse to select the text that you would like to add a link to and a nifty pop up menu will appear. This menu allows you to change the tag of the text, how its justified, and some formatting, such as bold and italics. The one you want is the little link icon, third from the right. Click the link and copy and paste your target URL. Voila! You’ve now used WordPress to link to another page.

Pro tip: If you’d like the link to open in a new tab, you can toggle that feature on in the window that follows. You can revise or modify the target link in this window, too.

This shortcut to add a link in WordPress is very similar to strategy #2, but with some key differences. Your first step is to copy the destination URL to your clipboard (this is most easily done with Ctrl+C or Command+C). Next, highlight your anchor text, and rather than clicking through the menu and pasting your URL, simply bypass the menu and hit Command+V or Ctrl+V right away.

Instantly, your highlighted text will link to another page, like magic!

Video Transcript

Alright, so I wanted to make a quick video for all of my friends out in Youtube land about how to hyperlink in WordPress. This should be a pretty short little quick guide, where we’ll just understand how to add a link within the Gutenberg Editor—The Gutenberg block editor. Slo I’ve just drafted these five paragraphs of Lorem Ipsum and they need to link to something in it. Let’s say the search results from Duck Duck Go for that, let’s put it that way.

So how do I link that? There are tons and tons of ways to do this, it depends a little on the result I want. One might be that I actually want to have the button block. If I wanna, say, “The search results,” I could use the button block and have it linked by going like that. So that should work. If I wanted a big link, a big CTA to something, I might use this button.

Another thing I can do to master how to link pages in WordPress  if I just highlight a part of the post and click the “link” icon I can paste in the link right there. So, now that text will go to my link destination.

And  the last one I want to show you for how to use Gutenberg editor to add a link is actually my personal favorite. WordPress has had this feature for five years now, but I just never get tired of it. If I highlight some text in a paragraph block and I’ve got text in my clipboard (Command or Control+C), then I can just paste on top of highlighted text selection that link. WordPress handles the whole thing, like magic. So if I paste over the text, you can see that that has just become linked. All I did was hit Command V after highlighting what I wanted to become that link and WordPress handled all the rest.

Let’s confirm that all of my links work. I’ll save my draft and hit preview. The first test leads to the search result page, the button links to the page, and the third example likewise links to my target destination.

So, all three of these strategies have the ability to give me a link within this block editor. Personally, IO really love the buttons that are specific to the blocks, but the pasting without having to even engage an interface is the most gorgeous thing to me, as a super-hyper-efficient keyboard maestro person. So that’s my favorite. Let me know what you like about my video on using the WordPress Gutenberg editor to add a link. Thank you for watching! Cheers!

Yay! 🎉 You made it to the end of the article!
David Hayes

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...