Social Media Icons In Primary Menu

I helped a customer today who wanted to put Social Media icons into his primary menu inside header.

There are a few ways to do this, but here’s the solution I chose.

1. Add the Code Snippets plugin.

2. Add this code into a PHP snippet set to front end activation. This hooks the code at end of the primary menu. You’ll need to edit the links and you can experiment with other social networks.

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

function add_html_to_primary_menu($items, $args) {
    // Check if the current menu is the primary menu
    if ($args->theme_location == 'primary') {
        // Append your custom HTML
        $items .= '<span class="soc-social soc-social-align-left">
		<a href="https://facebook.com/" target="_blank" style="background-color:#4eb7e5;"><span class="fa fa-facebook"></span></a>
<a href="https://twitter.com" target="_blank" style="background-color:#4eb7e5;"><span class="fa fa-twitter"></span></a>
<a href="https://youtube.com" target="_blank" style="background-color:#4eb7e5;"><span class="fa fa-youtube-play"></span></a>
</span>';
    }
    return $items;
}

3. You may need to add this to Additional CSS to align the icons if you see they’re a bit off.

#navigation-aside .menu a .fa {
    margin-left: 0px;
}