With the release of Jetpack 3.9 last month, we introduced a new tool available for all theme developers: Social Menus. It allows site owners to create a new menu location which is used to display links to Social Media Profiles.
Adding Support
Theme developers can add support for a Social Menu by following these three simple steps.
Step 1: Declare support in a function hooked to after_setup_theme.
add_theme_support( 'jetpack-social-menu' );
Step 2: Create a new function to avoid fatal errors if Jetpack isn’t activated.
function themename_social_menu() { if ( ! function_exists( 'jetpack_social_menu' ) ) { return; } else { jetpack_social_menu(); } }
Step 3: Use the function created in step 2 to output the menu where you would like it displayed in the theme.
themename_social_menu();
Styling
Once you’ve created a menu, Jetpack will automatically enqueue a basic stylesheet to style each one of the menu items, thanks to Genericons. You don’t have to do anything else!
This has been extremely helpful!
Funny thing is, I looked up how the theme called “Sapor” (by Auttomatic) was implementing the social menu because I loved how it saved you the hassle of styling everything yourself. Turns it loads its own Genericons stylesheet, so I took note and started doing the same.
A couple of days later, I find out about Jetpack’s own social menu option…
I couldn’t say I wasted my time, because it’s always important to learn how things are done manually, but it was certainly funny. Now I’m saving time by just adding theme support for this feature.