How to create a simple WordPress menu

How to create a simple WordPress menu

is a very important and indispensable component of a website. Menu usually has many forms, such as menu level 1, multi-level menu, menu suitable size membrane (responsive menu), … In this article I will share ways to write a responsive menu for 1 website interface Using is very simple.

In the interface design website with bootstraps, I talked about creating a responsive menu using bootstraps. If you haven’t already, you can review and create a similar menu. With a menu format, it can fit a variety of different sized screens. And to create a customizable menu, read this article carefully.

Register the location menu.

What is the menu location and why must register it, how to register it ?. Menu location translates to mean menu location. WordPress allows users to create different menus in different locations. Do you see that some websites have two different menus that are usually located above and below the website. But having a menu does not matter. I do not think that registering the location menu is redundant, because in addition to making your website look more professional, this will help your website expand later. Ok so long, I just started doing it.

Open the file called “functions.php” and core the following two paragraphs.

add_theme_support( 'menus' );

       'main-nav' => 'Menu chính' ) );


  • The “add_theme_support” is for you to declare that your themes have menu support. It’s like declaring websites that support post thumbnails in the tutorial on writing basic wordpress themes that I mentioned.
  • The “main-nav” is the id of the menu and “Menu chính” is the name.
  • register_nav_menus” is the one that has registered the menu location, in the array array you can create many different locations.

When you’ve done this, go to Interface => Customize => Menu => Menu location, you’ll see there’s a main menu there.

Now you turn Interface => Menu. You create an arbitrary menu and select Show location as the main menu then save.

Display menu in addition to themes

Please locate your menu before putting in the code instead.

Now replace the code on the paragraph below

 <ul class="nav navbar-nav">

         $menuLocations = get_nav_menu_locations(); 
         $menuID = $menuLocations['main-nav']; 
         $primaryNav = wp_get_nav_menu_items($menuID); 
       foreach ( $primaryNav as $navItem ) {
          echo '<li> <a href="'.$navItem->url.'" title="'.$navItem->title.'">'.$navItem->title.'</a> </li>';
 <!--li><a href="#">Trang chủ</a></li>
 <li><a href="#">Tin tức</a></li>
 <li><a href="#">Về chúng tôi</a></li>
 <li><a href="#">Giới thiệu</a></li>
 <li><a href="#">Liên hệ</a></li-->

I comment on the old tags so that it won’t show up.

I explained about the code above a bit, note that this way can not use the multi-level menu okay.

  • $menuLocations: Retrieve the menu position.
  • $menuID: Find the main-nav menu ID I registered in the file “functions.php”
  • $primaryNav:will retrieve the items in the menu specified above.
  •  Loopforeach will retrieve the items and include information such as url links, and title.

So you can customize your menu right on wp-admin without having to interfere with the code. You remember that the above method cannot be used for multi-level menus. If you want to use the multi-level menu, use the function “wp_nav_menu()” and redesign with css.

Good luck.

Bài liên quan
Lượt xem