If you’re like me, you used to create a section of Theme Options using ACF that allowed you (or your clients) to pop in their social media URLs, and then you’d grab the appropriate Font Awesome icon and create a social media menu on the front-end. Pretty simple, right?
Well, what if I told you that you can grab a small piece of code that I wrote and go native?
By native, I mean not using custom fields to create this options panel, and instead allow your clients to use the Menus section to control their social media? After all, it is a menu; you might even wrap it in <nav> tags (I do)!
Well, you can! I wrote this small piece of code a while ago. It’s a custom navigation walker that detects the URL of the website and then adds in the appropriate Font Awesome (5 Pro) icon code. You can change out Font Awesome for something else, if you want. But that’s all you have to do!
Here’s the code:
Then you assign it to a new menu location (I call it ‘social’):
<?php
wp_nav_menu(array('items_wrap'=> '%3$s', 'walker' => new WO_Nav_Social_Walker(), 'container'=>false, 'menu_class' => '', 'theme_location'=>'social', 'fallback_cb'=>false ));And out comes a nicely formatted proper menu with the right icons on your front-end, which you can format easily. This is really really good for clients, because it means they can manage all their menus from one place that makes sense, instead of having to remember that the social media menu lives in Theme Options.
If you want to add more social media cases (I’ve got Facebook, Twitter, Instagram, YouTube, Snapchat, and Vimeo because those are what my clients usually need), it’s pretty easy. Just copy-paste more of the elseif cases and edit away. If you don’t want to use Font Awesome, you just have to edit the first two $item_output variables in each case.
Here’s how it works in the admin (just like any other menu):
The code is set up to not output the Link Text, that way you can add it in the admin, making it easier to identify each URL, but it’s just icons on the front-end. 🙂
I was super duper excited to make this modification to my workflow, because it’s literally a set it and use-it-forever solution. I no longer have to remember to add this to Theme Options for every client (no more copying this section of the theme options field group!). It just works.