Justin Tadlock

Social media nav menus

One of the things I dislike most about WordPress themes with social media integration is that you have to input that information into some theme settings boxes. You also have to do this every time you switch themes. Most of the time, the theme is simply going to pull that info out and make an unordered list or menu of some type with it.

You know you’ve seen them. Tons of themes have these menus of social media icons.

This has always seemed like a poor option for social media menus to me. So, with my thinking cap on, I decided to see if I could tackle this problem. The solution I came up with is using the WordPress nav menu system and CSS attribute selectors.

I wanted to make this extremely easy for both the developer and the user. The main goals for the user were:

  • Only need enter the link information.
  • Save this data so that other themes can take advantage of it in the future.

From the developer perspective, we need:

  • A method for easily getting social media links.
  • A method for designing these links (e.g., icons) without a lot of work.

Creating the social media menu

If you’re a theme author, you should already be familiar with creating nav menus. If not, hop on over and read my nav menus guide.

The first order of business is creating a custom nav menu location so that the theme can showcase social media. How this fits into your theme is all up to you. Here’s the basic code I’m using to register the nav menu in my theme’s functions.php file.

add_action( 'init', 'my_register_menus' );

function my_register_menus() {
    register_nav_menu( 'social-media', _x( 'Social Media', 'nav menu location', 'example-textdomain' ) );
}

Then, I call the menu in my theme template as shown in the following code example.

<?php if ( has_nav_menu( 'social-media' ) ) {

    wp_nav_menu(
        array(
            'theme_location'  => 'social-media',
            'container'       => 'nav',
            'container_id'    => 'menu-social-media',
            'container_class' => 'menu',
            'menu_id'         => 'menu-social-media-items',
            'menu_class'      => 'menu-items',
            'depth'           => 1,
            'fallback_cb'     => '',
        )
    );
} ?>

This is all basic stuff and should be familiar to theme authors. This will create a new theme location called “Social Media” under the “Menus” screen in the WordPress admin. Users would be able to create a menu of social media links and assign the menu to that location.

Styling the social media menu

So, we’ve created a social media menu. Figuring out how to style each menu is the hard part. We could ask the user to input a custom class, but that puts extra burden on the user and makes your theme harder to use. This is where CSS attribute selectors are handy.

You could certainly go with PHP or another solution in this case, but I chose to use CSS for two reasons:

  • Well, CSS is simpler, of course.
  • Can more easily be updated with extra social media icons by DIY-users.

Because we know part of the URL for social media sites (e.g., facebook.com, twitter.com, etc.), we can work from there. For example, we need only use the following attribute selector to create styles for a link to Facebook:

a[href*="facebook.com"] {}

I’ll assume from this point that you have a sprite set up with all your social media icons that you want to use. That’s really up to you as the designer.

The following code snippet is a test I ran with an example theme and has styles for a generic menu item, Facebook, Google Plus, and Twitter.

#menu-social-media li a {
    display:     inline-block;
    width:       25px;
    height:      25px;
    text-indent: -99999em;
    background:  url( 'images/social-menu-sprite.png' );
}

#menu-social-media li a[href*="facebook.com"] {
    background-position: 0 -25px;
}

#menu-social-media li a[href*="plus.gooogle.com"] {
    background-position: 0 -50px;
}

#menu-social-media li a[href*="twitter.com"] {
    background-position: 0 -75px;
}

The end result

Here’s what the code above looks like after applying it to my test theme.

social-media-menu

You are, of course, free to run wild with this and come up with a much better design. And, feel free to share any solutions you’ve come up with yourself in the comments.