WP Snippet #003 Adding menu’s to your theme.
Tags: wordpress, webdev, php
Published: 2020-01-16 19:16:35

---
title: WP Snippet #003 Adding menu’s to your theme.
published: true
description: How to implement navigational menus in your WordPress themes and enable the menu builder inside of the WordPRess admin area
canonical_url: https://since1979.dev/snippet-003-adding-menus-to-your-theme/
cover_image: https://since1979.dev/wp-content/uploads/2020/01/snippet-003-addin-menus-to-your-theme.jpg
tags: wordpress, webdev, php
---
[Originally posted on my website on January 16th 2020](https://since1979.dev/snippet-003-adding-menus-to-your-theme/)

How to add menu's to your WordPress theme?
------------------------------------------

One of the most intricate parts of any website is good navigation. With WordPress there are a couple of ways you could implement one for your theme. You could ofcourse hardcode a menu, but that kind of defies the point of having WordPress in the first place. You can use the *[wp_list_pages](https://developer.wordpress.org/reference/functions/wp_list_pages/)* function which has a lot of options for you as a developer, but nut so much for your users. So the most flexible way is to implement "menu location" which enable the "menu builder" in the WordPress admin. So in this code snippet we will implement that last option.

{% gist https://gist.github.com/vanaf1979/82484ab9e1746e71c63d5768bd943b7c %}

With the code above we add an action to the *[init](https://developer.wordpress.org/reference/hooks/init/)* hook and register a callback function called *register_navigation_menus*.

Within the *register_navigation_menus* function we use the *[register_nav_menus](https://developer.wordpress.org/reference/functions/register_nav_menus/)* function to register three menu locations by passing an array with three key/value pairs. Each key in the array represents a menu location identifier and the value is the descriptive text shown in the admin area. Note that we use the *[__()](https://developer.wordpress.org/reference/functions/__/)* function on the values to make them translatable.

This code registers the menu locations we want, and enables the menu builder inside the WordPress admin like shown below:

![WordPress admin menu builder page](https://since1979.dev/wp-content/uploads/2020/01/wordpress-admin-menu-builder-page.jpg)

WordPress admin menu builder page

### Show the menu in your theme

Next we need to display our menus inside of our theme. To do so we can use the code snippet shown below:

{% gist https://gist.github.com/vanaf1979/c2dea976ba7cb07b082d9e9912d30a93 %}

To display a menu you can insert this snippet where you want the menu to show in your Html markup. Here we use the *wp_nav_menu* function and pass it an array of arguments. This function can accept [a lot of arguments](https://developer.wordpress.org/reference/functions/add_action/) but the most important one is the *theme_location* one. For this argument we can pass any of the "menu location identifiers" we registered earlier.

As a second key/value pair we pass the *menu_class* key with a value of *your-own-class*. This will add the *your-own-class* class to the menu's ul element. Note that you can pass multiple class names as a single string like 'navbar-nav mr-auto' or whatever classes you may need.

### Add some basic menu styling

To make the menu actually look like a menu you could add the basic Css styling below and adjust it to meet your needs. This will create a right aligned horizontal menu.

{% gist https://gist.github.com/vanaf1979/db965f312548062e157fdc1904eb34b0 %}

#### Follow
Found this post helpful? Follow me on twitter [@Vanaf1979](https://twitter.com/Vanaf1979) or here on Dev.to [@Vanaf1979](https://dev.to/vanaf1979) to be notified about new articles, and other WordPress development related resources.

**Thanks for reading**