You see it in lots of themes, but it's not all that easy to do ... unless you know how.

You see it in lots of themes, but it’s not all that easy to do … unless you know how.

Adding social media buttons in the main navigation area requires a bit of code, here’s how.

Once you get that code in there, then it’s extra easy to set up your social media links–it’s right there in the Canvas settings under Connect.

In fact, it’s even better than previous methods of creating (link) menu items in the standard WP menu system. Using this method, the code pulls the social media links from your profiles from within Canvas’s theme options: Theme Options –> Subscribe & Connect -> Connect. Fill in the URLs for your social media platforms and you’re all set.

You might have already filled these for use elsewhere on your site. Now they'll work automatically in your main navigation, too.

You might have already filled these for use elsewhere on your site. Now they’ll work automatically in your main navigation, too.

This covers:

  • Twitter
  • Facebook
  • YouTube
  • Flickr
  • LinkedIn
  • Delicious
  • Google+
  • Dribbble
  • Instagram
  • Vimeo
  • Pinterest

Here’s the code you’ll need in your functions.php file:

add_filter( 'wp_nav_menu_items', 'woo_custom_add_sociallink_navitems', 10, 2 );

function woo_custom_add_sociallink_navitems ( $items, $args ) {
    global $woo_options;

    if ( $args->theme_location == 'primary-menu' ) {

        $template_directory = get_template_directory_uri();

        $profiles = array(
                        'twitter' => __( 'Follow us on Twitter' , 'woothemes' ),
                        'facebook' => __( 'Connect on Facebook' , 'woothemes' ),
                        'youtube' => __( 'Watch on YouTube' , 'woothemes' ),
                        'flickr' => __( 'See photos on Flickr' , 'woothemes' ),
                        'linkedin' => __( 'Connect on LinkedIn' , 'woothemes' ),
                        'delicious' => __( 'Discover on Delicious' , 'woothemes' ),
                        'googleplus' => __( 'View Google+ profile' , 'woothemes' )
                    );

        foreach ( $profiles as $key => $text ) {
            if ( isset( $woo_options
['woo_connect_' . $key] ) && $woo_options['woo_connect_' . $key] != '' ) { $class = 'menu-item menu-item-type-social menu-item-object-social menu-item-' . $key; $items .= ' <li id="menu-item-' . $key . '" class="' . $class . '">'; $items .= '<a class="' . $key .'" href="' . $woo_options['woo_connect_' . $key] . '" title="' . esc_attr( $text ) . '">'; $items .= '</a></li> ' . " "; } } } return $items; } // End woo_custom_add_sociallink_navitems()

Here’s some CSS you can add to gussy it up:

[box type=”alert”]Note: see below where I have “yourdomain.com.” For now, you’ll need to change that to your domain until I figure out how to get it from the child theme to the proper Canvas folder. [/box] 
/* ************************** social in nav begin ******************************** */
.nav li.menu-item-type-social a {
	background-image: url("http://yourdomain.com/launch/wp-content/themes/canvas/images/ico-subscribe-social.png");
	background-repeat: no-repeat;
	display: inline-block;
	height: 28px;
	width: 30px;
}

.nav li.menu-item-type-social a {
	-moz-transition: all .2s ease-in-out 0;
	opacity: .8;
}

.nav li.menu-item-type-social a {
	opacity: .8;
	filter: alpha(opacity=80);
	-webkit-transition: all ease-in-out .2s;
	-moz-transition: all ease-in-out .2s;
	-ms-transition: all ease-in-out .2s;
	-o-transition: all ease-in-out .2s;
	transition: all ease-in-out .2s;
	padding: 0 !important;
}

.nav li.menu-item-type-social a:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	background-color: transparent;
}

.nav li.menu-item-type-social a {
	display: inline-block;
	height: 28px;
	width: 30px;
	background-image: url(http://yourdomain.com/launch/wp-content/themes/canvas/images/ico-subscribe-social.png) !important;
	background-repeat: no-repeat;
}

.nav li.menu-item-type-social a.subscribe {
	background-position: 0 0 !important;
}

.nav li.menu-item-type-social a.twitter {
	background-position: -30px 0 !important;
}

.nav li.menu-item-type-social a.facebook {
	background-position: -60px 0 !important;
}

.nav li.menu-item-type-social a.youtube {
	background-position: -90px 0 !important;
}

.nav li.menu-item-type-social a.flickr {
	background-position: -120px 0 !important;
}

.nav li.menu-item-type-social a.linkedin {
	background-position: -150px 0 !important;
}

.nav li.menu-item-type-social a.delicious {
	background-position: -180px 0 !important;
}

.nav li.menu-item-type-social a.googleplus {
	background-position: -210px 0 !important;
}

#navigation ul.nav > li.menu-item-type-social {
	margin: 7px 0 0 3px;
	border-right: 0 solid #E6E6E6;
}

/* ************************** social in nav end ******************************** */