Customizing the WordPress Footer

In this tutorial we are going to add some new features to the default Underscores.me footer. This will include adding a custom footer menu, adding the copyright text, and adding CSS to customize the look and feel. You will learn the code that needs to be added to our function file to add a new WordPress menu and also how to use the Inspect Element browser tool to help customize your footer CSS styles.

Note: I recommend watching and following along with the video before moving to the Step section below. The video goes in more detail.

Steps

  1. Open the functions.php file
  2. Around line 44 copy the register_nav_menus function for the Primary Menu and paste it directly below.
  3. It should look like the following:

    You can also simply just do the following:
  4. Open the footer.php file
  5. Add the markup for the columns, menu, and copyright. Your footer.php file should look like the following:
  6. Create a new menu from your WordPress Dashboard from Appearance -> Menus. Don’t forget to assign the new menu to the Footer Menu position.
  7. Open the style.css file and add the following CSS to style your footer:
  8. Save all the files you edited in this tutorial and refresh the front-end to view your new footer!

Again, the video really goes into further detail for this tutorial.

Notes from the Video

You can read more about the arguments that can be passed to the WordPress menus here.

Feedback

Please let me know what you think of this tutorial and if you need help with anything.

  • Cool. This has been such a great tutorial, I don’t want to stop. But I save more videos for tomorrow because after the whole day studying/coding and building graphics for the newspaper I contract for I’m done.

  • hey Brad why not just add to the Array rather copying the whole function?

    • Yeah, that will work too. Not sure why I duplicated it. I updated the tutorial.

  • Ihateyourprius

    Hi Brad, new here. This is my first hurdle. I am new to WordPress but I have been using Bootstrap for years. My issue is that my theme is only showing on the sample page in WP. I noticed that the other smaple pages I created “test 1” and “test 2” The theme is not showing. When I mess with the static front page / recent post settings and change it to “static” the theme goes away. Why am I dumb?

    BTW this has been great so far. Really helpful

    • I am going to need a bit more detail to understand what is going on. Like what you mean by ‘the theme goes away”.. Jump in the forum or send me an email and we will get it sorted out.

      I am glad you are enjoying the course.

      • Ihateyourprius

        Hi Brad. So the sample page WordPress gives you is themed as it should be. If I click any other page I create its strips out the theme. Maybe I am just not far along enough in the course.

        • From the screenshot it looks like you just added the BS styles to the index.php page template. Go back over this tutorial: https://bootstrapwp.com/adding-bootstrap-grid-system-wordpress/

          Notice step 5. It says “The steps above need to be repeated for all the page templates..” Hopefully you are watching the videos that go over all the required steps.

          If you have any further questions please create a topic in the forum so we don’t clog up the comments with support questions. Thanks!

          • Ihateyourprius

            You rock thank you!

  • ajay bhatia

    hi Brad i am having problem in styling of footer menu as i have followed all steps but changes are not reflecting. please help

    • Have you determined that your custom styles are being saved to your stylesheet? Please create a topic in the support forum if you are still having issues.

      • ajay bhatia

        hi Brad,
        Thank you so much for replying.. Problem has solved

        Thank You for making cool 🙂 Tutorials