hitautodestruct/readme.md

This gist is for showing an example of a custom wordpress menu.

If you want to get more from the menu item simply have a look at the $item object. i.e:

// Will return a large object with lots of props like title, url, description, id etc.
var_dump( $item );

This code works on Wordpress 4.1.1 as of 31st of March 2015

karlhadwen · 2014-11-20T13:31:20Z

SpartakusMd is right. I have to add that you must also have an 'isset' on both '($menu_items[$count + 1]->menu_item_parent)' pieces of code, or you'll get a property of non-object error. Also on the first 'isset' since you're closing the '' tag, make sure you use an else statement to close the tag even if it isn't set, or else you'll be missing a closing tag. I also tested it to multiple levels but it doesn't go that far.

beesmart · 2014-12-30T13:19:21Z

I've run into a problem this code, it works great until you need to add a 3rd level menu-item, at which point the html elements come undone and the child menu items don't show up. I've checked the code to see what could be causing this or what I could do to fix it but to no avail. I've posted a questions here:

http://wordpress.stackexchange.com/questions/173573/wp-custom-nav-menu-problem

If you have any advice/help I'd greatly appreciate it.

mashro3na · 2015-01-03T02:35:57Z

its worked with me by change

$page = get_page( $id );
$link = get_page_link( $id );
to
$title = $item->title;
$url = $item->url;
$class = $item->classes[0];

good work you saved my day! Thank you.

karlhadwen · 2015-02-22T03:59:11Z

@mashro3na can you elaborate? you can't just replace two variables. @hitautodestruct can you fix this?

hitautodestruct · 2015-03-31T13:08:27Z

@karlhadwen Replaced in gist 😄

Valonix · 2015-04-21T07:17:05Z

if you add menu item like "LINK" you get a issue

dmmarmol · 2015-06-08T03:03:52Z

@hitautodestruct I had the same issue that @theodorocaliari. I can't print more than one submenu list and I need to nest every <ul class="submenu"> inside a parent <li>, depending on how much submenu i have.

How can i evaluate the php( $parent_id == $item->menu_item_parent ) when the $item it has more than one parent element?

SimonBak · 2015-09-11T10:02:13Z

Hello,

Thanks for your nice work.
Do you have an idea if i ant to add a third level more ?
Thanks.

gnowland · 2015-10-06T16:50:26Z

@beesmart, you're absolutely right, there's an error in the code.

Line 41 should be:

<?php if ( !isset($menu_items[ $count + 1 ]) || $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ): ?>

and Line 47 should be:

<?php if ( !isset($menu_items[ $count + 1 ]) || $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>

@hitautodestruct you may want to update this in the gist.

loorlab · 2015-10-11T23:37:39Z

@gnowland & @hitautodestruct Thanks for your solutions !

thedgbrt · 2015-12-01T20:51:04Z

@gnowland there's an error in your correction, it should be $menuitems[ $count + 1 ] instead of $menu_items[ $count + 1 ]

michellomp · 2016-02-23T21:43:47Z

I made changes of @gnowland and @dagobertrenouf but the problem is the same i only get one level drop down menu
Does anybody succeed having multi level menu with this code

christianschoenmakers · 2017-06-13T13:36:26Z

The problem is in the ( $parent_id == $item->menu_item_parent ) statements.

While looping a third level menu-item, the parent_id is the ID of the parent item (so second level), while the $parent_id is the top-parent ID.

We've solved this to change $parent_id to an array which contains all of the previous menu-item ID's.
After that, improve the statements with the in_array($item->menu_item_parent, $parent_id) function.

skillmatic-co · 2018-01-23T20:53:44Z

I can't seem to figure out how to put a class (like .menu-item-has-children for example) on the li that has children. Any help?

enesaltuntas · 2018-03-31T16:10:17Z

Hi,

@hitautodestruct How can i get thee child menu items?

mrkkr · 2018-05-15T11:55:51Z

@wespiremedia Could paste code with third level menu?

@enesaltuntas, I found custom Navwalker, third and fourth level children works -> http://cssmenumaker.com/blog/wordpress-3-drop-down-menu-tutorial/

deepk10 · 2018-07-30T06:24:27Z

Superb.

deepk10 · 2018-07-30T06:26:15Z

I have used only this code.

term_id, array( 'order' => 'DESC' ) ); ?>

