Skip to content
Jan’s Blog

Add Fediverse Icons to Jetpack

Add Fediverse—Mastodon, Pixelfed, et cetera—icons to Jetpack’s Social Menu module!

Jetpack’s default SVG icons do not include common Fediverse services. This simple WordPress plugin addresses that. (Requires Jetpack, and may not be supported by all themes.)

Installation

Simply head over to Plugins > Add New, search for add fediverse icons to jetpack, and install from there.

Usage Instructions

A custom link being edited on WordPress’s Menus screen
 Make sure you name the Custom Link after the relevant Fediverse platform.

When adding a Custom Link to your Social Menu, set its Navigation Label to the platform you’re linking to, e.g., “GNU Social,” “Peertube,” or “Mastodon.”

While Jetpack itself uses domain names, e.g., facebook.com, to decide which icon to apply, that approach obviously wouldn’t work here: federated platforms are hosted on all sorts of domains. What does work, though, is to name menu items after the applicable Fediverse platform.

Supported Platforms

Example Output

Screenshot of our example social menu before the changes
The ‘before’ shot.
Screenshot of our example social menu after the changes
And the end result.

Development and Issues

Development happens over at https://github.com/janboddez/add-fediverse-icons-to-jetpack. Feel free to file an issue, too, should you encounter one.

Miscellaneous

Twenty Twenty Compatibility

This plugin should work with any and all themes that rely on Jetpack’s social menu module.

The Twenty Twenty theme, however, is not one of those themes, and uses a slightly different approach to social menu icons. Nevertheless, two small changes will typically make it behave. (You’d still need Jetpack, though!)

PHP

Add the following to your (child) theme’s functions.php:

add_action( 'after_setup_theme', function() {
  // Get Jetpack to load its social menu functions.
  add_theme_support( 'jetpack-social-menu', 'svg' );
} );

if ( class_exists( 'Fediverse_Icons_Jetpack' ) ) :
  // Unhook the plugin's "default" callback.
  remove_filter( 'walker_nav_menu_start_el', array( Fediverse_Icons_Jetpack::get_instance(), 'apply_icon' ), 100 );

  // And add our own instead.
  add_filter( 'walker_nav_menu_start_el', function( $item_output, $item, $depth, $args ) {
    if ( ! function_exists( 'jetpack_social_menu_get_svg' ) ) {
      return $item_output;
    }

    $social_icons = array(
      'Diaspora'   => 'diaspora',
      'Friendica'  => 'friendica',
      'GNU Social' => 'gnu-social',
      'Mastodon'   => 'mastodon',
      'PeerTube'   => 'peertube',
      'Pixelfed'   => 'pixelfed',
    );

    if ( 'social' === $args->theme_location ) {
      // Twenty Twenty's social menu.
      foreach ( $social_icons as $attr => $value ) {
        if ( false !== stripos( $item_output, $attr )  ) {
          // Only for above Fediverse platforms, replace the icon
          // previously added by Twenty Twenty.
          $item_output = preg_replace(
            '@<svg(.+?)</svg>@i',
            jetpack_social_menu_get_svg( array( 'icon' => esc_attr( $value ) ) ),
            $item_output
          );
        }
      }
    }

    return $item_output;
  }, 100, 4 );
endif;

CSS

Add below CSS to your (child) theme’s style.css (or to the Customizer’s Additional CSS section):

.social-menu .icon-diaspora,
.social-menu .icon-friendica,
.social-menu .icon-gnu-social,
.social-menu .icon-mastodon,
.social-menu .icon-peertube,
.social-menu .icon-pixelfed {
  width: 24px;
  height: 24px;
}

Links