How to add relationship attributes to links in a WordPress menu

May 18, 2020 , I learned...

Adding links to a WordPress menu can be done directly on the Appearance → Menus screen. Easy breezy.

But I’ve been working on adding Webmentions to this site and one of the requirements is to link to cross-link between the site and social media profiles. For example, a link to Twitter should look like this:

a rel="me" href="https://twitter.com/geoffreygraham"

The problem? I wasn’t sure how to get that relationship attribute into the mix using the WordPress visual menu editor. I thought I’d have to resort to JavaScript or possibly even a (gulp) hard-coded solution.

It’s actually much easier than that because WordPress supports it right out of the box. I just didn’t realize it because it was buried in the Screen Options.

Screenshot. The screen options menu expanded on the top of the Appearance Menus screen.
Gosh darn, look at all those possible options!

Good thing I checked there before going any further! Now my social links are using the attribute the way I had hoped they would.

Screenshot. Inspecting the Twitter link in my site menu with DevTools open and showing the rel="me" attribute on the link.
Happy Geoff. 😌