It used to be, in the not-too-distant past, that messing with your affiliate links in WordPress was a fairly straightforward thing to do. To be fair, it’s currently not all that difficult right now in 2019 either. It’s just that Gutenberg (aka WordPress 5.0+) makes it seem hard.
In case you haven’t added a link in this new block system yet, let me cover that briefly first.
Let’s say you’ve added some text that you want to link to Wikipedia. I’m going to make the word “Wikipedia” at the end of the previous sentence into an actual link. By the time you read this, you’ll already know that. Self-references can be weird.
So, I highlight the text like this….
Notice the popup “menu” that appears at the upper left of that block. The last icon on the right is supposed to be some links in a chain. You click that icon to open another box in which you will paste the URL of the page you want to link to. Like this….
WordPress even nicely prompts you as to the purpose of the box by saying, “Paste URL or type to search”. If you start typing in the box, WP will search the other pages of your site in hopes of finding something relevant that you want to link to. We don’t want that in this case. We’re going to link to an external page.
The next thing to do is to actually go to Wikipedia in another tab or browser and grab the URL. After copying it and pasting it into the box, it looks like this….
So far, so good. Don’t leave that box without clicking the down-and-left arrow though. (That’s the symbol for “Return” or “Enter”, so hitting that key on your keyboard will do the same thing.) This action actually adds the URL and creates the link. The box now looks like this….
Note that the link icon is now highlighted and has changed slightly into a “break link” symbol. Clicking this icon would remove or break the link you just made. (Don’t do that, unless you made a mistake.)
The link box itself is now telling you the site to which you linked and is showing that clicking the link will take you away from the current site. If you need to change the link, you can edit it by clicking the pencil icon.
Unfortunately, WP doesn’t let us make a more complicated change just by clicking that edit pencil. Mainly Amazon affiliate marketers need to do what I’ll describe next: Add rel=”nofollow” to a link.
To add that text to a link tag, we need to see the HTML of the link. To get at the HTML, you can click anywhere in the same block as your link, so you can see the upper left menu again. Then click the 3 vertical dots, to bring up yet another menu, like this….
Other than “Remove Block”, I think the only menu item here that I’ve used to date is “Edit as HTML”. That’s the item to click now. When I did that up above, I got a mess that looks like this….
Actually, this looks much cleaner than an Amazon affiliate link, which has all sorts of other words and characters required by Amazon. You can see “Wikipedia” in the middle of the second line. It is surrounded by “anchor” tags. The “a” stands for “anchor”. You can also see “href” which is short for “hyperlink reference”. All of this together is the link we just created.
If this were an Amazon affiliate link that required the rel=”nofollow” attribute (as it’s called) to be added, I could type that text anywhere inside the opening anchor tag, like this….
I usually add such attributes at the end of the tag. That way I know where to look for it later…just in case. (This hardly ever happens though.)
Then I can just click the 3 dots again and return to editing visually. The popup menu changed like this….
That’s it. As I said, it really isn’t all that tough, it just feels that way, especially the first time or two you need to do it.
