How to add social media icons to your WordPress sidebar + FREE watercolor social media icon pack

 

There’s no denying that social networking plays a crucial role in blogging success. Having social media icons on your blog or website allows your readers to easily find and follow you. One way to prominently display these icons is by adding it to the sidebar.

In WordPress, you can add links to your social media accounts using a plugin. Many themes also have built-in feature for this but if you want to use a custom icon here’s a short and easy tutorial to do that.

Add social media icons to Wordpress sidebar

1. First, you need to get the icons you’d like to use. You can download a watercolor social media icon pack at the end of this post. It’s free!

2. Upload the icons to the Media Gallery. If you downloaded my free icons, you need to extract the PNG files from the ZIP file.

3. Get the URL of each icons. On the Media Gallery, this box will appear when you click the image. Copy the URL.

smi-get-icon-URL

 

4. Go to Appearance > Widgets, add a Text widget to the sidebar and paste this code in the text area. Replace the items in bold with your specific account details. Do not omit the quotation marks.

<div>

<a href=”link to your Facebook“><img title=”Facebook” src=”Facebook icon URL” alt=”Facebook” /></a>

<a href=”link to your Twitter“><img title=”Twitter” src=”Twitter icon URL” alt=”Twitter” /></a>

<a href=”link to your Instagram“><img title=”Instagram” src=”Instagram icon URL” alt=”Instagram” /></a>

<a href=”link to your LinkedIn“><img title=”Pinterest” src=”LinkedIn icon URL” alt=”LinkedIn” /></a>

</div>

If you need to add more icons, add this bit and replace with the specific details.

  • link to Social Media Account – this is the URL of your social media account. For ex. https://www.facebook.com/yourpagename
  • image URL for Social Media icon – this the icon URL you copied in Step 3

<a href=”link to Social Media Account“><img title=“Social Media Name” src=”image URL for Social Media icon” alt=”Social Media Name” /></a>

 

Once done, the Text area will look like this.

smi-text-area

 

5. Click Save and your sidebar will look something like this.

smi-sidebar

Get your FREE watercolor social media icons

This icon pack was created using Affinity Designer.

Leave a Reply