Adding a social profile menu to WordPress

Last year, Justin Tadlock posted about a simple way to add a social media navigation menu in WordPress. He then followed it up with a post showing how to use this method with the Genericons icon font. This is a slick trick so that you can use WordPress’s core menu system to add a list of links to your social profiles. You’ll see them on most pages. You can see it here at the very bottom of my site on the right.

Warning: this post is for advanced WordPress developers who are comfortable adding PHP and CSS code to their themes or plugins.

I wanted to use the same concept that Justin demonstrated for a client’s site I’m working on at the moment. But I wanted to use the Socicons font, an icon font that includes support for tons of social networks, instead of the Genericons icon font. It was pretty straightforward, so I thought I’d share the CSS code I used to get it working in case anyone else finds it useful.

I put it up as a Gist, so you can have a look at the CSS code. To get this working, you’ll need to follow Justin’s steps to set up the navigation menu, copy how he loads the Genericons font to load the Socicons font, and then follow the instructions at the top of my CSS code to register your navigation menu for use with the CSS code.