I (like most everyone) have number of social profiles spread across the web. Facebook, Twitter, Instagram, GitHub, etc. I tend to think of my website as my “home” on the web- it’s the only place I have complete control over the content, design and functionality. But I like to link to these other sites so folks can find me and engage there. For most brands and companies this is an essential requirement for their website.

There’s a number of ways for users to add social links. The simplest is to use the default WordPress menus and have text links. These can be added in a menu area or a widget. There’s also a few plugins that have purpose built widgets or absolute positioned icons that can work with most any theme.

But in most cases icon links in the menu are the best option for linking. Icons don’t take up much space and they’re immediately identifiable.

If a theme doesn’t support social icons by default, there are a couple plugins that allow you to use icon sets by adding classes to menu. Font Awesome 4 Menus is one. But since this is such an essential feature for most sites, I think it’s great when the theme itself handles it. This ensures that the icons used also match the rest of the theme design.

Implementation Options

There’s no standard for how to support social links and I’ve seen it done a number of ways.

Theme Options

Perhaps the easiest for developers is to add options to the customizer. I’ve seen a number of themes that have a “Social Links” section and text inputs for each of the sites. If someone enters a url, the icon or image gets displayed in a predetermined spot. Developers control all the markup that gets outputted, so it’s dead simple to code out.

But there’s disadvantages with this approach as well. If the urls are saved as theme mods they won’t transfer easily to another theme. Also, users have no control over the order of the links.

Native Menus

Using the native WordPress menu system makes the most sense in my opinion. Menus are saved and available even if you switch themes (even though they might be displayed differently).

My favorite method of displaying social icons was developed by Justin Tadlock and explained in this great tutorial. It uses CSS to autodetect the link url and display the correct icon.

I used this method in the theme Summit for a dedicated social menu. However, developers only have control over the “a” tags via styling- so if you want to float or highlight the parent “li” it’s more of challenge. I find this method works best with a dedicated social menu (that only has social media links) rather than one that is mixed. (Though if other developers have made a mixed menu work well, please share!).

Class Names

Entering class names to indicate which icons to display for the menu item is more flexible. If the theme loads an entire font icon set (like Font Awesome), users aren’t limited to just the social icons that developers pre-select in the styles. They can also use the icons of their choice for “contact” or “home” menu items.

But what you gain in flexibility you lose in terms of ease of use. This methods requires really good documentation to explain how to show the class names and what class names can be used.

Prefilter Native Menus

The method I’m using in my latest theme (Gather) is to pre-filter the menu items via PHP and append the classes I need to the parent list items. I also add a “span” inside the “a” tag so I can easily hide text.

This gives a lot of options as a developer to style items as needed while also keeping it intuitive for users entering links. This approach can also combine this with the class names for users that want that additional flexibility.

Here’s an example of that. In this case I am the class “social” to the parent “li” for various urls, but you could also append classes like “twitter” of “facebook” to individual list items if needed:

/**
 * Append class "social" to specific off-site links
 *
 * @since Gather 0.1
 */
function gather_social_nav_class( $classes, $item ) {

    if ( 0 == $item->parent && 'custom' == $item->type) {

    	$url = parse_url( $item->url );

    	if ( !isset( $url['host'] ) ) {
	    	return $classes;
    	}

    	$base = str_replace( "www.", "", $url['host'] );

    	// @TODO Make this filterable
    	$social = array(
    		'behance.com',
    		'dribbble.com',
    		'facebook.com',
    		'flickr.com',
    		'github.com',
    		'linkedin.com',
    		'pinterest.com',
    		'plus.google.com',
    		'instagr.am',
    		'instagram.com',
    		'skype.com',
    		'spotify.com',
    		'tumblr.com',
    		'twitter.com',
    		'vimeo.com'
    	);

    	if ( in_array( $base, $social ) ) {
	    	$classes[] = 'social';
    	}

    }

    return $classes;

}
add_filter( 'nav_menu_css_class', 'gather_social_nav_class', 10, 2 );

The “spans” inside the link are added in the wp_nav_menu call:

<?php wp_nav_menu( array(
	'theme_location' => 'primary',
	'link_before' => '<span>',
	'link_after' => '</span>'
) ); ?>

This might be overkill for some folks, but I tried a number of styling methods and this is what worked best for me.

Wrap Up

Styling menus is hard. I think it’s the most difficult part of developing a WordPress theme. Adding social icons into the mix adds an even greater degree of complexity, but if done right users shouldn’t even notice. What do you think? Is it worth doing? Do you have a favorite approach?