This guide will walk you through how to add a horizontal line of social media buttons to your sidebar or menus, using whatever icons you prefer.

If you want to add icons for less popular social networks, or want more control over how the icons appear, you can learn how to do so in this guide.

You can do this in two simple steps:

1. Find the social media icons you would like to use on the internet, download them, and thenupload them to your blog’s Media Library. We have a selection of icons for use here.
2. Add a Text Widget to your sidebar or footer. Using HTML, add the icons to the Text Widget, and link them to your social media services.

Alternately, you can use the Gravatar profile widget that has them built in.

More Detail

Before read on, you can have a read on Advanced Theme Menu Settings.

Many WordPress themes offer social media buttons in the header or footer area, but others do not. Even if your theme does have this feature, you might want a different placement for your buttons, or you might want to use different icons that match your header.

It’s easy to put your own icons in a neat line in your sidebar or footer using the Text Widget and a bit of HTML.

Step 1. Find some social media icons that you like, and upload them to your Media Library.

You might already have some icons you would like to use, but if not, just Google “free social media icons.” There are lots, but make sure you’re not violating any copyright. Once you’ve found some that you like, download them to your computer.

Then, go to Media->Add New in your Dashboard and upload all of the icons to your blog.

Step 2. Add a Text widget and format your buttons using HTML.

Go to Appearance->Widgets in your Dashboard, find the Text Widget, and drag it into your sidebar or footer.

Add a title to your widget if you like, and then add some HTML that is similar to the following:

Replace the bracketed bits with your specific information. Remove the brackets themselves, but leave the quotation marks and everything else. For the full links, paste the link that you want the button to point to. Make sure each link begins with https:// or https://. For example, for your Twitter page, the link would be:

For the image URLs, find the Twitter icon in your Media Library and click “Edit.” Then, copy the entire File URL .

 

Repeat with all of the links and image URLs. If you’d like to add or remove services, or display them in a different order, just edit the code as necessary. You might need to tinker with the width and height values to make all of your icons display neatly in your sidebar. We’ve provided 35×35 above as an example, but you can replace that with any values you like.

When you are all finished, your Text Widget will look similar to this:

Save it, and check out your pretty new social media buttons!

Examples and Sample Images for Onetone

Next, we will introduce some examples by changing Mageewp’s wordpress theme Onetone. Here we go!

To use these icons in your widget, first create a blank Text widget from the Appearance > Widgets page.

Next, copy the codes below:

Finally, edit the code to remove links to any services you do not plan to use, and add others if you prefer. You will need to change the links to include your information, otherwise they will not link to your site:

For this example, you would change [full link to your Twitter] to be a link like this for your site instead:

Do this for the remaining Social Media links so that each site points to your page, and Save the widget.

Find out your header.php in Onetone, look for

<div class="clear"></div>

before it, add the codes below:

Please notice the

<div style="padding-top: 100px;text-align: center;">

It’s different from the previous codes about sidebar, you can change its position and appearance if you prefer by using css. Then you will get result like below: