QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Generating Custom Markup For WordPress Menu

Generating Custom Markup For WordPress Menu

wordpress-menu

WordPress generates HTML markup for menu items and we only have the freedom to style the markup using CSS. Its fine if you are a good web designer and can style the generated markup. But what if you are integrating frameworks like Bootstrap or Foundation Or have a different markup in mind for styling. WordPress generated markup is different then the navigation bar markup for Bootstrap or Foundation. In this post I will provide the best solution for generating custom markup for WordPress menu items which can be for any framework or for your own styling.


In this post we will generate WordPress menu markup for Bootstrap framework.

wp_nav_menu() function in wordpress allows you to customize class and id of the generated HTML by passing desired options as argument to it. But its very limited and complicated. In this post I will provide a method to collect the menu items in a parent and child relationship up to 2 depth level.

WordPress provides a function wp_get_nav_menu_items() which returns all menu items of a provided menu slug or name in form of WP_Post objects.

There are many member variables of the WP_Post object. For creating a custom menu we need to care only about menu_item_parent and db_id member variables. There is a special relationship between these two variables. “menu_item_parent of top most parent element is 0. But menu_item_parent of other child and sub-child’s is equal to their parent’s db_id.”

Now let’s first print all the menu items and check weather the above relationship is verified or not.

header.php

          $menu_name = 'main'; //this is my registered menu name
          if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name]))
          {
            $menu = wp_get_nav_menu_object($locations[$menu_name]);
            $menu_items = wp_get_nav_menu_items($menu->term_id);
           
            print_r($menu_items);
          }

The above code prints an array of WP_Post object. Each object in the array represents menu item of the menu named “main”. If you test the above code you will see that the relationship between menu_item_parent and db_id.

Now we will take advantage of this relationship and build a two dimensional array containing top level parent element and its childs, i.e., depth 2.

header.php

<?php

              $parent = array();
              $menu_name = 'main';
              if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name]))
              {
                $menu = wp_get_nav_menu_object($locations[$menu_name]);
                $menu_items = wp_get_nav_menu_items($menu->term_id);
               
                $parent_id = 0;

                foreach((array)$menu_items as $key => $menu_item)
                {
                 
                  if($menu_item->menu_item_parent == 0)
                  {
                    $parent_id = $menu_item->db_id;
                    $title = $menu_item->title;
                    $url = $menu_item->url;
                    array_push($parent, array("title" => $title, "url" => $url, "child" => array()));
                  }
                  else if($menu_item->menu_item_parent == $parent_id)
                  {
                    $title = $menu_item->title;
                    $url = $menu_item->url;
                    array_push($parent[count($parent) - 1]["child"], array("title" => $title, "url" => $url));
                  }
                  else{}
                }
              }
    ?>

In the above code we are creating a $parent variable and storing top level menu items and their respective child items in form of two dimensional array in it. We are only storing the link and name of the menu items in the $parent variable.

Now we can loop over the items and print our custom markup for bootstrap navbar.

header.php

<ul class="nav navbar-nav">
            <?php
              foreach ($parent as $key => $value)
              {
                if(empty($value["child"]))
                {
                  echo "<li><a href='" . $value["url"] . "'>" . $value["title"] . "</a></li>";
                }
                else
                {
                  echo '<li class="dropdown"><a href="' . $value["url"] . '" class="dropdown-toggle" data-toggle="dropdown">' . $value["title"] . ' <b class="caret"></b></a><ul class="dropdown-menu">';
                  foreach ($value["child"] as $key => $value)
                  {
                    echo '<li><a href="' . $value["url"] . '">' . $value["title"] . '</a></li>';
                  }
                  echo '</ul></li>';
                }
              }
            ?>
</ul>

In the above we loop through the $parent variable and then echo the appropriate bootstrap markup for top level menu items and also for child menu items if any exists.


Conclusion

You can customize the above code to include more than 2 depth levels. And also instead of creating a bootstrap navbar you can create your own navigation menu or integrate any other framework like foundation.


Mar 23, 2014Narayan Prusty
Understanding HTML img tagTabs Using HTML And CSS Only
Comments: 2
  1. Jon
    6 years ago

    This is great. It worked wonders for me. How would you go about adding the .active state to the current menu item?

    ReplyCancel
  2. sonam
    7 years ago

    Nice script… thx

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 2 Comments WordPressbootstrap, menu, responsive, web design, wordpress
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Understanding HTML img tag
  • Customizing WordPress Admin Toolbar
  • Media Queries Tutorial
  • WordPress Custom PHP, JS and CSS Plugin
  • WordPress Default Comment Form CSS Classes
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license