How to create footer menu in your WordPress site

WordPress allow you to manage multiple menus and assigning them to different locations of your website. If your WordPress theme does not have a footer menu and you want it in your footer section of your blog or website then this article is for you.

Many website owners want to put their about us, contact us, private policy and disclaimer details to the bottom section of their blog or site. In this article, we will show you how to add footer menu to your bottom or footer section of your WordPress site.

In our steps of creating footer menu we will first create the option of selecting “footer menu” in WordPress dashboard and then in second step we will create the navigation menu in the bottom section of your WordPress blog or site.

Adding footer menu option to WordPress dashboard

To add footer menu option to WordPress dashboard just copy and paste following codes to your function.php file.

function my_theme_setup() {
            // Register new footer menu
            register_nav_menu( 'secondary', __( 'Footer Menu', 'twentytwelve' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup', 11 );

After adding above codes to your function.php, you can see it in your dashboard > appearance > menu section showing an option to select footer menu.

How to create footer menu to your WordPress site

Add footer navigation menu

Now, you need to create footer menu in the bottom section of your theme folder to get it work. Copy and paste following codes to your footer.php file.

<nav id="footer-navigation" class="top-navigation" role="navigation">
	<?php wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

With this code now you are ready to have your footer menu in your site. Go back to your menu section in dashboard and add your categories or pages or posts to it.

You can now see that specific menu in the bottom section of your website. You will definitely not find it in order. To give it a proper shape you need to add certain codes to your style.css file. Copy and paste following codes to your style.css file.

.top-navigation {
float:right;
}
.top-navigation li{
display:inline;
font-size: 12px;
}
.top-navigation a {
            color: #A6A6A6;
            padding-right:5px;
            padding-left:2px;
}

.top-navigation a:hover {
            color: #ffffff;
}

You may also like...