How To Add A New Twenty Sixteen Footer Menu

Twenty Sixteen is a popular WordPress theme, but it doesn’t have all the features that people want.

One of the issues is with the Social Links menu in the footer: it’s only suitable to add links to social media profiles.

Any other links added to this menu will show up as a strange symbol because of the theme styling.

What to do?

The simplest solution is to add a new menu to the footer area where you can add a custom menu with your desired links.

With the help of a plugin, you can add images or logo links as well.

Adding the Twenty Sixteen footer menu

You will need a child theme for Twenty Sixteen. Never edit the parent theme!

To the functions.php file of your child theme you need to add the following:

This registers the footer menu area in the theme.

It will allow you to add menu items to a custom menu and set them to show in the footer menu area. Remember to save when you’re done.

However, nothing will show up on the front end until you add the code to show the navigation in the theme.

In your child theme’s footer.php, below the line <footer id="colophon" class="site-footer" role="contentinfo">, add this code:

Note that I chose a depth of 1 for the menu, which means that only top-level menu items are displayed. If your menu has any submenu items, they won’t show.

You have now instructed your theme to show the menu on the front end.

It doesn’t look great yet, though – we need some styling! Add this to style.css in your child theme:

Here’s what it looks like on desktop.

You might not realise that the primary menu navigation shows up in the Twenty Sixteen footer on a mobile device.

For the Twenty Sixteen footer menu, I chose a similar display style for the footer navigation to the primary menu – here it is.

If you’re using a different colour scheme from the Twenty Sixteen Default

The menu looks fine on Twenty Sixteen’s Default colour scheme.

If you’ve picked one of the others, there are styling issues which need to be addressed.

Dark colour scheme

The menu disappears on mobile.

Here is a fix. Change the following style rules to these:

Grey colour scheme

The menu doesn’t show up well on desktop.

And another CSS fix. Use this in style.css:

Font and text placement variations

Change the font

I chose to keep the existing font-family, but you could change it if you want to the same font as the header menu by adding this to the .footer-navigation rule:

font-family: Montserrat, "Helvetica Neue", sans-serif

Right align the footer menu

And if you want the menu items right aligned on desktop, add this to .footer-navigation:

text-align: right;

On mobile, the menu items will be left aligned.

Adding image links to the menu with Nav Menu images

If you want to have image links to the Twenty Sixteen footer menu (or any menu) you can use the Nav Menu Images plugin.

Add menu items to your custom menu as normal. If your images have external links, use the Custom Links option.

Then – this is important – save the menu.

You’ll then get the option under the Navigation Label to Upload menu item image.

I recommend not making the images too large. In this example, I sized them to 100 x 100 px before upload. The reason for this is that they’re added as featured images, which you can’t resize easily later.

Once you’ve added an image, the link will say Change menu item image. Here is an example.

Make the alt text of your image the destination site of the link. So if your image goes to the BBC website, make the alt text BBC.

Things to note when using Nav Menu Images

If you see “No items found” when browsing the Media Library for an image, select Images from the dropdown to see your previously uploaded images.

Don’t want the image to link anywhere? You can remove the URL from the URL box once the image is set. I don’t recommend this usage, though.

The plugin adds in a title attribute to the image tag, taken from the text of the Navigation Label. This will show up as a tooltip when you hover over the image.  I don’t like this from an accessibility point of view, because it duplicates the job of the alt text.

Did you find this post helpful?

Please let me know in the comments, and say if you’d like any more tips on Twenty Sixteen.

Category: WordPress Tags: menu, twenty sixteen