How to Create Custom Social Media Icons for WordPress

Alright my darlings, we are about to get nerdy up in here! It is time we embark on our first lesson in blog design.  I just finished creating custom social media icons for my WordPress blog so I think that is a good place to start!

As I may have mentioned in the past, I decided to start this website with no formal education in web design. I have been able to glean all the information I need to make A Little Glitter look the way I want from the internet. Sometimes, I have to learn through trial and error and Google along the way.  (Such was the case with my social media buttons.)  I knew what I wanted them to look like but I had a very difficult time figuring out how to make that happen.

I tried to look for WordPress plug-ins but I could not find anything that had a Bloglovin’ button I liked. Eventually, through internet tutorials I was able to figure it out and bypass the plug-ins altogether.  Once you know what you are doing it is actually a very simple process.

To begin, you should figure out what you want your buttons to look like. There are tons of free buttons online. Here, here and here are some options.  If you dont like anything on those sites you can Google whatever you are looking for and find more.  Still not loving anything?  You are very picky!  (It’s okay.  I am, too.)  Your other options are to purchase custom icons on Etsy for a few dollars or to design your own.   Something Swanky has a great tutorial on how to create your own icons here.

I chose some plain black ones because I knew that I was going to bedazzle them.  I am about to share a great tip here.  Consider it a Christmas present.  I use this site to add sparkle to things on A Little Glitter.  It was $8.99 a year (so worth it) and very user friendly.  I did not want the icons to be too crazy so I only bedazzled the Bloglovin’ one.  Once I was finished I created a new folder on my computer’s desktop and saved the image files for all the icons in there (including the bedazzled Bloglovin’ one).

Then I logged into my WordPress account and created a new post.  Do this as if you are going to create another blog post.

 

Create Post

How to Create Custom Social Media Icons for WordPress

 

When the window opens click on the tab to add media.

 

Add Media

How to Create Custom Social Media Icons for WordPress

 

Now click on the tab that says, “upload files”.  Then select one of the social media icons you saved earlier.  I chose to do my email icon first.  In the attachment details to the right of the page scroll down to the box that says, “Link To” and select “Custom URL” from the drop down menu.   Now in the box below that insert mailto:youremailaddress.  My email address is pamela@alittleglitter.com so I pasted mailto:pamela@alittleglitter.com in the boxThen click  the blue “Insert Into Post” button at the bottom. 

 

Email

How to Create Custom Social Media Icons for WordPress

 

You should now see your icon.  Click next to it and repeat the process with your next social media icon.  Except in the box below “Custom URL” you want to insert the URL of your account.  For example, I want to do my Bloglovin’ icon next so I would upload that file and then paste http://www.bloglovin.com/pamelaglitter in the box for the custom URL.

 

Bloglovin

How to Create Custom Social Media Icons for WordPress

 

Once you have the row of icons uploaded in your post you can center them.  Also, if you hover over an image and click on the box that appears you can use the slider to change the size.  When you are happy with it’s appearance, click on the text tab and copy the html code that comes up.

 

Text Tab

How to Create Custom Social Media Icons for WordPress

 

Save the post to a draft.  Now open up the widget menu.

 

Open Widget

How to Create Custom Social Media Icons for WordPress

 

Click on a new text widget and drag it up to where you want your social media icons to go.  I wanted mine on the right sidebar at the top so I dragged the text box there.

 

Text Widget

How to Create Custom Social Media Icons for WordPress

 

Then paste in your html code and click save.  Take a look at your website and see if you like it.  If not go back into the draft post and fiddle with the size and layout of your icons and then copy and paste the new html code in the text box widget.

Hopefully this was able to help you!  Enjoy your new social media buttons!  If you have any questions or need help please send me an email.  Thanks for reading A Little Glitter!

5 thoughts on “How to Create Custom Social Media Icons for WordPress

  1. Cliff

    Nice job and great tutorial Pam! Thanks for the awesomely glittery things (iPhone auto correct suggested thongs which is pretty funny … glittery thongs could be a fun Xmas gift for Court!). Congrats on a well thought out and nice site!

    -Cliff

    Reply
  2. Krissi

    Pam, I just may start my blog on life as a pediatric home care nurse and all the insanity that ensues thanks to this post. Love it!

    Reply
    1. Pamela Post author

      Kris, I love my blog but it has consumed my life. I dream about it. I read other blogs and constantly think of ideas to get more traffic or make it more aesthetically pleasing. It is amazing but a lot of work.

      Reply
  3. Nicole

    In using Glitterboo.com, my buttons are coming out nothing like yours. Do you have a tutorial on how you created, not just the social media ones, but the border around your pic, and you title graphic?

    Thanks!

    Reply

Thank you for your comment!