There are myriad ways to add social networking icons to your WordPress powered website; including dozens (if not hundreds) of plugins, and even more themes which make social icons standard. But, as with many stock themes and plugins you are limited to the functionality of the application, and can rarely customize sharing options.

If you’re looking for a more custom social sharing application, you can easily add unique social media icons to your site, while keeping page load speed fast by using CSS sprites.

Why Use Sprites?

Every time you call an image with the CSS background-image selector an HTTP request is made. Put simply, the more HTTP requests you make the slower your site, and that can be disastrous for search engine rankings.

The answer to this problem is the CSS Sprite. In pop culture, a sprite is a beautiful fairy who has magical powers. While CSS may not be quite as exciting, the sprite could prove to be quite magical for your website.

A CSS sprite is a graphic which includes other graphics to be used (and re-used) on your site, so rather than using individual images each time you need to change a background with CSS, you use just one sprite. This reduces HTTP requests and keeps your site super fast.

An Example without CSS Sprites

A website area which typically uses multiple images is the social sharing area. This is the area where you place social media icons which link out to your social profiles. There are thousands of icon designs out there, many of them free to obtain and use.

Usually, a different icon is used for each profile; Twitter, Facebook, and YouTube, like so:

Hover over each image and you’ll see they are individual images located on the server. If you wanted to further customize the images and maybe change the color when the viewer hovers over the icon; you would need to include a separate image for each of those icons; yet more requests.

If you place those icons in your sidebar which loads every time a page loads, the HTTP requests can pile up quickly.

An Example with CSS Sprites

Rather than using separate images and separate HTTP requests, you can create a sprite with all of the images you need, and use the background-position selector to display the correct image where you need it.

Here’s a sample sprite with the same 3 social media icons, customized to look like golf balls. The sprite includes 6 icons in total; 3 in grayscale and 3 in full color to be used as a hover state. Rather than 6 separate images, we have only one. Hover over the icons and you’ll notice just one image located on the server.

Creating the Icon Box

In the beginning of this post, I mentioned we would not be using a plugin; some coding will be required here.

When we’re done, our social icon box will be created and placed at the top of our sidebar, and will look like this:

We’ll be creating a DIV to hold these icons, which link to social media profiles, and use our sprite to display the individual icons in the correct order. Finally, we’ll be creating a hover state, which shows each icon in full color when the viewer hovers over each link.

That div can be placed anywhere you want in your theme file. In our example we’ll be putting the icons at the top of the sidebar, inside the sidebar.php file.

1
2
3
4
5
6

<div>
<h3 class="social_header">Find us Online</h3>
<div><a class="facebook" href="http://facebook.com/">Facebook</a></div>
<div><a class="twitter" href="http://twitter.com/">Twitter</a></div>
<div><a class="youtube" href="http://youtube.com/">YouTube</a></div>
</div>

Editing the sidebar.php file only gets you half way there, like in the image shown below. You’ll notice, without styling, the icons aren’t icons at all – just text links, and they’re stacked on top of each other.

Styling the Icon Box Sprites

The power of the sprite is in the CSS styling. Using background image selectors we choose the sprite to be used. In this case, a file named “social_sprites.png” was placed in a folder named “sprites” which resided in the theme folder. We also use the background-position selector to determine which portion of the image shows for each link.

This code is placed in your style.css file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

#social{
width:188px;
height:90px;
margin:0px 0px 40px 0px;
padding: 0px;
}

#social .social_header {
margin-bottom: 10px;
}

#social a.facebook {
display:block;
float:left;
height:60px;
width:60px;
margin:0px;
text-indent:-9999px;
background-image:url('sprites/social_sprites.png');
background-position:0px -64px;
}

#social a:hover.facebook {
background-image:url('sprites/social_sprites.png');
background-position:0px 0px;
}

#social a.twitter {
display:block;
float:left;
height:60px;
width:60px;
margin-left:2px;
text-indent:-9999px;
background-image:url('sprites/social_sprites.png');
background-position:-64px -64px;
}

#social a:hover.twitter {
background-image:url('sprites/social_sprites.png');
background-position:-64px 0px;
}

#social a.youtube{
display:block;
float:left;
height:60px;
width:60px;
margin-left:2px;
text-indent:-9999px;
background-image:url('sprites/social_sprites.png');
background-position:-128px -64px;
}

#social a:hover.youtube {
background-image:url('sprites/social_sprites.png');
background-position:-128px 0px;
}

We define the height and width of the social icon box to start. This gives us room to include the icons underneath the H3 header which matches other widgets in the standard WordPress sidebar.

Then each of the three icons is defined. Facebook is first and it starts in the top left corner of the sprite with an X-position of 0 and  Y-position of 0. That is the full color image, which we’ll use as the hover state. You’ll notice in the code above, the Facebook hover state has a position of 0,0.The grayscale image is the normal state and that icon begins 64 pixels below the color image, thus the position selector for the normal Facebook icon is written as 0px -64px, corresponding to the x and y distance from top left.

With each successive icon we move to the right, increasing in x-position. Twitter hover is -64px 0px; and Twitter normal state is -64px -64px. For YouTube, the hover state is -128px 0px and normal is -128px -64px.

Again, the normal state is the gray-scale images, and the hover state is the full color. This could easily be reversed by changing the back ground position calls to allow for the top row of color images to be the normal state and the bottom row of gray-scale to be the hover.

Summary

Adding custom social media icons can be done with a few lines of code placed strategically in your theme’s sidebar files and then styled with custom CSS. Sprites are a great way to reduce HTTP requests and load on your server, and speed up page load time.

As always, the downside to editing the sidebar.php file directly is the changes could be lost upon WordPress upgrades or file over writes. To combat against this, rather than putting custom code inside the sidebar.php file, you could create a custom function and hook that into the call for sidebars, or create a custom widget that can be plugged directly into any sidebar area of your theme. The latter is more versatile and less theme dependent, and we’ll cover that in another article.

For a super custom solution, checkout the Buckets plugin, which allows custom content to be added to your site via shortcode.