• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / WordPress / How To Add A New Twenty Sixteen Footer Menu

How To Add A New Twenty Sixteen Footer Menu

Posted: September 2, 2016 Updated: January 4, 2018 by Claire Brotherton
17 Comments

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.

Twenty Sixteen social media links, showing invalid social profile

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.

Custom menu set to the Footer menu area

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.

Unstyled Twenty Sixteen footer menu

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.

Twenty Sixteen footer menu 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.

Twenty Sixteen footer menu and main navigation on mobile

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.

Disappearing mobile footer menu with the Dark colour scheme

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

Grey colour scheme

The menu doesn’t show up well on desktop.

Footer menu with the Grey colour scheme

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.

Custom link with image
Icon designed by Madebyoliver from Flaticon

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.

Footer menu with images
Footer menu with images. Icons designed by Madebyoliver from Flaticon.

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.

Nav Menu Images - No items found

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.

Related

Category: WordPress Tags: menu, twenty sixteen

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. jose says

    September 12, 2016 at 11:21 am

    hi i want to see the location of this child theme’s footer.php, below the line am following this guide

    Reply
  2. Johanna Ouwerling says

    September 21, 2016 at 12:35 pm

    I am going to try this. I want to add some logos to the footer menu. I have 10 logos. Will that work?
    And what happens to the Social Media Icons? Are they displayed next to the logos then?

    Reply
  3. Johanna Ouwerling says

    September 22, 2016 at 10:36 am

    Ok I got it to work! Thanks a lot for the detailed description.
    I had some problems creating a child theme because of the sidebars visual editor, but I found the Child Theme Configurator and that worked like a charm.
    If anybody is interested, you can see the logos with links here: http://www.versterktnetwerk.nl/
    BTW is there a possibility to open external links in a new window? That is without a plugin.
    Thanks a lot for this explanation Claire!

    Reply
    • Claire Brotherton says

      September 22, 2016 at 11:20 am

      Glad you got it to work, Johanna. Looks great! 🙂

      This article explains all about opening external links in a new window/tab, including in menus. http://allyssabarnes.com/open-external-links-new-tab/.

      Reply
      • Johanna Ouwerling says

        September 22, 2016 at 11:34 am

        Thanks Claire! Of course. I should have thought of that.
        Working great now. 😀

        Reply
  4. Nikhil says

    December 20, 2016 at 6:45 pm

    Hi Claire! This was of great help! Thanks for writing this article 🙂

    I was able to create a footer menu and thus maintain a clean look for my blog.

    Here is the blog: http://themenonfiles.com/

    Thanks again!

    Reply
    • Claire Brotherton says

      December 20, 2016 at 9:22 pm

      Cool – thanks for sharing the link Nikhil. 🙂

      Reply
  5. John Royce says

    January 12, 2017 at 2:20 pm

    Thank you! This was a timely and helpful tutorial … I do like the TwentySixteen theme but it is missing a few key elements for some reason.

    I was expecting the usual runaround involved in locating solutions to simple issues on WordPress, but I found your information at the outset and it WORKED. I’m not completely untechnical but I do forget things in between wordpress modifications, since it’s not my main occupation.

    I’ll keep you in my bookmarks, thanks again!

    Reply
    • Claire Brotherton says

      January 13, 2017 at 9:28 pm

      Thanks John – good to know the tutorial helped.

      Let me know if you have any other queries in future!

      Reply
  6. Anna says

    May 18, 2017 at 12:55 pm

    Hi Claire
    Thanks for a great tutorial.
    I’ve managed to create the menu, but for some reason the style wont go through. Would you happen to know what I am doing wrong when posting it to the style sheet?
    Cheers

    Reply
    • Anna says

      May 18, 2017 at 1:01 pm

      Nevermind. I worked it out by adding it to my custom css instead.

      Thanks for a great blog!

      Reply
  7. Christine says

    November 28, 2017 at 1:26 am

    The blog post says to add code, but I can’t see the code to add. Tried using Chrome and IE and still can’t see it…

    Reply
    • Claire Brotherton says

      November 29, 2017 at 12:38 pm

      Hi Christine

      Thanks for reading!

      Not sure what happened there with the code, but I think I fixed it now. Let me know if it still doesn’t work.

      Cheers

      Claire

      Reply
  8. lookingforcode says

    June 19, 2018 at 12:50 pm

    i also can’t see the code to add. Please add the code to read. Thanks

    Reply
  9. lookingfor says

    June 19, 2018 at 4:03 pm

    i also can’t see the code to add. Please add the code to read. Thanks

    Reply
    • Claire Brotherton says

      June 22, 2018 at 12:46 pm

      That’s weird, it’s working for me.

      Do you by any chance have Javascript disabled in your browser?

      Reply
  10. Frank Spade says

    January 1, 2022 at 2:25 pm

    Hi Claire,
    first, have a happy new year. Hope all is well in your world.
    Thanks for your helpful explanations.
    One thing I didn’t figure out yet is, how to place the menu items on one line and without the list points.
    I greatly appreciate your help.
    Kind regards,
    Frank

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map