• Home
  • About
  • Now
  • Code Snippets
  • Blog
    • WordPress
    • Genesis Theme Framework
    • Tutorials
    • Web Development
    • Geeking Out
    • Blogging Resources
  • Contact
  • Home
  • My Story
  • Now
  • Code Snippets
  • Blog
  • Contact

The Web Princess

WordPress & Genesis Theme Development

The Web Princess

Freebie Social Media Icon Menu

December 6, 2012 by Dee Teal

There are a few blogs I follow pretty closely, and one of them predictably is Brian Gardner’s (predictably because he’s behind Genesis and I’m a bit of a fan). A while back Brian put together a tutorial about making a social media icon menu – I took it on board, I like rolling my own social icon displays and didn’t want to load up my site with plugins that always seem to miss that one social network I want people be able to get to.

So, given that I’m putting together a new ‘site image’ for rolling out new sites quickly and easily (that’s a post for another day) I thought I’d make up the CSS that will put a whole lot of social media icons at my finger tips for making out social icon menus/links for my clients.

There are any number of free social icons sets out there and I found that this one that was pretty comprehensive… Thanks to Orman Clark from PremiumPixels.com for making them so freely available! I’ve added in a couple of my own in his style as well (pinterest, getglue, and viggle) just because there’s ALWAYS one you want that isn’t there!!

I don’t really want to go too deep into the nuts and bolts of how to do this, it’s more of a giveaway than a tutorial… but you can get the gist of the tut if you like from Brian. However, the method briefly is as follows …

1. Create a Menu called Social Menu (in Appearance >> Menus) (if you don’t call it this the css won’t be accurate… if you do call it something else, change the css id selectors accordingly).
2. Create External links in your menu for the social sites/profiles you want to link to.
3. Add a class to each link in the menu (Here’s a how to, just in case you’re unsure). For ease of use the classes are all the names of the social sites… facebook, twitter, linkedin – all lower case, all conjoined words… no spaces.
4. Add the Custom Menu to a widget area.

Now, I’m presuming at this point you’re using Genesis… if you’re not then you may need to tweak some of the selectors in the CSS to suit how your theme is structured. In my version I’ve tweaked the CSS that Brian provided so that you could put this Custom Menu in any widget area, Brian’s was focused on the header.

The other thing I’ve done is created a sprite of the icons, rather than having a whole lot of individual images slowing down your site with erroneous http requests… this is a.good.thing to do, you should do this with all the repeating images you use on your sites. (If you don’t mind me saying so, it’s quite pretty isn’t it (in an early 90’s webdesign kind of way)!!)

Here’s the CSS code for your stylesheet. Yes, it is very long.. there are a lot of icons to account for (actually there are two or three on that image that I don’t have css for (email, share this, add this) you can write CSS for those if you think you need it. You don’t have to use all of them, and if there are ones you definitely don’t need you can take out the relevant lines of css to no ill effect.

Base-Website-Demo-Just-another-WordPress-site-3

Custom Social Menu in the Sidebar Widgets

Base-Website-Demo-Just-another-WordPress-site-2

Custom Social Menu in the Footer Widgets

Base-Website-Demo-Just-another-WordPress-site-4

Get Straight to the Good Stuff

Finally, below is a zip file of all the above PLUS the PSD file for the sprite, just in case you need to add others images.

EDITED::

Following on from the above I was approached by Peter Wilson with an offer of alternate code that reduces the volume of CSS required to pull off exactly the same results.

I was floored.

I’ve heard Pete talk about CSS specificity before and he makes me acutely aware of a huge gap in my knowledge in the area, so I’m prevailing on him to write up a blog post about it for everyone’s benefit (I’ll let you know when it’s done). In the meantime I’m posting his revised code below, I’m sure you can see just how much cleaner and easier it will be to manage the code when this is what you’re looking at instead of the code above (I’ve left it up there for reference).

Get the Totally Revised Good Stuff

By the way, the basics of this will work on any site with custom menus even though the css in this is a bit genesis specific. You’ll just have to edit some of the code to reflect the ids in your theme.

About Dee Teal

Dee Teal is a Scrum Master, Project Manager, and Team leader with a history as a developer (mostly front-end and using the Genesis Theme Framework) and WordPress trainer who is crazy active in the WordPress community.

She's run large scale WordPress events, and small ones, and if you ask someone about WordPress in Australia, you won't usually be more than one degree of separation from someone who knows her.
 
You can also find her here...
LinkedIn | Twitter

FREE Website Planner

  • Become your web designer's favourite client

Website Sign Ups

Become your Web Designer's favourite client by preparing for your web project using the Web Princess' Interactive Website Planner

  • This field is for validation purposes and should be left unchanged.

Tweet

  • I just solved pack Snake in WordBrain - as number 2605 ever! #wordbrain #genius #words http://t.co/ygULwZTRYQ http://t.co/ORNxwtaTIl September 14, 2015 2:11 pm
  • Pretty impressed with the stops that @Telstra are pulling out to get my issues sorted... Service with a surprised smile! September 14, 2015 2:48 am
  • It's Tuesday. A perfect evening for this. And by this I mean beer (of course). #oohermrs… https://t.co/eiIttD5xWa September 8, 2015 8:17 am
  • Follow Along

Recent Posts

  • Moving to deeteal.com October 23, 2020
  • Asking a Better Question September 13, 2016
  • Growing & Developing your WordPress Meetup June 24, 2016
  • Making an Escape June 7, 2016
  • Changing Tack : Adjusting your Sails for the Winds of Change May 7, 2016
  • Privacy Policy
  • Disclosure Policy
  • Contact

© 2021 The Web Princess
Proudly custom built with Genesis