If you use a WordPress website for your blog or business, you surely have noticed the latest changes.
Since the new update to version 5.0, WordPress rolled out a new editor called “Gutenberg“. The editor has been created to help us focusing more on the visual aspect then the text itself.
I was already testing it out this summer, when they’ve first launched it, and I loved it from the beginning.
This post contains affiliate links. If you decide to make a purchase, I will earn a small commission at no extra cost for you. Please read my disclosure policy for more info.
How to add an Affiliate Link in Gutenberg editor
Gutenberg editor, from now on is the default text editor in WordPress. A lot of people say that it’s difficult to understand and even made their experience worst.
For example they cannot put html code into the text as they were used to.
If you remember or if you’re still using the old editor, with the old one you just need to switch from “text” to “visual” in order to easily add html code to your content.
Since most of the affiliate links come as a html text, I’ve seen a lot of bloggers struggling with this too.
Trust me, is much more easy than before! And I’m going to show you how you can add an affiliate link in the new Gutenberg editor without going crazy 😛
Step 1
Get your affiliate link.
Of course, you need your affiliate link, so make sure to go and copy the html code of your affiliate link. For example, I’m copying this one from shareasale.com. This is an affiliate link that I’ve just added with the method I’m teaching you.
Step 2
Go back to WordPress.
And go where you want to add your affiliate link and click it. I will use the example of this post again, where I’ve clicked at the end of the sentence. At the top of the block, you’ll see a “quick menu” (like the picture on the left) and just click on three dots on the right.
Once you click on the three dots, a menu will appear where you can choose different options. To add the affiliate link, we need to choose “edit as HTML”.
Now it’s my favourite part 🙂
Step 3
As soon as you click on “edit as HTML”, some weird text will appear.
Don’t worry, it’s just the “behind the scenes” of what the posts shows. At this point, you need to paste the affiliate link into the text.
Make sure to place it before </p> as this code indicates the end of the paragraph, that in Gutenberg is also the end of the block. Of course you want to include the affiliate link in the block you are editing.
See the example below of the ShareASale affiliate link:
Once you’ve added the affiliate link or links you need in the paragraph, just click on the three dots again and select “edit visually”.
Step 4
Your affiliate link is ready and set up to be used 🙂
Haven’t started your own blog? Click here for a step-by-step guide to start a blog with WordPress.
Share your thoughts
I’d love to know how you’re finding Gutenberg so far. Are you using it or did you prefer to keep the Standard Editor? Let me know in the comment below.
Don’t forget that if you’d like to learn more about WordPress you can now book a 1-to-1 coaching session with me!
>>> Click here to see the available options and get 50% off on your first coaching session! <<<