And get my required output.

ctrlsam · 2018-09-08T09:23:21Z

I have modified this script and improved it if anyone is interested.
https://gist.github.com/SillySam/842d8b5cade983c194a3b8d1a0171287

mostafa272 · 2018-10-30T15:38:30Z

Why don't you use recursion? It is a very simple way and works for the menus with multiple levels.

speedwheel · 2019-01-11T11:30:19Z

Anyway made it work with unlimited levels?

pritamnskr2019 · 2019-02-21T12:12:16Z

url; $title = $item->title; // item does not have a parent so menu_item_parent equals 0 (false) if ( !$item->menu_item_parent ): // save this id for later comparison with sub-menu items $parent_id[] = $item->ID; ?>

class="first_child menuactive menuparent" class="" class="last_child menuactive menuparent"

          <?php }?>>
          <a href="<?php echo $link; ?>" class="title">
              <?php echo $title; ?>
          </a>
      <?php endif; ?>

          <?php if (in_array($item->menu_item_parent, $parent_id)): ?>

              <?php if ( !$submenu ): $submenu = true; ?>

              <ul class="unli">
              <?php endif; ?>

                  <li class="item">
                      <a href="<?php echo $link; ?>" class="title">
                          <?php echo $title; ?>
                      </a>
                      <?php
                        global $wpdb;
                        $sql = "SELECT `post_id` FROM `wp_postmeta` WHERE `meta_key` = '_menu_item_menu_item_parent' AND `meta_value` = '".$item->ID."'";
                        $results = $wpdb->get_results($sql,ARRAY_N);
                        
                        if(!empty($results )){
                          $subsubmenu = array();
                            foreach($results as $result){
                              
                              $subsubmenu[] = $result[0];
                            }
                          $allids = implode(",",$subsubmenu);
                          $sql2 = "SELECT `ID` FROM `wp_posts` WHERE `ID` IN($allids)";
                          $results2 = $wpdb->get_results($sql2,ARRAY_N);
                          
                            $submenus = array();
                            foreach($results2 as $result2){
                              
                              $submenus[] = $result2[0];
                            }
                            
                            $allpostids = implode(",",$submenus);
                            $sql3 = "SELECT `meta_value` FROM `wp_postmeta` WHERE `post_id` IN($allpostids) AND `meta_key`='_menu_item_object_id'";
                            $results3 = $wpdb->get_results($sql3,ARRAY_N);
                            
                            if(!empty($results3)){
                              $orginalmenuitemid = array();
                              foreach($results3 as $result3){
                                $orginalmenuitemid[] = $result3[0];
                              }
                              //print_r($orginalmenuitemid);
                      ?>
                                <ul class="unli">
              
                      <?php        
                                $p =1;

                                foreach($orginalmenuitemid as $originalmenuitemids){
                                  //echo $originalmenuitemids;
                      ?>
                                    <li <?php if($p=1){ ?> class="first_child" <?php }elseif($p == count($originalmenuitemid)){?>
                                          class="last_child"
                                      <?php }else{?>
                                          class=""
                                      <?php }?>>
                                      <a href="<?php echo get_permalink($originalmenuitemids);?>"><span>
                                        <?php echo get_the_title($originalmenuitemids);?>
                                      </span></a>
                                    </li>
                      <?php        
                                  $p=$p+1;
                                }
                      ?>
                                </ul>

                      <?php        
                            }
                        }
                      ?>
                  </li>

              <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ): ?>
              </ul>
              <?php $submenu = false; endif; ?>     
          <?php endif; ?>

      <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>
      </li>                           
      <?php $submenu = false; endif; ?>

  <?php 
    $count++; endforeach; 
    $i++;

  ?>
  </ul>

Third level menu

nickbluestone98 · 2020-02-11T09:23:50Z

That code just doesn't work properly, I ended up just adding the menu items into a PHP array so I could output easily.

Add the following into your functions.php then call in your theme passing the menu of choice.

