Having your blog or web site ‘connected’ to popular social networks is very common nowadays. It’s so effective to boast your online existence to your audience and you can engage to them effectively if they’re are connected to you. For those who enjoy customizing WordPress themes and are okay with a bit of PHP/HTML tweaking, you can try out this tutorial. We’re taking Arthemia as an example but this is pretty much applicable to any theme. It’s very easy; with a few simple steps you can add social network icons to your theme without needing to install any plugin.

Step 1: Google a good-looking pack of social network icons

There are loads of free social network icons available online and you can choose any ones you like. This is actually the hardest part of the tutorial and you might spend a large portion of your time choosing the icons because they are all so beautiful and hard to pick. In this tutorial, we’re going to use the ones from FreeIconsDownload.com. You can download them here.

Step 2: Extract the package and cherry-pick the icons

After you have downloaded the icon package, you need to extract it to your local drive and choose the particular icons you want to use. The package that we’re using here contains more than 50 social network icons and let’s say we’re going to use the ones for Facebook, Twitter , Flickr, MySpace, Yahoo, and Youtube.

Step 3: Upload the files with an FTP client

Although you may be able to upload files to your server using a web-based file manager from your hosting company, we simply recommend using an FTP Client (e.g FileZilla) to make things simpler. You need to know your FTP host server address and it usually looks like ftp.yourdomain.com. You also need to enter your user name and password to be able to access the server. Usually they are the same with the ones you usually use to log in to your web hosting contol panel.

Find the folder where your WordPress theme is located. In this case, it’s /wp-content/themes/arthemia-premium/. Find a sub-folder named “images” and upload the icon files to that folder.

Step 4: Log in to your WordPress Dashboard

In case you don’t know where that is, the URL is normally http://yourdomain.com/wp-admin. We’re about to do some HTML changes in some PHP file here so after you’re logged in, go to Appearance > Editor > sidebar.php.

Step 5: Add these HTML codes and modify as necessary

Now we’re going to add some HTML codes that fetch the icon files that you’ve uploaded already and add hyperlinks so they’re linked to your social network pages when clicked. Find the line: <div id="sidebar"> and paste these codes after that line:

1
2
3
4
5
6
7
8
9

<div class="socnet">
	<h3>Social Networks</h3>
	<a href="http://facebook.com"><img src="<?php bloginfo('template_url'); ?>/images/facebook_32.png" alt="Facebook" /></a>
	<a href="http://twitter.com"><img src="<?php bloginfo('template_url'); ?>/images/twitter_32.png" alt="Twitter" /></a>
	<a href="http://flickr.com"><img src="<?php bloginfo('template_url'); ?>/images/flickr_32.png" alt="Flickr" /></a>
	<a href="http://myspace.com"><img src="<?php bloginfo('template_url'); ?>/images/myspace_32.png" alt="MySpace" /></a>
	<a href="http://yahoo.com"><img src="<?php bloginfo('template_url'); ?>/images/yahoo_32.png" alt="Yahoo" /></a>
	<a href="http://youtube.com"><img src="<?php bloginfo('template_url'); ?>/images/youtube_32.png" alt="YouTube" /></a>
</div>

What the codes actually do is quite easy to grasp just by looking at the structure. Change the “href” values into the actual URLs of your social network pages. For instance, it’s http://twitter.com/colorlabs for our Twitter page. The “src” values of the “img” tags tell the locations of the icon files. You also need to modify these values to match the actual names of the icon files.

When you’re finished modifying the HTML codes, simply click “Update File”.

Step 6 : Add these CSS codes and modify as necessary

We’re about to do some CSS changes in stylesheet file, go to Appearance > Editor > style.css.

Go to the bottom of the lines and paste these codes:

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

/* SOCIAL NETWORK */
.socnet {
	padding:0px 12px 5px 12px;
	background:#fff;
	border-top:1px solid #ececec;
	margin-bottom:12px;
	overflow:hidden;
}

.socnet img {
	margin-top:5px;
	padding:2px 18px 2px 0px;
	margin-bottom:5px;
}

.socnet img.last {
	float:right;
	padding-right:0!important;
}

.socnet h3 {
	font:12px Arial, Helvetica, Verdana, Sans-Serif;
   	font-weight:bold;
	color:#fff;
	margin:0px 0px 8px 0px;
	padding:3px 10px;
	border-bottom:1px solid #ececec;
}

Step 8: Click “Update File” and view the changes you’ve just made

When you’re finished modifying the CSS codes, simply click “Update File” and view the changes you’ve just made by accessing your web site URL. Might worth refreshing the page in case you have a caching plugin running.

What next?

There are further modifications you can do to ‘automate’ the whole process. You can go as far as customizing the function.php file and create a custom control panel so you can easily edit the URLs of your social network pages without touching any PHP file. Or, you can also add an additional row for icons to connect to more social networks.

We hope this tutorial is useful for you all. See you again in the next tutorial!