In our last WordPress Development Basics article, we created a bare bones WordPress theme from scratch. In this article, we’ll add a custom navigation menu to that theme with the help of functions.php.
The WordPress theme we created last time around was just about as simple as a WordPress theme can be, consisting of only four files: style.css, header.php, index.php, and footer.php. But almost all free and premium WordPress themes also include a file called functions.php. It’s not a requirement, but functions.php works a bit like a plugin, allowing developers too add functionality to their themes beyond the capabilities of templates and stylesheets. Custom navigation, for example!
It’s pretty easy to do, but once again we’re going to break things down into steps.
1. Using your preferred text editor, create an empty file called functions.php in your theme folder and use it to register a custom menu.
To register our new menu, we’re going to write our own function that calls a built-in WordPress function named register_nav_menu(). We’re going to name our function register_my_menu().
Note that it can named anything you want (within the rules of PHP), but for now we recommend going with our suggestion to avoid any confusion.
Copy and paste the following into functions.php:
php
function register_my_menu() {
register_nav_menu('header-menu',__( 'Header Menu' ));
}
Next, we use the built-in WordPress action function add_action() to hook our function into WordPress on init. If this sounds like gibberish, the Plugin API on the Codex offers a detailed explanation of hooks, actions and filters.
If you’re a beginner, and it still sounds like gibberish even after consulting the Codex, don’t worry: it can take time to grasp these concepts.
For now, copy and paste the following code into functions.php:
add_action( 'init', 'register_my_menu' );
What this code does is instruct WordPress to run our function at a particular time, which in turn runs the WordPress function register_nav_menu(), which in turn creates our custom menu named Header Menu.
2. Add the newly registered custom menu to header.php
Last time around, we created a template file called header.php. This is where we’re going to add the menu into the markup. Add the following to the bottom of header.php:
<nav class="header-menu">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</nav>
In the above code, we’ve added a nav wrapper, to keep our HTML5 semantic, and we’ve added the class header-menu for subsequent styling.
The code for header.php, with the above markup and PHP included, should now look something like:
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
<div class="site-name">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</div>
<div class="site-description">
<?php bloginfo( 'description' ); ?>
</div>
</header>
<nav class="header-menu">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</nav>
3. Create a menu in the WordPress Dashboard and assign it to the theme location Header Menu
This is the easy part if you’re familiar with the WordPress Dashboard. Login to the Dashboard, navigate to Appearance > Menus, and create a new menu.
In the newly created menu’s settings (an area located beneath the Menu Structure), check “Header Menu” next to Theme locations and save.
Alternatively, you can assign locations to menus by clicking over to Manage Locations tab.
Now, when you load your WordPress installation, you should see the newly created menu. But it still looks like a regular ol’ list with bullet points and everything, so in our last step we need to add some styling.
4. Add styling to your custom menu
Now just do a straight-up copy and paste of the following CSS into style.css. Feel free to tweak it to your liking. We won’t stop you.
.header-menu ul li {
display: inline-block;
list-style: none;
padding-right: 15px;
}
.header-menu ul li a {
color: #333;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
.header-menu ul li a:hover {
color: #000;
text-decoration: underline;
}
This time when you load up your WordPress installation, you’ll see a familiar (but plain) navigation menu between the header and the site content.
A job well done!