wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog Tutorials Adding Social Media Links to WordPress Menu With CSS Classes

Tutorials

Adding Social Media Links to WordPress Menu With CSS Classes

Last updated on February 22, 2017
Posted on July 9, 2014

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.

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

3. Click “Screen Options” I would check everything.

Screen Options Menu paage
Screen Options Menu paage

3. On “Links” section;

Links - Facebook page URL and Link Text
Links – Facebook page URL and Link Text
Menu structure
Menu structure

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.

This menu has "Facebook page" as Title attribute
This menu has “Facebook page” as Title attribute

Repeat the step for Twitter and G+ link.

For twitter, I name the CSS class, as “twitter-menu”

Twitter menu option
Twitter menu option

Same with Google Plus, I give it to have the class as “googleplus-menu”

Google plus css class
Google plus CSS class

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.

button facebook google plus menu social social media twenty fourteen twentyfourteen twitter

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Unable to create directory wp-content/uploads in WordPress
→ How To Add YouTube Subscribe Button To WordPress Website

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • WordPress CDN setupWordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • WordPress Google maps in contact pageHow To Add Google Map in WordPress Contact Page
  • The configuration of YouTube Subscribe button in Google Developers web pageHow To Add YouTube Subscribe Button To WordPress Website
  • Unable to create directory wp-content/uploads in WordPress
  • Forward Twitter to Facebook Using App and Feedburner Tutorial
  • Kitchen Sink WordPress - Seem Simple But Important
  • Admin Pointers, Drag and Drop WordPress 3.3 Media Upload Features
  • How to sell ebook in a wordpress blog?
  • Check your site's performance using Google labs Page Speed
  • WordPress feed not updating |Feedburner Email not updating Fix

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept