Adding new menu items to a WordPress menu is a seemingly daunting task. It is a piece of cake if you want to add a new item forseen in WordPress’s GUI menu tool but what if you want to add something like a Font Awesome icon linked to a social media account? There are hacks with CSS, jQuery, etc… but WordPress has a way that leverages a built in filter which, as the name suggests, filters the HTML menu list content of your nav menu. It is not as scarey as it might seem at first blush. As always, have a look at the relevant WordPress Codex entry for assistance.

Let’s dig into this. Say you have a WordPress website and the menu named “Header Menu” needs a Font Awesome icon at the end of the menu for Facebook. The following will get the job done for you:

  
    function add_fontawesome_menu_item($items, $args) {
      if($args->theme_name == 'Header Menu') {
        $items .= ''
      }
    return $items;
    }
    add_filter('wp_nav_menu_items', 'add_fontawesome_menu_item', 10, 2);
  

So what is this doing?

In a nutshell, we have a function called ‘add_fontawesome_menu_item’ that takes two arguments: $items and $args. The $args argument checks if the name of the menu is equal to the menu you want to change; in this case, the menu ‘Header Menu’. This means no other menus will be affected by this function. Second, the $items argument outputs whatever we are going to add on to the WordPress menu. In this case, a link to a Facebook page via a Font Awesome icon. The value of $items is returned and the filter is added to the menu. Not much more to it than that.

So what is the lesson here? For most smaller customizations to WordPress, we don’t need yet another plugin. Sometimes plugins are exactly the right tool for the job. Most of the time they add bloat, security vulnerabilities, and can potentially break your site.

Enjoy!