Skip to content

Instantly share code, notes, and snippets.

@jekkilekki
Created September 22, 2015 09:12
Show Gist options
  • Save jekkilekki/26b78d954ce03c34352f to your computer and use it in GitHub Desktop.
Save jekkilekki/26b78d954ce03c34352f to your computer and use it in GitHub Desktop.
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
Copy link

ygspasov 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