Social Menus in WordPress Themes

I’ve seen tens, maybe hundreds of different plugins, all with different approaches at creating social profile links in WordPress themes via widgets, menus, shortcodes, and “insert this piece of PHP code in footer.php” and whatnot.

A few days ago I stumbled on what I think is the right way.

I was playing around with Justin Tadlock’s Stargazer theme, when I noticed it had a registered menu called “Social.”

I was skeptical – my first thought was that I had to find the theme docs and a list supported CSS classes to go with that menu, but I decided to give it a shot anyway, so I typed in my Twitter profile, saved, and boom! I was amazed. I added Facebook and Google+ to the list and it all just worked!

Stargazer Social Menu

I went digging into the CSS files, and I saw Genericons along with this:

#menu-social li a[href*="twitter.com"]::before     { content: '\f202'; color: #33ccff; }
#menu-social li a[href*="facebook.com"]::before    { content: '\f203'; color: #3b5998; }
#menu-social li a[href*="plus.google.com"]::before { content: '\f206'; color: #dd4b39; }
...

With a few simple CSS selectors, Justin was able to target those links by their href attribute, it made so much sense!

No more plugin dependencies, no more long docs of CSS class names, no more arguing with the Theme Reviewers Theme on WordPress.org that social profile icons are part of the appearance of a theme and not “plugin territory” because users can lose their content upon theme switch.

Justin’s approach is just magical, and turns out he blogged about it twice last year. I guess I need to set my RSS feed reader priorities in order :)

And speaking of RSS, here’s a CSS selector to target the RSS feed link in WordPress and give it a nice little orange Genericon:

#menu-social li a[href$="/feed/"]::before { content: '\f413'; color: #ff6600; }

Or you could use the less strict *= attribute selector, and maybe add a few extras to support links without permalinks as in ?feed=rss2.

Anyway, this is how my next WordPress theme will work with social profiles. I’d like to see this become the standard for WordPress themes.

Imagine if your current theme had a social menu, and the theme you’re switching to had a social menu as well, boom! Your icons just changed automagically and you’re not left wondering where your social profiles have gone.

What do you think?

25 thoughts on “Social Menus in WordPress Themes

  1. For our WordPress.com themes, we’re tapping into the Publicize/Connect feature of Jetpack to do something quite similar. That way, users can connect their social accounts and use the Theme Customizer to set up social links for connected accounts. The upside is that there is much less code and the user does not need to find or input their URL, plus yay Theme Customizer! The downside is that it supports fewer social networks.

    • Yeah, I guess you can’t really “publicize” to your GitHub profile (or can you?) :) I think Gravatar’s verified services makes a little more sense here, which is also available on WordPress.com, as a widget though. Maybe a mixture of both would be great, then again, this won’t be available to users not running Jetpack on their self-hosted sites, which would be a shame. Just thinking out loud here…

      Maybe… Just maybe… Jetpack, and Gravatar, and Keyring and everybody else can just populate a single menu called “social” with a service when it’s been connected to. Like top-level pages getting automatically added to the primary navigation. That would be neat. Or confusing. I don’t know.

      Anyway, thanks for stopping by! :)

  2. I had been frustrated with this for so long with themes. The only way I knew to do this with nav menus before was to have the user enter a class, which I knew was not a great solution from past experience with similar things. So, this was something I’d traditionally left out of themes. However, I was building another theme (Socially Awkward) at the time that really needed social network integration. I’d originally tackled the problem with a filter, but I wanted to go even simpler. I just had one of those “light-bulb” moments and finally found something that both users and theme authors could use with any theme.

  3. I love this approach! I’ve converted Oenology’s social icons to use this method, and I’ll be presenting on it at WordCamp Dayton.

    The more Theme developers adopt this method, the more social profile links will be portable – which is a huge win for end users.

  4. I had forgotten about those posts Justin wrote previously, thanks for the reminder! I agree that it’s a lightweight and flexible way to add social links/icons to the page. I used a similar technique, but implemented using Font Awesome instead. Similar result!

    • There are many different ways. Justin appends the screen-reader-text class to the spans inside the link, so screen readers could still read the text, but it won’t be visible on screen:

      position: absolute;
      top: -9999em;
      left: -9999em;
      
  5. Justin is always coming up with new ways to move WordPress forward. Just another beautiful example here.

    Beginner & seasoned theme developers alike could learn so much from him. Thanks for sharing.

  6. @kovshenin and @greenshady

    the Skype link didn’t work for me, to be clear not the “.com” one but the “call” one with semicolon, tested also on Stargazer and Expound and I was wondering why…
    Well the href value was simply removed from the menu because ‘skype’ is not an allowed protocol for HTML attributes. I had to use the filter ‘kses_allowed_protocols’ to add it to the array of allowed ones.
    Can you confirm that’s correct and I’m not in a dumb moment? :-)
    Probably I didn’t notice the first time because I had to save the menu each time to see the changes…
    Thx you very much Mr. Tadlock for your ideas and Mr. Kovshenin for spreading the word.
    Greetings from Italy
    Andrea

Comments are closed.