Twenty Seventeen: Customise location of the Social Links Menu

[pento]

It's currently only possible to have the Social Links menu in the footer, which isn't ideal for infinite scroll sites. I'd like to be able to move it to a custom menu midget in the sidebar, but that changes the menu to display link text instead of social icons.

[sami.keijonen]

My first reaction is that we might need custom widget for this. But I really haven't looked any further.

If we need custom widget would that be ok in default theme?

[davidakennedy]

Thanks for the request @pento!

This is an interesting request, and something I'd consider. It can be accomplished with a child theme.

This doesn't work out of the box because the markup is different. Plus, the social navigation uses other special functions to display the SVG icons. So it's harder to pull this off, as it is now.

As @sami.keijonen mentions, a custom widget might be needed to do this. I wouldn't be for adding a custom widget for this. But maybe there's a way to do this more easily and with less code... I'd be open to ideas.

Also, I'd want to hear from @melchoyce about any necessary tweaks to the icon styles, like sizing, to make sure they would look good in the sidebar area.

[sami.keijonen]

I'd like to see this possible without custom widget. It would be nice feature for themes that want to support it. But I need to take closer look is that possible without changes in core.

There is a filter widget_nav_menu_args which can be a starting point.

function prefix_widget_social_menu( $nav_menu_args, $nav_menu, $args, $instance ) {
	if ( ! has_nav_menu( 'social' ) ) {
		return;
	}
	
	$nav_menu_args['theme_location'] = 'social';
	$nav_menu_args['link_before']    = '<span class="screen-reader-text">';
	$nav_menu_args['link_after']     = '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) );
	$nav_menu_args['menu_class']     = 'social-links-menu';
	$nav_menu_args['depth']          = 1;
	return $nav_menu_args;
}
add_filter( 'widget_nav_menu_args', 'prefix_widget_social_menu', 10, 4 );

But that messes with all widget nav menus. How can we check that menu assigned to widget nav menu is the same as assigned to social menu location?

[sami.keijonen]

How about like this:

function prefix_widget_social_menu( $nav_menu_args, $nav_menu, $args, $instance ) {
	$menu_location = 'social';
	$menu_name     = wp_get_nav_menu_object( get_nav_menu_locations( $menu_location )[ $menu_location ] )->name;

	if ( $nav_menu->name !== $menu_name || ! has_nav_menu( 'social' ) ) {
		return $nav_menu_args;
	}

	$nav_menu_args['theme_location'] = 'social';
	$nav_menu_args['link_before']    = '<span class="screen-reader-text">';
	$nav_menu_args['link_after']     = '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) );
	$nav_menu_args['menu_class']     = 'social-links-menu';
	$nav_menu_args['depth']          = 1;

	return $nav_menu_args;
}
add_filter( 'widget_nav_menu_args', 'prefix_widget_social_menu', 10, 4 );

[sami.keijonen]

Here is first patch what I had in mind. I'd like to see similar styles than in the footer.

Note that I haven't styled any of the dark or custom color schemes.

[melchoyce]

While I like the idea, I don't think this should apply to all custom widget menus, and I'm definitely not into the idea of making a custom widget just for this theme. Honestly, this seems like child theme territory to me. Is there a way we could make it easier for a child theme to accomplish? Or, could we add some CSS classes folks could add to their menu items that would turn the menu items into social icons?

[sami.keijonen]

@melchoyce: Check my patch.

• No need for custom widget.
• Works only for the same widget menu what you assign to social menu.
• Styling would be similar than in the footer.

[melchoyce]

Replying to sami.keijonen:

@melchoyce: Check my patch.

• No need for custom widget.
• Works only for the same widget menu what you assign to social menu.
• Styling would be similar than in the footer.

Cool, will try to get my test site running again. If you're adding code blocks, can you also add a description and screenshots in the future to make it easier to review? I'm not a developer and can't understand the code you posted, so I wasn't able to tell what it did.

[sami.keijonen]

Here is image where I have set the same menu in widget than in social menu in the footer.

​https://www.dropbox.com/s/qd6cfdy5qf9u8uf/twenty17-social-icons-widget.png?dl=0

[sami.keijonen]

@davidakennedy and @melchoyce: What do you think about this feature in Twenty17?

[davidakennedy]

@sami.keijonen Thanks for the work on this! I appreciate the creative thinking and coding.

Your currently proposed way is better than a custom widget... but it could be confusing to people. Right now, in order to make the menu appear in the widget area, you have to have it assigned to the Social Links Menu spot. Unless I'm missing something. Which means the menu will appear twice on sites. Which some people may not want. :)

All that said, I don't want to add more complexity to the theme, even if it's for a good feature like this. Not sure there's a way around that here. I'm a no on this in its current form, and probably leaning toward no overall. Happy to listen to other ideas or iterations.

[sami.keijonen]

No worries. Anyways here is the code for child themes (and for my own themes:)