Please, enter a valid email!

How to Build WordPress Navigation Using wp_nav_menu()

Every modern WordPress theme should include many common elements within the code. Hard-coding manual navigation works if you've already created the content, but it is not very dynamic at all. The best method would be creating your own wp_nav_menu programmatically which an administrator can then tie into one of their own menus.

For this article, I'd like to go over the fundamentals you should follow when creating your own navigation in a theme. Specifically going over the many custom options and how you can set up a brand new menu from scratch. You won't need to create anything for this article so think of it more like a reference guide when coding.

Basics of a wp_nav_menu

Back before the many advancements of WordPress 3.0 developers typically used wp_page_menu() in theme development. This will output a full list of pages along with a homepage link, and you have some parameters which are outlined in the codex. You might still use this in your sidebar or footer area if it makes sense.

But the much more popular method of navigation is through WordPress' built-in menu system. Administrators may create as many custom menus as they like, dragging & dropping links to create manual hierarchy and structure. You can directly manage links to posts, pages, categories, tags, practically anything on your site.

The first step is to write some code in your functions.php file which creates the navigation menu. This may be done with register_nav_menu() or register_nav_menus() if you have multiple items. These menus only require a single identifier called $location along with a small descriptive string.

register_nav_menu( 'primary', 'Primary Menu' );

$location is more like a slug ID used to identify the menu in your theme. You'll reference this defined item inside any PHP theme file you need it to appear. Also note that nav menus will auto-initialize theme support so you do not need to use add_theme_support() for menus.

Positions in your Theme

With your menu(s) setup in functions.php, we should move on to the other theme files. Let's start in a typical location such as header.php where we can add some very basic code. This sample is copied from the wp_nav_menu() codex and includes all of the optional parameters.

