How To: Verify Your WordPress Site on Mastodon

UPDATE: TIL, This code block is not needed. WordPress hides access to this rel attribute under the Screen Options drop- down under the “advanced menu properties” checkbox called Link Relationship (XFN). Better instructions are available here. For posterity, the post as published:


I recently set up a Mastodon account (I’m @jb@hachyderm.io — follow me)!

I noticed the “edit profile” page offers an easy way to verify that you control URLs that I add to my profile:

A screenshot of the Verification helper in my Mastodon profile edit settings page

This is just a hyperlink (a href tag) that includes a rel="me" attribute.

I wanted to add a link to my new social media presence anyway, so I added a “Custom Link” to my “Social Links Menu” in the WordPress Customizer. For better or worse, the UI does not let me customize the HTML that these links end up printing on the page:

The Custom Links input screen in the WordPress Customizer
Only URL and Link Text are editable :-/

I was able to quickly add the requisite attribute with this code snippet in a custom plugin:

add_filter( 'nav_menu_link_attributes', function ( $atts, $menu_item ) {
        if ( 'https://hachyderm.io/@jb' !== $menu_item->url ) {
                return $atts;
        }

        $atts['rel'] = 'me';
        return $atts;
}, 10, 2 );

Obviously, replace the https://hachyderm.io/@jb in the above with the link to your Mastodon profile.

I reloaded my site and confirmed by viewing the page source / inspecting the link element that the attribute was added.

Once this was in place, I went back to the Mastodon Edit Profile Page and clicked “Save Changes.”

Now, my URL shows as “verified!”

I might set up my own instance eventually, since it seems pretty easy to move and I like to tinker 🙂

So far, I’m pretty impressed with the Mastodon new user experience!