function wp_get_menu_array($current_menu) {
    $array_menu = wp_get_nav_menu_items($current_menu);
    $menu = array();
    foreach ($array_menu as $m) {
        if (empty($m->menu_item_parent)) {
            $menu[$m->ID] = array();
            $menu[$m->ID]['ID']          =   $m->ID;
            $menu[$m->ID]['title']       =   $m->title;
            $menu[$m->ID]['url']         =   $m->url;
            $menu[$m->ID]['children']    =   array();
        }
    }
    $submenu = array();
    foreach ($array_menu as $m) {
        if ($m->menu_item_parent) {
            $submenu[$m->ID] = array();
            $submenu[$m->ID]['ID']       =   $m->ID;
            $submenu[$m->ID]['title']    =   $m->title;
            $submenu[$m->ID]['url']      =   $m->url;
            $menu[$m->menu_item_parent]['children'][$m->ID] = $submenu[$m->ID];
        }
    }
    return $menu;
}

Then call in your theme $menu_items = wp_get_menu_array('main-menu');

  <nav>
      <ul>
        <?php foreach ($menu_items as $item) : ?>
          <li>
            <a href="<?= $item['url'] ?>" title="<?= $item['title'] ?>"><?= $item['title'] ?></a>
            <?php if( !empty($item['children']) ):?>
            <ul class="sub-menu">
              <?php foreach($item['children'] as $child): ?>
                <li class="b-main-header__sub-menu__nav-item">
                  <a href="<?= $child['url'] ?>" title="<?= $child['title'] ?>"><?= $child['title'] ?></a>
                </li>
              <?php endforeach; ?>
            </ul>
            <?php endif; ?>
          </li>
        <?php endforeach; ?>
     <ul>
</nav>

mehmetsarr · 2021-10-13T09:05:37Z

Hi, has anyone found a solution for the third level menu? The third level menu does not appear on my website.
In addition, the name of the main menu appears in the submenus. I have shared the sample picture.

josh-tt · 2021-10-22T08:40:23Z

That code just doesn't work properly, I ended up just adding the menu items into a PHP array so I could output easily.

Add the following into your functions.php then call in your theme passing the menu of choice.

function wp_get_menu_array($current_menu) {
    $array_menu = wp_get_nav_menu_items($current_menu);
    $menu = array();
    foreach ($array_menu as $m) {
        if (empty($m->menu_item_parent)) {
            $menu[$m->ID] = array();
            $menu[$m->ID]['ID']          =   $m->ID;
            $menu[$m->ID]['title']       =   $m->title;
            $menu[$m->ID]['url']         =   $m->url;
            $menu[$m->ID]['children']    =   array();
        }
    }
    $submenu = array();
    foreach ($array_menu as $m) {
        if ($m->menu_item_parent) {
            $submenu[$m->ID] = array();
            $submenu[$m->ID]['ID']       =   $m->ID;
            $submenu[$m->ID]['title']    =   $m->title;
            $submenu[$m->ID]['url']      =   $m->url;
            $menu[$m->menu_item_parent]['children'][$m->ID] = $submenu[$m->ID];
        }
    }
    return $menu;
}

Then call in your theme $menu_items = wp_get_menu_array('main-menu');

  <nav>
      <ul>
        <?php foreach ($menu_items as $item) : ?>
          <li>
            <a href="<?= $item['url'] ?>" title="<?= $item['title'] ?>"><?= $item['title'] ?></a>
            <?php if( !empty($item['children']) ):?>
            <ul class="sub-menu">
              <?php foreach($item['children'] as $child): ?>
                <li class="b-main-header__sub-menu__nav-item">
                  <a href="<?= $child['url'] ?>" title="<?= $child['title'] ?>"><?= $child['title'] ?></a>
                </li>
              <?php endforeach; ?>
            </ul>
            <?php endif; ?>
          </li>
        <?php endforeach; ?>
     <ul>
</nav>

This works nicely, thanks. Any tips on how to approach getting the current menu item styled?

mehmetsarr · 2021-10-22T12:06:07Z

Bu kod düzgün çalışmıyor, kolayca çıktı alabilmek için menü öğelerini bir PHP dizisine ekledim.

