How to add menu to bottom of page?

Hey!

You can easily add a navigation system to the footer area of your theme by modifying the footer.php file located in your theme’s main folder (usually /wp-content/themes/your-theme-name/footer.php). You would also need to add some custom styling to your theme’s stylesheet. This will be the fastest loading option you have.

There are two downsides to this method, however:

1. It will not automatically get updated when you add a menu item in the Appearance>Menus area of your WordPress admin area.

2. If the theme ever gets updated, your footer menu will be lost. This can be overcome if you use a child theme. In this case, you would want to be using Hueman Being as your child theme.

First, to add some custom footer menu styling, edit your theme’s stylesheet by going to Appearance>Editor from your WP admin area. The first file that shows up should be your stylesheet.

Add the following lines anywhere in the stylesheet and save it. You can modify this later after you verify it works to get the look you want. For now, we just want to make sure we have a horizontal nav system that does not have bullet points!

ul.footer-menu {
    list-style-type: none; /* remove bullets */
    margin: 0;             /* overcome any theme styling */
    padding: 0;
}
li.footer-menu-horz {
    display: inline;       /* make it horizontal */
}

To edit your footer.php file to add your footer menu, you would need to go to Appearance>Editor from your WP admin area. Then from the list of files on the right, select “Footer (footer.php)” to edit.

There is a line in the footer.php file that reads:
<div class=”grid one-half last”>

So, somewhere after that, and before the very next </div> add the following and save it:

<ul class="footer-menu">
  <li class="footer-menu-horz"><a href="default.asp">Home</a></li>
  <li class="footer-menu-horz"><a href="news.asp">News</a></li>
  <li class="footer-menu-horz"><a href="contact.asp">Contact</a></li>
  <li class="footer-menu-horz"><a href="about.asp">About</a></li>
</ul>

You should now see a footer menu in the right half of your footer. You will want to play with the styling some to get it to match your site.

I don’t know of plugins specifically for that, but I’m sure there’s something somewhere! Just take advantage of the Add Plugins search function. ??

Just to add a couple of things:

I’m assuming that the “Footer” checkbox under “Menu Settings” on your menu admin page does not give you the results you want – i.e., you want the menu to be in the dark part at the very bottom of the page instead of riding on top of the dark part.

To center your new menu in the right half of the footer, you can add to the ul.footer-menu section of your stylesheet:
`text-align: center;’

And change the display: inline to display: inline-block in the li.footer-menu-horz section.