You may remember, I’ve done a bit of fiddling around using WordPress Custom Menus to make lists of Social Icons. They worked but they were fiddly, relied on sprites which are a bit of a pain to deal with and furthermore also relied on users getting comfortable with the advanced settings of Menus and adding things like classes to the menu items. I am also aware that a lot of people use the Genesis Simple Social icons plugin to create a genesis social icon menu.
But given that I still like using custom menus to build social icon lists, I was stoked to come across these recent articles by Justin Tadlock where he uses CSS attributes to target the social service’s URL to apply the relevant styling.
In the first article Justin uses sprites as I have done before, but his CSS is minimal compared to both my initial code and the revised code @pwcc helped me out with. So I was pretty excited to see someone make such menus even easier to implement for the end user. All the user needs to do is to add links to a custom menu and away they go.
Justin took his code one better in part two of the series to make the menus out of Genericons, a popular free icon font. However, I tend to use Font Awesome as it has a bigger range of icons, SO the code below references the unicode for Font Awesome’s social icons. You could equally easily swap out that for whichever font library you want, and add their relevant unicode string.
Finally, because I’m a Genesis user, I retooled the code to apply it to Genesis. This simply meant adding it to my theme via a hook in the functions file rather than inserting template parts as Justin did in the original.
Here’s all you need to do.
- If you’re not already using Font Awesome in your theme copy the PHP code below into your
functions.phpfile. If you ARE using Font Awesome already, just paste the second section from line 16 which creates the menu and adds it to your theme. - Alter the hook to apply the font wherever it is in your genesis theme you want to put the menu (in this example I’m putting it on the
'genesis_header'– it could work equally well on'genesis_before_sidebar_widget_area' - Copy the CSS code in the second file into your
style.css - Go to Appearance » Menus and create a new menu – I’m calling mine Social but you can name it whatever you want. If you do change it, make sure you adjust the name in the PHP accordingly (line 30).
- Add your Links to the Social menu and save it.
There are a bunch of ways of doing social icons and I’m sure no one way is the right way… I know there are plenty of people using the Simple Social Icons plugin by StudioPress which uses Entypo and puts your icons into a widget area. I’m a big fan of using native WordPress rather than adding a whole bunch of widget functionality, simply to keep things easy for the end user.
That said, I’m curious… how do you do your social menus? Icons? Sprites? Menus? Widgets? Plugins? Something else? Post a link to your method in the comments.. I’m curious…
*Updated a couple of errors 3:2;14 8.12pm
Thanks due also to to Gary Jones who pings me at all hours to tell me how to tidy my code up…
