Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Social Menu Code from Justin Tadlock

Register Social menu in functions.php

register_nav_menus( array(
    'top'     => esc_html__( 'Top Menu', 'theme-slug' ),
    'social'  => esc_html__( 'Social Menu', 'theme-slug' ),
) );

Create menu in inc/template-tags.php

/**
 * Social media icon menu 
 * 
 * @link: http://justintadlock.com/archives/2013/08/14/social-nav-menus-part-2
 */
function gojoseon_social_menu() {
    if ( has_nav_menu( 'social' ) ) {
        wp_nav_menu(
                array(
                    'theme_location'    => 'social',
                    'container'         => 'div',
                    'container_id'      => 'menu-social',
                    'container_class'   => 'menu-social',
                    'menu_id'           => 'menu-social-items',
                    'menu_class'        => 'menu-items',
                    'depth'             => 1,
                    'link_before'       => '<span class="screen-reader-text">',
                    'link_after'        => '</span>',
                    'fallback_cb'       => '',
                )   
        );
    }
}

Style menu in style.css

/*--------------------------------------------------------------
5.2.X Social Menu
--------------------------------------------------------------*/
#menu-social-items a {
    color: #777;
}
#menu-social {
    z-index: 2;
}
#menu-social,
#menu-social-items {
    margin-left: 0px;
}
#menu-social-items li {
    padding: 5px;
    border: 1px solid #555;
    width: 4rem;
    text-align: center;
    font-size: 0.8em;
    position: relative;
}
#menu-social-items li:hover {
    background-color: #000;
}
.menu-social li a:before {
    display: inline-block;
    padding: 0 5px;
    vertical-align: top;
    font-family: 'FontAwesome';
    font-size: 1.4em;
    color: #777;
    -webkit-font-smoothing: antialiased;
}
.social-media-icons li:hover {
    background-color: #444;
}
.social-media-icons li:hover > a {
    color: #1ED3A4;
}

/* Menu uses Font Awesome icons */
.menu-social li a[href*="facebook.com"]::before { content: '\f09a'; }
.menu-social li a[href*="twitter.com"]::before { content: '\f099'; }
.menu-social li a[href*="github.com"]::before { content: '\f09b'; }
.menu-social li a[href*="linkedin.com"]::before { content: '\f0e1'; }
.menu-social li a[href*="wordpress.com"]::before, 
.menu-social li a[href*="wordpress.org"]::before { content: '\f19a'; }
.menu-social li a[href*="tumblr.com"]::before { content: '\f173'; }
.menu-social li a[href*="plus.google.com"]::before { content: '\f0d5'; }
.menu-social li a[href*="dribbble.com"]::before { content: '\f17d'; }
.menu-social li a[href*="instagram.com"]::before { content: '\f16d'; }
.menu-social li a[href*="vimeo.com"]::before { content: '\f194'; }
.menu-social li a[href*="youtube.com"]::before { content: '\f167'; }
.menu-social li a[href*="pinterest.com"]::before { content: '\f0d2'; }
.menu-social li a[href*="flickr.com"]::before { content: '\f16e'; }
.menu-social li a[href*="bitbucket.com"]::before { content: '\f171'; }
.menu-social li a[href*="digg.com"]::before { content: '\f1a6'; }
.menu-social li a[href*="reddit.com"]::before { content: '\f1a1'; }
.menu-social li a[href*="codepen.io"]::before { content: '\f1cb'; }
.menu-social li a[href*="behance.com"]::before { content: '\f1b4'; }
.menu-social li a[href*="slideshare.net"]::before { content: '\f1e7'; }
.menu-social li a[href*="/feed"]::before { content: '\f413'; }
.menu-social li a[href*="subscribe"]::before { content: '\f410'; }

.menu-social li a span::before {
    width: 20px;
    height: 20px;
    color: #999;
    border-radius: 20px;
}
@ygspasov

This comment has been minimized.

Copy link

commented Apr 2, 2016

Justin is great. I'm using this menu in all my new themes for WordPress.org.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.