Aşağıdakileri function.php dosyanıza ekleyin ve ardından seçtiğiniz menüden temanızı çağırın.

function wp_get_menu_array($current_menu) {
    $array_menu = wp_get_nav_menu_items($current_menu);
    $menu = array();
    foreach ($array_menu as $m) {
        if (empty($m->menu_item_parent)) {
            $menu[$m->ID] = array();
            $menu[$m->ID]['ID']          =   $m->ID;
            $menu[$m->ID]['title']       =   $m->title;
            $menu[$m->ID]['url']         =   $m->url;
            $menu[$m->ID]['children']    =   array();
        }
    }
    $submenu = array();
    foreach ($array_menu as $m) {
        if ($m->menu_item_parent) {
            $submenu[$m->ID] = array();
            $submenu[$m->ID]['ID']       =   $m->ID;
            $submenu[$m->ID]['title']    =   $m->title;
            $submenu[$m->ID]['url']      =   $m->url;
            $menu[$m->menu_item_parent]['children'][$m->ID] = $submenu[$m->ID];
        }
    }
    return $menu;
}

Ardından temanızı arayın $menu_items = wp_get_menu_array('main-menu');

  <nav>
      <ul>
        <?php foreach ($menu_items as $item) : ?>
          <li>
            <a href="<?= $item['url'] ?>" title="<?= $item['title'] ?>"><?= $item['title'] ?></a>
            <?php if( !empty($item['children']) ):?>
            <ul class="sub-menu">
              <?php foreach($item['children'] as $child): ?>
                <li class="b-main-header__sub-menu__nav-item">
                  <a href="<?= $child['url'] ?>" title="<?= $child['title'] ?>"><?= $child['title'] ?></a>
                </li>
              <?php endforeach; ?>
            </ul>
            <?php endif; ?>
          </li>
        <?php endforeach; ?>
     <ul>
</nav>

This code works fine but when I add 3rd level menu it gives the following warning. How can I fix this?

NOTICE: UNDEFINED INDEX: TITLE IN /HOME/ZIRKON/PUBLIC_HTML/DEMO/CLEANMAX/WP-CONTENT/THEMES/CLEANMAX-MAIN/HEADER.PHP ON LINE 70

OmarHossamEldin · 2022-03-06T19:38:16Z

<nav class='navbar navbar-expand-lg navbar-dark bg-dark'>
            <div class="container-fluid">
                <a class="navbar-brand" href="<?= home_url() ?>"><?= bloginfo() ?></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="<?= home_url() ?>">Home</a>
                        </li>
                        <?php foreach (get_pages() as $page) : ?>
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="<?= home_url() . '/' . $page->post_name ?>"><?= $page->post_title ?></a>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>
        </nav>

OmarHossamEldin · 2022-03-06T19:39:01Z

<nav class='navbar navbar-expand-lg navbar-dark bg-dark'>
            <div class="container-fluid">
                <a class="navbar-brand" href="<?= home_url() ?>"><?= bloginfo() ?></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="<?= home_url() ?>">Home</a>
                        </li>
                        <?php foreach (get_pages() as $page) : ?>
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="<?= home_url() . '/' . $page->post_name ?>"><?= $page->post_title ?></a>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>
        </nav>

better code readability

mehmetsarr · 2022-09-22T07:47:38Z

<?= $page->post_title ?>

this is not happening. main code becomes but dropdown icon disappears

hitautodestruct/readme.md

karlhadwen commented Nov 20, 2014

beesmart commented Dec 30, 2014

mashro3na commented Jan 3, 2015

karlhadwen commented Feb 22, 2015

hitautodestruct commented Mar 31, 2015

Valonix commented Apr 21, 2015

dmmarmol commented Jun 8, 2015

SimonBak commented Sep 11, 2015

gnowland commented Oct 6, 2015

loorlab commented Oct 11, 2015

thedgbrt commented Dec 1, 2015

michellomp commented Feb 23, 2016

christianschoenmakers commented Jun 13, 2017 •

edited

Loading

skillmatic-co commented Jan 23, 2018 •

edited

Loading

enesaltuntas commented Mar 31, 2018 •

edited

Loading

mrkkr commented May 15, 2018 •

