Social Media Widget, created by Brian, has to be one of the coolest widgets out there to handle all your social network connections. It comes with lots of features out of the box but it is dynamic enough to allow end users to easily customize on their own.
As I was creating one of my websites, I wanted to leverage this widget but customize the icons to better fit my design. But alas, I was not able to make it work initially. Upon further research (I got it to work), it was nothing more than correctly identifying the path to the icon folder!
Because there are so many variations involving hosting providers, WordPress installation methods, etc., it can get downright confusing.
Since Brian has done an excellent job of describing what needs to be done, I am simply going to outline minor tweaks I made to get my customized icons to work.
ENVIRONMENT
Host: Hostgator Hatchling (limited to one domain assigned to the hosting package)
WordPress: v.3.3.1
Framework: StudioPress Genesis 1.8.1
Theme: Magazine Child Theme, v2
Widget: Social-Media-Widget-2.9.4
Icons: Gray, 32px, created with Adobe CS5 Fireworks
INSTRUCTIONS
- Log into Hostgator cpanel
- Navigate to WP-CONTENT, then create a folder called “icons”
- Copy files into this “icons” folder (as instructed by Brian, naming convention MUST BE IDENTICAL to his existing icon names. Let’s use facebook.png as an example. First, match the file name including lower letters. Second, make sure it ends in .png file fomat. Third, you can ONLY use 16px, 32px or 64px sizes. Other sizes will not work. Whatever size you decide, it should be standard across different icons)
- Install widget as instructed
- From the WP dashboard, click on APPEARANCE–>WIDGETS, then drag over the Social Media Widget to your target destination (in my case, the primary side bar after SEARCH widget)
- For my website, I made the following changes:
- Title: Connect with Us
- Icon Size: 32px
- Icon Pack: Custom Icons
- Added my profile URL links for Facebook, Twitter, Linked In, and RSS.
- For the CUSTOMS ICON URL, the default (sample) value was: http://wwww.yoursite.com/wordpress/wp-content/your-icons (another example Brian gave was: http://www.yoursite.com/blog/wp-conent/icons) In my case with Hostgator, the formatting was slightly different: http://wwww.yoursite.com/wp-content/icons
- For the CUSTOM ICONS PATH, the default (sample) value was: /path/to/your-icons. I changed this to: /home/your-cpanel-user-id/public_html/wp-content/icons
- At this point, all my custom buttons showed up in my page.
When in doubt, contact your hosting provider for the exact path. Hostgator online chat technician was awesome. Good luck.
RESOURCES:
Hostgator – Server Path, Absolute Path
(here is the actual code)
Step 7 – Go to you page or post and simply use <span class=”dropcode”> </span> HTML tags to make your first letter a drop cap. That’s it!