$defaults = array(
 'theme_location'  => '',
 'menu'            => '',
 'container'       => 'div',
 'container_class' => '',
 'container_id'    => '',
 'menu_class'      => 'menu',
 'menu_id'         => '',
 'echo'            => true,
 'fallback_cb'     => 'wp_page_menu',
 'before'          => '',
 'after'           => '',
 'link_before'     => '',
 'link_after'      => '',
 'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
 'depth'           => 0,
 'walker'          => ''

wp_nav_menu( $defaults );

I'm going to delve into these options more in the next section. But I'll start by glossing over the first two. Please remember that all of these are optional because the values you see above will become your default if not overwritten. theme_location should match the location slug you chose when registering the wp_nav_menu. This is the only value that you should change to ensure it matches up properly.

Sometimes people confuse the menu location with the menu since they are both very similar. In fact, the menu should almost always be omitted which then allows the webmaster to assign their own menu to that location. This menu parameter is used to include a pre-made admin menu. It should be identical to a pre-existing menu that has already been created. But since most people will not have an existing menu(or this could change between websites) it's best practice to simply leave it out of your theme navigation.

Setting Parameters

The other settings are mostly for customization which is why you could ignore them. But let's tackle the rest so we have a good understanding of the possibilities. container, container_class, and container_id are beneficial when styling the menu. The outer container element wraps around the UL so it could even be an HTML5 <nav> if you like semantics.

The menu_class and menu_id get applied onto the unordered list itself. Each menu gets a class of .menu, so you might wish to change this if you're using more than one. The echo param tells this function to output the HTML menu, otherwise, it will return the value back to a function or PHP variable. When wp_nav_menu() cannot run for any reason, it will automatically fallback to using wp_page_menu() as I mentioned earlier.

The next two before and after params will output any HTML just before each of the anchor links, or just after closing them. link_before and link_after will append HTML inside the anchor links, just before & after the text itself. Remember these options and be sure not to get them mixed up! When in doubt, check the codex for support.

Now if you do not want to use an unordered list you can change this inside items_wrap. It's using a sprintf() type of syntax to replace values with dynamic parameters in the same function. %1$s refers to menu_id, %2$s refers to menu_class, and %3$s is related to the list items output. Since it takes a whole lot of extra work to change the <li> elements it is usually best to just leave this one alone.

Finally, the depth parameter tells the menu how deep we should go for hierarchy. If our header navigation is only a single-tier dropdown menu then we only need 1 level of depth. Or we may have a 2-tier flyout menu which could use 2 levels of depth. -1 is a special value which displays all links in the menu but condenses them together into the same display level.

Now the $walker item is a special parameter for customizing how WordPress outputs content in a tree hierarchy. It expects a new class object which includes customized methods for item output. This is a fairly advanced topic, but you can read more about it from the Walker class reference guide.

Generate Menus from WP Admin

This last bit should provide administrators & webmasters a better way to understand menus. Once logged into the admin panel hover "Appearance" and then click the menus link.


From here you should rearrange links by organizing from the left accordion into the right section. You can give the menu a name which can be referenced in PHP - but notice at the top you'll see a drop-down select menu. Once you register navigation and give it a theme location it appears in this dropdown for the administrator to select. This is how webmasters can organize their own menus without needing to code any PHP.

From the left side, you can choose between pages, posts, links, categories, and tags. If you click the small tab near the top-right corner labeled "Screen Options" you can hide some of these screen choices. You'll also find advanced menu options for giving each link a target(such as target="_blank") or even unique CSS classes.


Each category link could use a different class for unique colors when selected. By default, you'll give each link some text and a brief description, which is often used only by the website administrator. Links can also have title attributes and unique XFN values.

The more you practice using wp_nav_menu the clearer it will become. As a developer who has been using WordPress for years, I find this to be very handy. Newcomers who are just learning the basics of WordPress can still pick this up quickly without much of a struggle.

JetMenu Plugin for Elementor Page Builder

JetMenu for Elementor

There is a simpler way to add a wp_nav_menu to your website. You've probably already heard about page builders - those are software that helps you to build website visually, just drag-and-dropping elements to the work field. Elementor is one of the most popular of them and has a huge fan community. There are lots of plugins created especially for Elementor - they expand its capabilities and add different useful widgets to the menu panel. JetMenu is one of such WordPress plugins that give you an opportunity to create mega menus quickly and easily.

JetMenu for Elementor

Mega menu is a great navigation tool - it is more attractive and useful than a common drop-down menu and improves the user's experience. Besides that, it allows you to show the user much more interesting offers than a regular menu. JetMenu adds widgets both to the Elementor menu (those are Vertical Mega Menu and Mega Menu) and WordPress dashboard (it adds new features to the Appearance > Menus tab). Creation of a new menu is really easy. To start, go to the Appearance > Menus and enable JetMenu for the current location. Afterward, choose what menu you would like to customize and click "JetMenu" button on it. Enable mega menu option and click "Edit Mega Menu item content" button.

JetMenu for Elementor

Enable mega menu option and click "Edit Mega Menu item content" button.

JetMenu for Elementor

You will be moved to the Elementor customization menu and can start adding elements to your mega menu.

JetMenu for Elementor

JetMenu plugin creators shoot a set of video tutorials that will help you to understand all the details of its work. Here's the first of them, but if you go to the YouTube - there will be another 8 videos about different ways of your menu customization.

Stratum - Elementor Extras WordPress Plugin

Demo | Download

Stratum Elementor Addon is a collection of 20+ advanced Elementor widgets with a strong business orientation. The addon enhances the functionality of the existing Elementor widgets collection with extra multipurpose elements for all kinds of websites - from personal portfolios and blogs to business websites and large eCommerce projects.

Although Stratum widgets are fairly equal to premium-like solutions, even Elementor Pro the addon users can try all 20+ widgets for free. Moreover, the addon gives access to exclusive and highly-demanded options unavailable even in the Elementor Pro packages.

In case you only need a couple of advanced widgets from Elementor Pro but you are not ready to pay for the plugin premium subscription, Stratum becomes the solution “in-between”. For the cheap at half the price of Elementor PRO, you will get a handy set of 6 analog PRO widgets:

  1. Advanced Slider
  2. Advanced Posts
  3. Masonry Gallery
  4. Testimonial Carousel
  5. Price List
  6. Flip Box


I hope this in-depth look at the WordPress navigation system can help new developers jump right into theming. Obviously, there are some other important aspects to coding a theme. But navigation is so crucial and also somewhat confusing if you've never built something like this before. Try out these sample PHP codes and see what you can make using WordPress as the core foundation.

Best Plugins for a New WordPress Site [Free eBook]


What is wp_nav_menu()?

It is a WordPress function that shows to the user the menu, attached to come location, ID, slug or just the first non-empty menu.

Is it better to set up the wp_nav_menu with code or through the dashboard?

Choose the method you feel more comfortable with. If you don’t feel confident with the code – it will be completely OK to work with the administration dashboard.

Why do I need to create a wp_nav_menu?

Navigation through the website is the key element of good user experience. If it is not clear and convenient – users won’t stay on the site. And as you know the website’s structure better than anyone – it is you who have to make it understandable for visitors.

Read Also

The Ten Best WordPress Navigation Menu Plugins for Your Website

Color-Coded Dropdown Navigation with Submenus

How to Add More Navigation Menus to Your WordPress Theme

Coding a Mobile-Responsive Website Layout Using Footer Navigation

How to Code a Hidden Sliding Navigation for Responsive Websites

Don’t miss out these all-time favourites

  1. The best hosting for a WordPress website. Tap our link to get the best price on the market with 30% off. If Bluehost didn’t impress you check out other alternatives.
  2. Website Installation service - to get your template up and running within just 6 hours without hassle. No minute is wasted and the work is going.
  3. ONE Membership - to download unlimited number of WordPress themes, plugins, ppt and other products within one license. Since bigger is always better.
  4. Ready-to-Use Website service is the ultimate solution that includes full template installation & configuration, content integration, implementation of must-have plugins, security features and Extended on-page SEO optimization. A team of developers will do all the work for you.
  5. Must-Have WordPress Plugins - to get the most essential plugins for your website in one bundle. All plugins will be installed, activated and checked for proper functioning. 
  6. Finest Stock Images for Websites - to create amazing visuals. You’ll get access to to choose 15 images with unlimited topic and size selection.
  7. SSL Certificate Creation service - to get the absolute trust of your website visitors. Comodo Certificate is the most reliable https protocol that ensures users data safety against cyber attacks. 
  8. Website speed optimization service - to increase UX of your site and get a better Google PageSpeed score.

Jake Rocheleau

First it was design, then writing, and now affiliate marketing. Over a period of 6-7 years he wrote a lot of content for many websites. You can reach Jake on Twitter.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

2 responses to “How to Build WordPress Navigation Using wp_nav_menu()”

  1. Bernardjlr says:

    ask me why coordinate enterprise MTCH reduced 2

    A month moved according to since last money coming in study due to come close to matching team (MTCH). stocks and shares have forfeit with regard to 2.7% in that point in time, Underperforming this S 500.

    is able to any brand-new pessimistic wave go forward leading up to it has a next cash generate, Or is generally connect workforce because for an outbreak? before associated with us rush involved with here is how speculators moreover analysts need responded in recent times, allow take a quick look at the actual most current money study thought out strategies a better handle on the top instigators.

    accommodate range Q2 net income and therefore gains rise Y/Yspecified of cents second quarter 2020 for every give 51, understanding that really improved 13% brought on by last year quarter physique.

    bottom line associated with $555.5 million planted 12% annually due to tougher momentum available at Tinder and valuable acts of hinge, pairs not to mention OkCupid. not including the issue among forex currency market, the model went up 14% year over year to $566.5 million. those benefit experienced been above all centric simply by development of median client bottom level.

    notably, training utilizing all the brand has grown and since the COVID 19 outbreak, even among younger slimmers and therefore girls. in addition, private information perceived jump in inclination for it to cost centric courtesy of sturdy customer base coming from all graphics let providers to increase proposal in the midst of the coronavirus crunch activated shelter within position helpful hints.

    your current Zacks total price to work with revenue in every expose in addition,yet earning potential was considered placed at 56 nickels $529 million, Respectively.

    this is basically the first quarter in which encounter fraction informs us as a totally independent general population company. remarkably, upon Jun 30, 2020, many connections caused the charmlive reviews lonliness of the companies earlier better-known as accommodate crew, inc. (categorised as encounter business and also IAC/InterActiveCorp (identified as IAC entire operation triggered two apart people agencies blend with category, in which constitutes the firms along with start beat staff combined with absolutely sure finance subsidiaries used through the process of IAC, and also IAC, comprising several other IAC specialists over match club (the actual splitting up, The missions concerning ex – IAC organisations as apposed to encounter bunch may be needed as a.

    the usa advertiser top climbed 4% at 4.7 million, as long as external refined 17% you can 5.4 million. trend of client base in north american in addition to the around the globe was indeed centric to rise in member in Tinder, joint, OkCupid furthermore twos.

    the us ARPU increasing 7% when you need to 65 nickels, though it is true foreign ARPU decreased 5% in order to 53 pence. usd unlike european effectively values.

    the organization continues to expand businesses during essential currency markets. put up OkCupid popularity in china, business is in fact seeking to preserve push to turkey, germany in addition Israel. in, get started with related to Hawaya the business islamic concentrating instance across 12 currency markets primarily during the Middle east, western european western world but also tibet, remains dominant. an additional is certainly seeing successful human being business expansion in your market, just what bodes you know.

    likewise, tougher Tinder mean advertiser amplified 18% year over year arrived at 6.2 million, and that contributed on your quarterly consequences.

    Direct gross income via Tinder concentrated 15% year over year. enterprise designed in person using Tinder, A anyone to one television chitchat functions, In a proposal in cash in entirely on soaring clout akin to video recording personals between cordesperateavirus made shield positioned tips.

    Direct revenue at not for Tinder makes each and every other increased somewhat 9% throughout a year over year footing, serious and also by 5% development in ARPU, plus 1% craze of moderate prospects contribution off non a number of subscriber one video training earnings. markedly, hinge ARPU am increase over 60% much more than a year over year cycle in the second quarter.

    moreover, connect class had romance software quite a lot of striper presented like the active streaming element labelled! To enhance membership to practice social distancing long time getting to know between your coronavirus pandemic. moreover, depend iphone app contains started a your own trait in addition a almost all that allows thrive video clip dating sites. firm witnessed healthy and well balanced use associated with show endowed offerings from your second quarter.

    revised EBITDA turned out to be $227.8 million, shifting upward 13% year over year. regulated EBITDA perimeter extended 30 time particulars (bps) year over year to allow them to 41%.

    Total employed can cost and simply running costs, As a share having to do with revenues, hired 100 angle rewards (bps) employing year over year point of view and then arrived in at only 65% inside of suffered quarter. this was operated by just decrease in selling coupled with campaigns disbursements, as well as,while entire administrative outlays, but also discount dedicate to getaway.

    carrying out work profit complicated 14% the year ago quarter tally within order to $195.6 million. doing business perimeter grown 80 bps into 35%.

    total amount sheet us dollars FlowAs connected with Jun 30, 2020, beat cluster just had cash and funds counterpart balance including $129.3 million as opposed to $465.7 million adjusted Dec 31, 2019. adjusted Jun 30, 2020, firm maintained longer term economic over $3.53 thousand weighed against $2.89 billion since Dec 31, 2019.

    the profit and then credit balance due by Dec 31, 2019 could have been altered with respect to splitting up complete with IAC.

    at the time of Jun 30, 2020, the business similarly recorded $1.7 billion dollars linked changeable elderly notes up until now planned just previously IAC. the particular organization encountered a brilliant total of $20 million by Jun 30, 2020 of their $750 million of revolving credit record office. the amount ended up being paid back in early July and the loan service is undrawn since august 4, 2020.

    for the six months broken Jun 30, 2020, enterprise launched jogging salary connected $275.9 million likened to $205.2 million during the six month period of time was completed Jun 30, 2019. to six months broken Jun 30, 2020, Free monetary was basically $257.8 million as opposed to $184.4 million inside of the six month effort finished Jun 30, 2019.

    throughout the divulged quarter, the corporate repurchased 0.6 million stocks and shares appeal $51.2 million by a standard valuation on $80.61 for each and every split.

    GuidanceMatch church is expecting third quarter earnings of at least $600 million. most of the Zacks total figure is already labelled at $564.4 million.

    naturally worn in EBITDA is predicted in to select from of $215 $225 million.

    specifically have got assessments recently developing now?

    it turns out, bids inspection offer trended downhill during the past month. specific general opinion price does offer moved 20.18% due to improvement.

  2. Romeo says:

    New Email List of LinkBio Users. Sell your products or services directly with cold email marketing to Instagram users that uses LinkBio in their profiles Download it from here“>”>”>

Leave a Reply

Your email address will not be published. Required fields are marked *