Social Media Icons In Primary Menu

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

Example

 

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

How to create a floating jumplink menu widget

Next Post

How to change background on one menu item in navbar

Leave a Reply

Your email address will not be published. Required fields are marked *