Add Social Media Buttons
Introduction
This tutorial explains how to add social media buttons to your WordPress theme without using a plugin. Many people believe too many plugins can cause your WordPress website (or blog) to slow down. That’s why I learned how to do it and now I can share the knowledge with you.
My WordPress Theme
Although I am working with a specific theme called Albedo by Graph Paper Press, you may still gain enough insight to apply the method to your own WordPress theme.
The Albedo theme only provides a few built in icons (i.e. Facebook, Twitter, RSS, etc…) for the top menu. I sometimes refer to the top menu as the social media menu. Anyway, we need more than what the theme offers. Thankfully, you can create hyperlink text to add other items like email, youtube, linkedin, etc… Then you go a step further and replace the text with your own icons.
Things you will need
(I know this is obvious but I am laying out anyway)
- A self hosted WordPress website or blog (not WordPress.com)
- Icons for the social media buttons you want to use
- (I have a tutorial to show you how to make social media icons).
- Accounts with those social networking sites
- Access to your hosting server to upload the icons
How to add Social Media Buttons to WordPress
Before you begin, please back up your site. It’s good idea to be able to restore if something doesn’t turn out as you expected.
Add Social Media Icons
I use Dreamweaver, but I’ll show you how to do it direct from your hosting server.
- Create or find your icons (I used two icons for each button to get a hover effect)
- Log in to your hosting server
- Go to Files & FTP > File Manger
- Drill down to the theme image folder (wp-content > themes > YOUR THEME > images)
- Click upload file
- Follow the on screen instructions and repeat for each icon
Dreamweaver allows me to upload all the icons at once. It’s a huge time saver.
Create Social Media Menu in WordPress
- Log in to WordPress
- Go to Appearance > menus
- Click on the Screen Options link at the top right of the page and make sure CSS Classes has a tick mark
I already set up my menu structure in the Albedo Theme. I named my top menu Social Media.
- If not already select, choose Social Media (Top Menu) from the drop down and click Select button.
- Expand the Links section
- Add a URL (example: http://www.youtube.com/user/AoxoAcreative)
- Add Link Text (example: Youtube)
- Click Add to Menu button
- Drag and drop to position
- Expand YouTube menu
- Tick Open in a new window/tab
- Type Youtube in the Navigation Label
- Type youtube in the CSS Classes
- Click Save Menu
Open your website and look at the results. You should see hyperlink text Youtube.
Note: In Albedo you will see the default icons for Facebook, Twitter, Vimeo, and RSS if you create those menus.
Replace Text with icon image
- Go to Appearance > Customize
- Expand Theme Options
- Place the following code into the custom CSS panel:
- Make sure the height and width values match those of your icon
- Use the absolute path to you image. If it’s in your images folder, it will probably be something like:
http://yourdomain.com/wp-content/themes/NAME OF YOUR THEME/images/NAME OF YOUR IMAGE.png - If you are not using a hover effect take out the last line
Code:
li.youtube a {background: url(ABSOLUTE PATH OF ICON HERE) no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
float: left;
padding: 0px;
height: 28px;
width: 29px;}
li.youtube a:hover {background: url(ABSOLUTE PATH TO HOVER VERSION OF ICON HERE) no-repeat; }
In this example above, I replaced the youtube text (li.youtube).
To repeat for google, linkedin, etc… follow the same step except:
- In the menu set up
- replace the word youtube with google or linkedin, etc…
- use appropriate social network links
- CSS Code:
- use appropriate absolute path to icon
- replace li.youtube with li.google or li.linkedin, etc..
Replace default icon(s) with your own
For consistency you may want to replace Albedo social media image (facebook for example) with your own.
Place the following code into the custom CSS panel (if you are not using a hover effect take out the last line):
li.facebook a {background: url(ABSOLUTE PATH TO ICON HERE) no-repeat !important;
text-indent: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
float: left !important;
padding: 0px !important;
height: 28px !important;
width: 29px !important;}
li.facebook a:hover {background: url(ABSOLUTE PATH TO HOVER VERSION OF ICON HERE) no-repeat !important;}
To repeat for Twitter, Vimeo, and RSS … follow the same step except:
- In the menu set up
- replace the word facebook with twitter, vimeo or rss
- use appropriate social network links
- CSS Code:
- use appropriate absolute path to icon
- replace li.facebook with li.twitter, li.vimeo or li.rss
Related WordPress Hints
The link to us for RSS menu is typically: http://yoursite.com/feed/
To adjust the space between the social media buttons (icons), place the following code into the custom CSS panel (adjust px as necessary):
ul.menu-top-right li { margin-left: 20px; }
Did you find this post useful?
Please share it with your friends on twitter and Facebook using the social share buttons.
Chris Hooper
Chris "AoxoA" Hooper is a photographer, retoucher, and blogger based in Austin, TX. As a photographer, he specializes in music, lifestyle, concert, and portraits. He enjoys the great outdoors with his lovely wife and amazing son.