Move Social Links to a Menu

[chipbennett]

H/T @justintadlock

http://justintadlock.com/archives/2013/08/14/social-nav-menus-part-2

Much better implementation, eliminates several Theme options, and enables portability of social links among Themes.

[justintadlock]

Nice to see you using that implementation. If you need any help with it, let me know. Or, if you come up with anything extra to add, I'd love to check it out.

[chipbennett]

It should be very straight-forward to port to this implementation, since I already use Genericons. I have a custom Widget that displays the list; I just have to change that to a wp_nav_menu() output.

The main thing I need to look into is the core menu Widget, to make sure the Genericon classes apply properly if the "social" menu is displayed.

[chipbennett]

@justintadlock I finally had a chance to sit down and implement this. You can see the old and new implementation side-by-side (er, new-above-old): http://design.chipbennett.net/oenology/blog/

I think it looks good!

[justintadlock]

Nice!

[chipbennett]

Also, I added the missing Skype, Reddit, StumbleUpon, and Flickr icons. Any color suggestions for those? I've just got them as my default link color for now: #5588aa

[justintadlock]

This code is from my latest theme, which has colors for all of those:

#menu-social li a[href*="flickr.com"]::before      { content: '\f211'; color: #ff0084; }
#menu-social li a[href*="reddit.com"]::before      { content: '\f222'; color: #336699; }
#menu-social li a[href*="skype.com"]::before,
#menu-social li a[href*="skype:"]::before          { content: '\f220'; color: #00aff0; }
#menu-social li a[href*="stumbleupon.com"]::before { content: '\f223'; color: #ff2618; }

Those are sitting on a dark gray-black background in my theme.

The Skype code supports the href="skype:skype_number" calling format, but I don't think WP nav menus support that format.

[chipbennett]

Nice; thanks. Do you have a color for Polldaddy? I'll have to look into a way to get custom nav menus to support href="skype_number".

[chipbennett]

Okay, I've tracked down the sanitization. The custom link menu item URL is getting passed through esc_url_raw(). Is there any way to use the clean_url filter to allow a href="skype:username?call" url?

[chipbennett]

I think the easiest solution might be to filter kses_allowed_protocols. Let me give that a try.

[chipbennett]

Bingo!

/**
 * Add skype: and callto: to allowed protocols
 *
 * Filter kses_allowed_protocols to add skype: and callto: as 
 * valid href protocols. This is needed to allow Skype profile 
 * links in the Social nav menu.
 */
function oenology_filter_kses_allowed_protocols( $protocols ) {
    return array_merge( $protocols, array( 'skype', 'callto' ) );
}
add_filter( 'kses_allowed_protocols', 'oenology_filter_kses_allowed_protocols' );

Works: http://design.chipbennett.net/oenology/blog/

[justintadlock]

Nice work with the Skype number. That will come in handy.

Do you have a color for Polldaddy?

This is what I'm using: #bc0b0b. I think I pulled that from their header.