Use a Custom Navigation Walker to Add Social Media to Your WordPress Site

This is more of a tip with some code rather than a tutorial. A tutorial on how to create a custom walker is definitely in the pipeline (as of March 29, 2018).

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’):

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.

(We’ve got other handy WordPress tips too, check them out!)

We’re creating a(n opinionated) course on WordPress Theme Development!

It’s going to be jam-packed (over 35k words!) and full of awesome information for a budding WordPress theme developer. If you’d like to hear more about it, pop in your email address.

Awesome! We’ll send you updates and sneak peeks of the course! Plus, whenever we publish other handy tutorials, we’ll be sure to let you know. No spam, we promise.

It looks like you're already subscribed. Yay!