You have three options when installing social media icons on your wordpress website.
Option #1: Theme Options
You could have a theme (such as Genesis) that allows you to link to your social media icons. If a theme provides this support, it will also provide the formatting to make it look good.
Check if your theme supports this by checking out your theme options. This would be located under the appearance menu in something titled similar to “theme options.”
If you have this ability, you can input your social profile name into a box, click save, and be ready to go. Lots of Elegant Themes have this option.
1. Go to the “appearance” and “theme options” panel, if available.
(This is an example of an Elegant Themes option link.)
If it isn’t available, it’d be worth checking your theme documentation. This is usually available in the “read me” section of your theme or from the site you acquired your theme. It’s worth googling something like “THEME NAME documentation” or if you remember the place you purchased it, going directly there. Alternatively, you can sometimes find the read me if you go to “appearance,” “editor,” and search the side list options for a “read me” page.
(Read me at the bottom of the Genesis theme menu.)
Genesis, for example, has many formatting options for social profiles, but support them by giving you a code rather than running it directly through your theme (keeps your site lean and speedy). However, it’s hard to figure out how to do this if you’re not reading the theme documentation.
Option #2: Plugins
You could use a plugin. Simply go to “plugins,” “add new,” and search for “social media” and you’ll find plenty of options. If you click the “details” button, you can then navigate to “screenshots” for an example of what the buttons will look like. If you can find something you like, it’s a great way to get your social profiles showing up on your site.
(Click the details button to preview the plugin before installing it.)
(Screenshot of a social media plugin so I can see if it fits my site without installing it.)
Option #3: Custom Install
Third, you can either find and download or purchase custom social media icons. A quick search will yield a ridiculous amount of options. Depending on your style and what you are looking for, this might be what fits you best.
To install these, you’ll use the following process:
1. Download icons to your computer
2. Upload icons to your wordpress media library. Copy the location of the file (not the attachment page) to a blank document for reference.
(Navigate to “Add New” in your dashboard.)
(Copy this link for use in the code below.)
3. Go to “appearance,” “widgets,” and add a new text widget where you’d like your icons to appear.
4. Paste the following code in your new widget (repeating as necessary for each icon):
<a title="Text you’d like to show up when someone hovers over the image" href=”URL of Link including http://"><img alt="Text you’d like to show if your image didn’t load" src=”The location of the file you uploaded including the http://” height="50" width="50" /></a>
Lastly, you may want to center these icons. The easiest way to do this would be surrounding all your images with a <div> tag.
Here’s the code you’d like to surround your social icons with:
<div style=”text-align: center;”>
THE CODE OF LINKS AND IMAGES OF YOUR SOCIAL MEDIA ICONS
So, your final product would be something like this:
Let’s make a few performance notes as well:
1. Resize and upload the exact size of image you’d like to use, rather than using the “width” and “height” properties within the <img> tag to resize your image. Then change the properties within the <img> tag to match the size of the icons you uploaded. Otherwise you are causing your server to load an image that’s too large for the way you are using it.
2. You can upload your images to sites like photobucket or google, but I usually recommend hosting your images directly with your site. This helps later on if and when you decide to move your site (all your images are together now) as well as eliminates the risk of your images being moved or deleted on one of these 3rd party sites.
3. You might be curious why I suggest using a <div> tag over <center> or tags that include certain widths and margins. Simple: browser compatibility. The <center> tag is not supported in HTML5 and using this method will center your images on almost every browser. Nice.