WordPress features has been improved in every versions they are updated. So are the menu or navigation functionality.
In the past, we need to code our theme to display some social media links, but now we can even add the CSS classes on those menus, and link them to our social media profiles or page.
Today, we are going to add media links to our menu using Twenty Fourteen theme. This will work to all the themes, as long as the theme is compatible with recent WP version I am using in this post (v.3.9.1)
In the video I even mentioned that there are many ways, you can add the CSS social media buttons, then with images, and with Genericons, which is already built-in with Twenty Fourteen. Not all theme have Genericons pre-embedded though.
This method is the best one in my opinion, since it won’t need any images, means, less resources to be loaded in your website.
The second choice, will be, having Genericons, same with the CSS based social media links, it won’t disturb the loading speed of your website.
What do we need before we start it? I strongly suggest you to create child theme of it.
How do we add Social Media Links to WordPress Menu?
We actually will add the 3 “Links” to the menu for this example, pointed to your Facebook page, G+ (Google Plus), and Twitter in this post.
Then, we add the CSS classes to them, so we can modify the colors style of the link, and the hover state with basic css modification.
Of course, you can add other social media links, like YouTube, vimeo, LinkedIn, etc with this simple method.
How to Remove Twenty Fourteen Author Name or Link
If you have already the child theme, let’s start 🙂
1. In dashboard, go to Appearance then, “Menus“.
2. Create or edit your menu.
3. Click “Screen Options” I would check everything.
3. On “Links” section;
For Facebook, click the tab, and enter your Facebook page URL in “URL” box, and “Facebook” for the Link Text. Click “Add to Menu“.
Then in “Menu Structure” section on the right, click “Facebook” – “Custom” arrow icon. You will see these option.
The most important here is the “CSS classes” because we want to style our menus.
I name it as “facebook-menu” class.
For the title attribute, I typed, “Facebook page”. You can also leave it empty, because this is the text when we hover, it will show the menu’s title attribute.
Repeat the step for Twitter and G+ link.
For twitter, I name the CSS class, as “twitter-menu”
Same with Google Plus, I give it to have the class as “googleplus-menu”
Don’t forget to click “Save Menu” button whenever you add these links.
4. In the child theme’s style.css add these css code to style the hover and the menu background color. Click “Update File“.
/*Adding Social Menu colors on Top navigation*/
.facebook-menu a {background-color:#3B5999;}
.facebook-menu a:hover {background-color:#305196!important;}
.googleplus-menu a {background-color:#D44332;}
.googleplus-menu a:hover {background-color:#DE6B5D!important;}
.twitter-menu a {background-color:#00ACED;}
.twitter-menu a:hover {background-color:#5AC1E8!important;}You can replace the color with colorpicker.com if you don’t have color picker addon.