Toying with the WordPress Social Menu

I recently shifted themes to the Automattic Twentyseventeen freebie recently.  I’d been helping another group retheme their site and was surprised how much built-in functionality there was.  It’s not perfect for every site, but it’s turned out to fit my needs pretty closely.

One thing that caught my attention was the social media menu.  I don’t really use anything like that (I’m not overly social) but it’s a neat feature.  In the past, to do a social menu – a list of your social media account icons – required a plugin or tweaking a template.

I’m not a fan of plugins that are ultra specialized.  Nor should you tweak a template since it’s likely to update and overwrite your changes; and I wasn’t going to create a child template just for social media icons.

<p class="social-footer">
<a href="https://www.facebook.com/..."><img src="facebook_icon.png" height="41" width="41" alt="Friend us on Facebook"/></a>
<a href="https://twitter.com/.../"><img src="twitter_icon.png" height="41" width="41" alt="Follow us on Twitter" /></a>
<a href="https://www.youtube.com/channel/.../videos"><img src="youtube_icon.png" alt="Youtube Channel" /></a>
</p>

In Twentyseventeen, you just build a menu.

Plain Vanilla

The cool thing is this:  by creating a link to the social media site – it has to be one of the supported ones – the theme will automatically convert it to an icon.

This is what the menu item (a custom menu item) looks like:

A screenshot of the Social menu in my WordPress site, with a custom menu item for a Twitter icon.

As you can see, I’m not doing anything fancy, not even specifying an icon. I added two more menu items and saved. This is what the final themed menu looks like, which appeared in my footer:

Twentyseventeen has 2 menu slots. This is the lower one. I’m not a huge fan of the location.

I fooled around a bit with creating a new menu slot at the top of the page but, while I could create a custom menu snippet using the Code Snippets plugin, I couldn’t get the menu to appear where I wanted.  That’s a user issue, not a technical one.

Use a Social Media Icon Plugin

So I took a look at one of the social media icon plugins.  The one I chose was very simple.  It added a small option to a custom menu item so that you could specify the icon.  But you could add it to any menu. You can see the slight change here:

Custom menu link after social media icon plugin installed. You can choose your own icon to appear.

The rest of the menu was text-based dropdowns, like any normal navigation menu. Adding them to the left end put them in my header, where I wanted them, but didn’t require fiddling with a new menu location.  However, it gave them a text label, so I used a bit of custom CSS to style that away:

li.menu-item a span { display: none;}

and this is what it ended up looking like:

Social media icons in top menu without text labels.

One thing that you can do with this social media icon plugin approach, that you can’t do with the native menu, is choose an icon that doesn’t match the link.  For example, I don’t have a LinkedIn page.  But people sometimes look for me on LinkedIn, so I added a LinkedIn icon but aimed it at my own page explaining that I wasn’t on the service.

Another benefit of putting them int the Twentyseventeen theme top menu is that the menu hugs the top of the screen as people scroll down.  The social media icons in that menu will always be visible, where they’d disappear into the header otherwise.

Jetpack Social Media Widget

I also use Automattic’s Jetpack plugin.  It does a lot of things.  Perhaps too many things.  And it is one way that Automattic can upsell additional functionality:  offer a free app with some in-app purchases.

I was updating a widget over the weekend and noticed that the last Jetpack update added a bunch of new things that I definitely didn’t want:  MailChimp subscriber policy, EU Cookie Law Banner, and so on.  But there was also one called Social Icons that I don’t remember seeing.

Jetpack Social Icons widget. Each icon is activated by adding a URL that points to the service.

It’s perhaps the best of both worlds.  It involves the simplicity of the Twentyseventeen theme with the ability to place it anywhere in a widget space you want.  I themed it a bit to spread the icons out:

li.jetpack-social-widget-item { margin: 0 0 0 10px !important;}

and this is what I ended up with:

Jetpack Social Icon widget on the sidebar.

Unlike the one with Twentyseventeen, this was was already themed using the primary site color.

Which may be a whole lot about nothing.  I struggled to fill that social icon widget and am not sure I really need it.  But it was fun to explore the options.