Social media buttons in Canvas primary menu

Adding a social media buttons in the primary menu requires a bit of code. However, once you get that code in there, then it would be easy to set up your social media links. You can just add their URL address under Canvas Settings. Please check the tutorial below.

1. Login to your WP Dashboard and go to Appearance > Editor. In this tutorial we already created a child theme called “Canvas Child” and you can see two things under this Template. Click on “Theme Functions“, copy the codes below and paste it in the function code window. Click on Update File button to save it.


click and copy this function code:

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;
}

2. On the same window, click on Stylesheet, copy the codes below and paste it in the Stylesheet editor window. Click on Update File button to save it.


copy this css code for your stylesheet:

/* ************************** social in nav begin ******************************** */
.nav li.menu-item-type-social a {
    background-image: url("/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(/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;
}

ul.nav{width:100%!important;}

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

3. Now go to Canvas > Theme Options and click on Subscribe & Connect > Connect.


4. Type the URL of your social media address which is assigned to you. You can leave the other fields blank. Then click on Save All Changes.


5. View your website online and test the social media buttons by clicking each of them.