Enhancing the SVG Social Icon Menu in Twentyseventeen

Update: I no longer recommend this method and will write a future post about it. In short, I am using a modified version of the code from the Twentynineteen theme vs the Twentyseventeen theme.

For the past year, I’ve been experimenting with using SVG icons in my Genesis child themes.

Using a Plugin

When version 2.0 of the Genesis Simple Social Icons plugin came out and switched to SVG icons, it put that plugin back on my radar. Unfortunately, it is not easy for clients to reorder the icons without having to add a filter to change the sorting order of the SVG icons. So while I was happy about the SVG addition, it still was not an ideal solution for my clients.

SVG Icon support built into TwentySeventeen

When the WordPress Twentyseventeen theme was released, their solution was updated from the TwentyFifteen theme to use SVG icons for the social menu. Very slick.

Using a menu for social icons makes sense.

This is a very easy solution for a client to implement. All you need to do is create a menu, add your social media links with the menu text and voila – it magically displays the corresponding SVG icons instead.

Are these Magical SVG Icons?

You might be asking yourself just that. How does the menu know which icon to use?

Well, there is an SVG sprite (fancy way to say one big SVG file that contains lots of individual SVG graphics) – one element for each social media icon it supports. There are also some other SVG icons in there for the theme, unrelated to social icons. Nice. All of your SVG icons are in one place.

Okay, so how does it work?

It parses the URL of each menu item and compares it to an associative array of URLs it supports with corresponding symbol IDs. If it finds a match it dynamically swaps out the menu text for the matching SVG icon. For accessibility, it wraps that menu text in a <span> with a screen reader class. Screen readers will then read out the menu text. Brilliant!

The code below is from the Twentyseventeen theme inc/icon-functions.php. I’ve highlighted a few lines to note. First, it checks if we are on the social menu. Then if it finds a match for the URL, it swaps out the text for the SVG. Finally, this is all done by hooking into the filter walker_nav_menu_start_el.

There is one caveat though.

There is a limitation on where you can use this menu in the theme. It must be assigned to the Social Links Menu location to work.

Wouldn’t it be nice if you could use this menu in the Custom Menu widget? Then it could be displayed in a sidebar, footer widget or even in a page builder widget?

First Challenge: Make it work in Twentyseventeen.

That was my first challenge – to adapt the code to work on a child theme of Twentyseventeen. Here is how I did it. I’ll walk you through step by step.

1. Created a child theme of Twentyseventeen. Not sure how to do that? Here is the information found in WordPress Codex. I’ve included the child theme I created in this tutorial. You can download it here from Github. Click on Clone or Download and then Download Zip.

2. I added the following code to the functions.php file:

3. I created a folder in the child theme named inc. Added the file named
social-menu-functions.php in that folder with the following code:

First thing is to remove the filter from the parent theme.

Then, add the replacement code to run.

How to check if the Social Links Menu is being used in a widget?

My solution was to assign the menu a specific name, so I could then target the menu-slug in my code. The slug is generated automatically based on the menu name and each menu must have a unique name. I assigned the menu Social Links Menu, so the slug that is automatically generated is social-media-menu.

So the logic goes like this. If we are displaying the social links in the default location, run the default code, else test to see if my menu slug social-media-menu matches. If it does, swap out the icons as we did for the default menu location.

But something was not working correctly in the Customizer.

The icons in the Custom Menu section do not refresh properly when you edit the menu in the Customizer.

Identifying the source of problem

This happens because when you edit a Custom Menu in the Customizer, the filter for 'walker_nav_menu_start_el' no longer returns the WP_Term object for $args->menu and instead returns the integer of the menu ID.

Using the very handy Kint PHP Debugger, I can easily output values on the front end to see when and how values change.

So by adding this extra code shown from line 39-44, I need to test if $args->menu is an object. If it is, we get the term_id (id of the menu). If not, then $args->menu just returns the id of the menu as an integer.

This solved the issue with the Customizer and refreshing the icons.

The remaining code wraps the menu text in a screen reader class. The Social Footer Menu does that in footer.php of the parent theme. I just needed to add similar code to do the same if a Custom Menu was using the Social Links Menu.

4. I added the following to the child theme style.css and activated the child theme.

Now I can use my social icon menu anywhere on the site.

That’s a wrap.

Second Challenage

Now with that working, my next challenge is to adapt this entire SVG icon system into my Genesis child themes.