edited

Loading

deepk10 commented Jul 30, 2018

deepk10 commented Jul 30, 2018 •

edited

Loading

ctrlsam commented Sep 8, 2018

mostafa272 commented Oct 30, 2018

speedwheel commented Jan 11, 2019 •

edited

Loading

pritamnskr2019 commented Feb 21, 2019 •

edited

Loading

nickbluestone98 commented Feb 11, 2020 •

edited

Loading

mehmetsarr commented Oct 13, 2021 •

edited

Loading

josh-tt commented Oct 22, 2021

mehmetsarr commented Oct 22, 2021

OmarHossamEldin commented Mar 6, 2022

OmarHossamEldin commented Mar 6, 2022

mehmetsarr commented Sep 22, 2022

	<?php
	$menu_name = 'main_nav';
	$locations = get_nav_menu_locations();
	$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
	$menuitems = wp_get_nav_menu_items( $menu->term_id, array( 'order' => 'DESC' ) );
	?>

	<nav>
	<ul class="main-nav">
	<?php
	$count = 0;
	$submenu = false;

	foreach( $menuitems as $item ):

	$link = $item->url;
	$title = $item->title;
	// item does not have a parent so menu_item_parent equals 0 (false)
	if ( !$item->menu_item_parent ):

	// save this id for later comparison with sub-menu items
	$parent_id = $item->ID;
	?>

	<li class="item">
	<a href="<?php echo $link; ?>" class="title">
	<?php echo $title; ?>
	</a>
	<?php endif; ?>

	<?php if ( $parent_id == $item->menu_item_parent ): ?>

	<?php if ( !$submenu ): $submenu = true; ?>
	<ul class="sub-menu">
	<?php endif; ?>

	<li class="item">
	<a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>
	</li>

	<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ): ?>
	</ul>
	<?php $submenu = false; endif; ?>

	<?php endif; ?>

	<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>
	</li>
	<?php $submenu = false; endif; ?>

	<?php $count++; endforeach; ?>

	</ul>
	</nav>

hitautodestruct/readme.md

karlhadwen commented Nov 20, 2014

beesmart commented Dec 30, 2014

mashro3na commented Jan 3, 2015

karlhadwen commented Feb 22, 2015

hitautodestruct commented Mar 31, 2015

Valonix commented Apr 21, 2015

dmmarmol commented Jun 8, 2015

SimonBak commented Sep 11, 2015

gnowland commented Oct 6, 2015

loorlab commented Oct 11, 2015

thedgbrt commented Dec 1, 2015

michellomp commented Feb 23, 2016

christianschoenmakers commented Jun 13, 2017 • edited Loading

skillmatic-co commented Jan 23, 2018 • edited Loading

enesaltuntas commented Mar 31, 2018 • edited Loading

mrkkr commented May 15, 2018 • edited Loading

deepk10 commented Jul 30, 2018

deepk10 commented Jul 30, 2018 • edited Loading

ctrlsam commented Sep 8, 2018

mostafa272 commented Oct 30, 2018

speedwheel commented Jan 11, 2019 • edited Loading

pritamnskr2019 commented Feb 21, 2019 • edited Loading

nickbluestone98 commented Feb 11, 2020 • edited Loading

mehmetsarr commented Oct 13, 2021 • edited Loading

josh-tt commented Oct 22, 2021

mehmetsarr commented Oct 22, 2021

OmarHossamEldin commented Mar 6, 2022

OmarHossamEldin commented Mar 6, 2022

mehmetsarr commented Sep 22, 2022

christianschoenmakers commented Jun 13, 2017 •

edited

Loading

skillmatic-co commented Jan 23, 2018 •

edited

Loading

enesaltuntas commented Mar 31, 2018 •

edited

Loading

mrkkr commented May 15, 2018 •

edited

Loading

deepk10 commented Jul 30, 2018 •

edited

Loading

speedwheel commented Jan 11, 2019 •

edited

Loading

pritamnskr2019 commented Feb 21, 2019 •

edited

Loading

nickbluestone98 commented Feb 11, 2020 •

edited

Loading

mehmetsarr commented Oct 13, 2021 •

edited

Loading