I'm creating a social menu media on my website using linked icons:

enter image description here

To do this, I'm using the 'Custom Links' section in Appearances > Menus:

enter image description here

The code snippet to achieve a linkable icon (I'm using Font Awesome) is this:

<a href="https://www.facebook.com/peakwebsiteservices/" target="_blank" title="Facebook: Peak Websites"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>

As you can see, I'm using an icon tag (generated from the font awesome website) and wrapping it in an anchor tag.

When I input this into the Custom Links dialog, I input this line of code under 'Link Text' and not 'URL':

enter image description here

The reason for this is to part and parcel of my problem.

Here is what the markup looks like for my social media menu when it goes live:

enter image description here

As you can see from the image above, I have the social media menu in an unordered list and three list items. Drilling down into the list items, you see two anchor tags. One anchor tag is empty and is created by the 'URL' field in the 'Custom Links' menu, and the other is where I input the line of code to create my linkable icons.

I want to remove that empty anchor tag from the markup. Does anyone know where/how I might do that in the WordPress codebase? Or is there another way you would do this programmatically without the use of CSS?

I imagine there is a function that outputs this custom menu somewhere in the codebase that I might be able to tweak to avoid outputting that first field. I'm hoping that I can tweak only this custom menu without affecting future custom menus, should I find I need to create others.

The other alternative seems to be using a plugin but I would prefer to not use a plugin for this. Can anyone speak to that?

Thanks for your help,


I think you're using the wrong way, you need customizations for it.This may help you for this.

 add_filter('wp_nav_menu_items', 'register_social_links', 10, 2);

 function register_social_links($items, $args) {
    if ($args->theme_location == 'top-header') {//Here you can use your menu theme location
       $items .= '<li class="your-class-name"><a href="https://www.facebook.com/peakwebsiteservices/" target="_blank" title="Facebook: Peak Websites"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>';
    return $items;

Hope this will help you.

  • Hey, thanks for the answer! A question: how/why did you choose 'wp_nav_menu_items'? When I use this hook, I no longer see <li> tags and all the corresponding classes that get attached to them (menu-item menu-item-type-custom etc...) in my menu markup. Is there a resource you recommend for getting an overview of the available function to hook into? Thanks again, Dave. – David Gaskin Nov 9 '17 at 19:14
  • I understand I can add li tags back in by adding them to the string values but I still lose all the standard classes. Is there any way to put the classes back in? – David Gaskin Nov 9 '17 at 22:07
  • see I updated the answer, you may add <li> and your standard class name to it. ;) – Sunil Dora Nov 10 '17 at 4:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.