In this tutorial I’ll show you how to add social media icons to your WordPress blog.
Update: For a quick and easy way to add customizable social media icons to your blog, I recommend using the Simple Social Icons plugin.
How to Add Social Media Icons to WordPress
1. In your WordPress dashboard go to Media > Add New.
2. Click on the Select Files button and upload your social media icons. Alternately, you can “drop” your social media icon images into the media uploader.
3. After your images are uploaded, click on the Edit button located on the right hand side of the image.
4. Copy the File URL
and paste it into the following code where it says “Your Icon URL Goes Here”
<a href="Social Media URL Goes Here" target="_blank"><img src="Your Icon URL Goes Here" /></a>
Be sure to keep the file URL between the quotation marks.
5. In the same code, you will paste the URL to your social media site where it says “Social Media URL Goes Here”. Again, be sure to place the URL between the quotation marks. Your completed code will look something like this:
<a href="https://www.facebook.com/BeautifulDawnDesigns" target="_blank"><img src="http://beautifuldawndesigns.net/images/icon-facebook.png" /></a>
6. Complete the above steps for each social media icon.
7. Take your completed code and copy and paste it into a text widget (Appearance > Widgets). Don’t forget to press Save on the widget.
Note: If you’re using an email/contact button, place mailto:YOUREMAILADDRESSHERE between the quotation makes where it says “URL Goes Here”
If you found this article on “How to Add Social Media Icons to WordPress” helpful, please share it below!
THANK YOU!!! Best tutorial on the web, and believe me, I’ve been looking for awhile!
Hi! I did this and found that my images show up on my homepage http://www.avenuegray.com but not on any of my other pages. They just show up as squares with question marks. Any suggestions? Thanks!
Hello, this is a good article,Thanks.
Thanks so much! I’ve spent so much time trying to figure this out before I came across your site. Following your instructions made this a breeze! Thanks again!
Thank you for this tutorial! I am using the Somacro icons pack, but when I upload it to my WP site just like you showed in your tutorial, the icons get way too big. How can I fix this?
Hi,
I have just read the post and followed the instructions – all the images have loaded up correctly however despite putting the individual web addresses for each site – facebook, twitter, instagram etc, as suggested, each icon once clicked takes you through to the facebook page – could you tell me where it has gone wrong?
Many thanks.
…figured it out! Thanks for the tutorial!! x
Thank you so much! I knew this was a simple process but for the life of me I could not figure it out. I love my buttons! I’ll be following along now, love your blog.
http://creativeramblingsblog.com/
Brilliant – thank you!
Thank you for this tutorial, very helpful 🙂
this is amazing – thanks a lot.
PS. I had to rewrite the whole code again because I cannot copy/paste it from this page. Don’t know if its on purpose but thought id tell you about it..
Hi this is a beautiful tutorial! I love the design of your blog:) I am trying to put this on my WordPress page and I can get the icon on there but I can’t get it to go to the Facebook page or to twitter. Also wondering how to get it to connect to a contact page and email. Thank you
how do you add an email link? I have the picture i need, i just don’t know how to make it go to email instead of a website…
Thank you thank you! This was so easy to follow and exactly what I was looking for! 🙂
Thank you so much for the tutorial!! It was extremely helpful!