How to add a Mastodon icon to your WordPress site

Following yesterday’s post, I’d like to do a bit of a follow-up. Sometimes you “just” want to add a Mastodon icon to your site, linking to your Mastodon profile:

• My Fediverse profile (not really on Mastodon 😛)

I have one just like that on my home page, alongside my other Social Media links.

In this post, I’ll cover 3 different ways to add such an icon to your site.

Use the Social Icons block

In the example above, I used the Social Icons block that comes with WordPress itself. The block can be inserted in any post or page. If you use a Block theme, you can add it anywhere on your site:

This is probably the easiest way to go about it; you do not even need a plugin!

However, you may not be using a Block theme yet. You could still use the Social Icons block in a widget:

---

The next 2 options are useful if you use classic themes and need multiple social media icons.

Use a legacy widget with classic widgets

Maybe you’re not quite ready to use blocks in your widget areas. If you use the Classic Widgets plugin and the Jetpack plugin, you’ll have access to the Social Icons Widget:

This works well, but it only supports the most popular Mastodon instances by default. If you’d like it to support your custom instance as well, you’ll want to add the following to your theme’s functions.php file:

add_filter(
	'jetpack_mastodon_instance_list',
	function ( $mastodon_instance_list ) {
		$mastodon_instance_list[] = 'fedi.jeremy.hu';
		return $mastodon_instance_list;
	}
);

Of course, you’ll want to use your own instance host in there instead of mine. :) This snippet will also be useful for the next method as well:

Use a Social Menu

Sometimes a widget area may not be the right place for your social media icons. You may just need a list of icons to appear in a menu in your footer or header, for example.

If you use the Jetpack plugin, you can use its Social Menu feature.

Start by declaring support for the feature by adding the following to your theme’s functions.php file:

/**
 * Add support for Jetpack's Social Menu feature.
 *
 * @see https://jetpack.com/support/social-menu/
 */
add_action(
	'after_setup_theme',
	function () {
		add_theme_support( 'jetpack-social-menu', 'svg' );
	}
);

Once you’ve added this, you will be able to go to Appearance > Menus and create a new menu:

At this point, all what’s left is displaying that menu in our theme. You can edit your theme files and add the following anywhere you’d like:

<?php
if ( function_exists( 'jetpack_social_menu' ) ) {
    jetpack_social_menu();
}
?>

That’s all we need to have a menu on the frontend of our site:

---

There are of course dozens of other ways to do this, from other plugins to image blocks, but those were 3. Let me know if you have other ideas / comments! :)