Skip to main content

Use your own icon set for social, platform and share links

Free Intermediate

A theme with its own icon sprite can draw it everywhere Benecaster shows a platform icon — [benecaster_social_links], [benecaster_platform_links style="icons"], [benecaster_episode_share style="icons"] and [benecaster_rss_link]. The example maps a few of Benecaster’s platform slugs to the theme’s sprite ids and leaves the rest alone.

Return the default $svg for slugs you do not map. A custom social link a podcaster typed arrives here too.

$context says which shortcode is asking, so the share buttons can differ from the profile links — a filled style for episode_share only, for example.

Keep width and height on the SVG. With the base stylesheet turned off nothing else sizes it, and an unsized inline SVG renders at 300×150.

Code

<?php
add_filter( 'benecaster_platform_icon_svg', function ( string $svg, string $slug, string $context ): string {
    // Map Benecaster's slugs to the theme's sprite ids; keep Benecaster's icon for the rest.
    $map = [ 'twitter_x' => 'x', 'apple_podcasts' => 'apple-podcasts', 'rss' => 'feed' ];
    $id  = $map[ $slug ] ?? null;
    if ( null === $id ) {
        return $svg;
    }
    return sprintf(
        '<svg width="1em" height="1em" aria-hidden="true" focusable="false"><use href="%s"></use></svg>',
        esc_url( get_theme_file_uri( 'icons.svg' ) . '#' . $id )
    );
}, 10, 3 );

View on GitHub →

Hooks Used

Need this built rather than just documented? See our services →