• 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

A New Genesis Social Icon Menu

February 3, 2014 by Dee Teal

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.

  1. If you’re not already using Font Awesome in your theme copy the PHP code below into your functions.php file. 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.
  2. 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'
  3. Copy the CSS code in the second file into your style.css
  4. 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).
  5. 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…

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

© 2023 The Web Princess
Proudly custom built with Genesis