How to Use the Gutenberg Editor to Add a Link

How to Use the Gutenberg Editor to Add a Link • WPShout

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:

3 Ways to Use the WordPress Gutenberg Editor to Add a Link

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.

2. Highlight You Anchor Text & Click the Link Icon in the Pop Up Menu

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.

3. The Super-Awesome Magic Trick in WordPress to Add a Link

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!

Keep reading the article at WPShout. The article was originally written by David Hayes on 2020-05-14 13:47:27.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

Your email address will not be published. Required fields are marked *

Show Your ❤️ Love! Like Us
Scroll to Top