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!
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?
Yes this is the way how it should be done and I’ve been doing this since that Justin’s article. Mr. Tadlock *sometimes* get it right.
The great thing about this approach is that CSS attribute selectors are supported in all modern browsers (and IE7+).
An alternative server based solution would be to use the
nav_menu_css_classfilter like so.It would be awesome.
Great way, I’ll use in my new framework with all the sure!
Cool, a rel=”nofollow” is also needed.
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! :)
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.
Thanks for your comment Justin! I think I’ll be promoting this technique everywhere from now on :)
Everyone on ThemeHybrid has known this for quite some time… Thanks for pointing this out chief.
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.
Yes please! Then we can make it a requirement on TRT ;)
Thanks for sharing this Konstantin… it seems so obvious now that I think about it. :) I’ve posted a small snippet that can be used to add rel=”me” values to the social menu links.
Awesome stuff Will! Hope you don’t mind that long comment I left there ;)
heh, of course not :) Though I’m really curious now if I’m missing something about setting the rel value in the standard menu interface. Is there an option somewhere I’m overlooking?
Appearance → Menus → Screen Options (top right) → Link Relationship (XFN).
This is a great tweak. I just implemented it on my own site, and I like it a lot better than what I had previously.
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!
Good info Konstantin. Simple but powerful coding
Yes! That was simple. Using social plugins on wp themes are necessary. That coding part really eases the things I do.
How do we prevent the Link Text from appearing on the Social menu in the front-end? i.e., just get the icons to show up and not the accompanying Link Text at the right of icons.
There are many different ways. Justin appends the
screen-reader-textclass to the spans inside the link, so screen readers could still read the text, but it won’t be visible on screen: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.
I like how you attached utm_* variables to your comment author link :)
@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