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



This article was written by David Hayes and originally published on WPShout.

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