How to add a menu to a wordpress theme?

This post is a continuation of previous posts at  Create a custom theme and Content in a custom theme.
In this post we will add a menu to the theme.
Let us look up the dashboard of our wordpress site as it is now.

There is no menu option in the Appearance sub menu.

To add the option we shall have to add a new file functions.php into our plugin. Let us view our theme directory as it looks at the moment.

We have just got the 2 files index.php and style.css. The file style.css is blank, while the contents of index.php are:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Champak Theme</title>
</head>
<body>
<div style="border-width:10px;border-color:red;border-style:ridge;background-color:yellow;">
<h1>Header</h1>
<?php get_header(); ?>

</div>
<div style="border-width:10px;border-color:red;border-style:ridge;background-color:green;">
<h1>Sidebar</h1>
<?php get_sidebar(); ?>
</div>
<div style="border-width:10px;border-color:red;border-style:ridge;background-color:pink;">
<h1>Footer</h1>
<?php get_footer(); ?>
</div>
</body>
</html>

To add the menu we will create a functions.php file as suggested earlier.

<?php
function register_my_menu() {
register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );
?>

Refresh the admin page and look up the Appearance menu now.
The Menus option is available now.

Click the Menus option and you get to the page where a new Menu can be created.

How do you show it in the theme?

Pick a location and write the following code.

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

The whole code of index.php now.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Champak Theme</title>
</head>
<body>
<div style="border-width:10px;border-color:red;border-style:ridge;background-color:yellow;">
<h1>Header</h1>
<?php get_header(); ?>
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</div>
<div style="border-width:10px;border-color:red;border-style:ridge;background-color:green;">
<h1>Sidebar</h1>
<?php get_sidebar(); ?>
</div>
<div style="border-width:10px;border-color:red;border-style:ridge;background-color:pink;">
<h1>Footer</h1>
<?php get_footer(); ?>
</div>
</body>
</html>

Navigate to the site in the browser and see the result.

To add another menu simply register another menu in functions.php

<?php
function register_my_menu() {
register_nav_menu('header-menu',__( 'Header Menu' ));
register_nav_menu('footer-menu',__( 'Footer Menu' ));
}
add_action( 'init', 'register_my_menu' );
?>

and place it in some place in the theme. In our case we have placed it in the footer.
Here is the new index.php.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Champak Theme</title>
</head>
<body>
<div style="border-width:10px;border-color:red;border-style:ridge;background-color:yellow;">
<h1>Header</h1>
<?php get_header(); ?>
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</div>
<div style="border-width:10px;border-color:red;border-style:ridge;background-color:green;">
<h1>Sidebar</h1>
<?php get_sidebar(); ?>
</div>
<div style="border-width:10px;border-color:red;border-style:ridge;background-color:pink;">
<h1>Footer</h1>
<?php get_footer(); ?>
<?php wp_nav_menu( array( 'theme_location' => 'footer-menu' ) ); ?>
</div>
</body>
</html>

Finally we create a new menu called Menu 2 and place it in the footer.

We haven’t done anything in style.css so far. It is to styling our wordpress theme that we shall turn to next.

Leave a Reply