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.

Call to action box goes here
Need a Plugin to Improve Your Site?
Browse Plugins Now
Add Schema to any Page on Your Site
Add Schema to any Page on Your Site

If you’re looking to boost the SEO for you site, structured data, or schema, is a great way to do it. According to Google, “Structured data is a standardized format for providing information about a page and classifying the page content.” For example, you can use it to tell Google that a page contains FAQs,…

Add Your Business Profile to Your Site with Structured Data
Add Your Business Profile to Your Site with Structured Data

With the Five Star Business Profile and Schema WordPress plugin, you can quickly and easily create your business profile and add it to your site with a simple-to-use shortcode or Gutenberg block. This automatically includes all the relevant structured data, so Google knows exactly what type of organization/business it is and can include the correct…

Modifying the Five Star Restaurant Menu Plugin Using Templates
Modifying the Five Star Restaurant Menu Plugin Using Templates

The template system that exists in the Five Star Restaurant Menu WordPress plugin opens a whole new level of customization for those comfortable working with a bit of code. Everything that displays on the front end of the plugin can be customized by creating your own template files (to modify and/or overwrite the existing templates…

Discover More Posts
Browse Plugins Now