jekkilekki/wp-social-menu.md

## wp-social-menu.md

      
    Raw
  

              wp-social-menu.md
            
          
    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;
}