Add Social Media Buttons

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)

  1. A self hosted WordPress website or blog (not WordPress.com)
  2. Icons for the social media buttons you want to use
  3. (I have a tutorial to show you how to make social media icons).
  4. Accounts with those social networking sites
  5. 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.

  1. Create or find your icons (I used two icons for each button to get a hover effect)
  2. Log in to your hosting server
  3. Go to Files & FTP > File Manger

01-file-manager

  1. Drill down to the theme image folder (wp-content > themes > YOUR THEME > images)

02-upload

  1. Click upload file
  2. 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

  1. Log in to WordPress
  2. Go to Appearance > menus

03-menu

  1. 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.

  1. If not already select, choose Social Media (Top Menu) from the drop down and click Select button.

select-top-menu

  1. Expand the Links section
  2. Add a URL (example: http://www.youtube.com/user/AoxoAcreative)
  3. Add Link Text (example: Youtube)

link-section

  1. Click Add to Menu button
  2. Drag and drop to position

Screen Shot 2014-02-25 at 6.49.13 PM

  1. Expand YouTube menu
  2. Tick Open in a new window/tab
  3. Type Youtube in the Navigation Label
  4. Type youtube in the CSS Classes

Screen Shot 2014-02-25 at 6.49.59 PM

  1. Click Save Menu

Open your website and look at the results.  You should see hyperlink text Youtube.

website-socialmedia

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

  1. Go to Appearance > Customize

customize

  1. Expand Theme Options

csspanel

  1. Place the following code into the custom CSS panel:
    1. Make sure the height and width values match those of your icon
    2. 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
    3. 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:

  1. In the menu set up
    1. replace the word youtube with google or linkedin, etc…
    2. use appropriate social network links
  1. CSS Code:
    1. use appropriate absolute path to icon
    2. 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:

  1. In the menu set up
    1. replace the word facebook with twitter, vimeo or rss
    2. use appropriate social network links
  1. CSS Code:
    1. use appropriate absolute path to icon
    2. 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.

Leave a Reply

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