{"id":209676,"date":"2015-10-14T13:54:15","date_gmt":"2015-10-14T20:54:15","guid":{"rendered":"http:\/\/css-tricks.com\/?p=209676"},"modified":"2015-12-08T07:08:37","modified_gmt":"2015-12-08T14:08:37","slug":"the-wordpress-nav-walker-class-a-guided-var_dump","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-wordpress-nav-walker-class-a-guided-var_dump\/","title":{"rendered":"The WordPress Nav Walker Class: A Guided var_dump()"},"content":{"rendered":"<p><em class=\"explanation\">The following is a guest post by <a href=\"http:\/\/scottfennell.org\" rel=\"noopener\">Scott Fennell<\/a>. Scott is a WordPress theme &#038; plugin developer in Anchorage, Alaska. Here, he customizes the default HTML output of WordPress&#8217; menu system to his liking, without damaging the useful things it already does.<\/em><\/p>\n<p>There are many things about the WordPress nav menu system that I like, and a handful of things I really dislike. The things I dislike happen to trigger my pet peeves: Markup-bloat and non-<a href=\"https:\/\/smacss.com\/\" rel=\"noopener\">SMACCS<\/a>-ish class names. To me,  it&#8217;s worth a deep dive to correct this situation.  However, I don&#8217;t want to lose integration with the admin UI, and I don&#8217;t want to lose the dynamic class names that core gives us, such as <code>current_page_item<\/code> or <code>current-menu-ancestor<\/code>.  Therefore, I&#8217;m not going to replace anything:  I&#8217;m going to extend the PHP class that draws the nav menus:  The <a href=\"https:\/\/core.trac.wordpress.org\/browser\/tags\/4.3.1\/src\/wp-includes\/nav-menu-template.php#L16\" rel=\"noopener\"><code>Walker_Nav_Menu<\/code><\/a> class.<\/p>\n<p><!--more--><\/p>\n<p>I&#8217;ll do this by building a plugin that outputs nav menus with whatever markup and classes I want.  Along the way, I&#8217;ll stop and <strike>smell the roses<\/strike> <code>var_dump()<\/code> the PHP variables that WordPress exposes to us.  This plugin will have the following components:<\/p>\n<ol>\n<li>A main plugin file to register the plugin and call other files<\/li>\n<li>A shortcode for outputting the menu<\/li>\n<li>Some CSS, JS, &#038; SVG to do things like show\/hide submenus<\/li>\n<li>A custom walker class, which will extend the core <code>Walker_Nav_Menu<\/code> class<\/li>\n<\/ol>\n<p>Of those components, all but the last one will act mainly as placeholders.  They&#8217;ll offer the minimum amount of code in order to achieve the minimum viable product, and I won&#8217;t be exploring them in detail.  They will provide just enough of a foundation for me to build a custom walker class, which is the focus of this article.<\/p>\n<h3>Assumptions<\/h3>\n<ul>\n<li>Let&#8217;s do this on the <a href=\"https:\/\/wordpress.org\/themes\/twentyfifteen\/\" rel=\"noopener\">twentyfifteen<\/a> theme<\/li>\n<li>If any other plugins are active, be sure they don&#8217;t cause JS or PHP errors.  If in doubt, deactivate them<\/li>\n<li>I&#8217;m on WordPress 4.3.1. at the time of writing<\/li>\n<\/ul>\n<h3>The Plugin<\/h3>\n<p>I&#8217;m going to cite blocks from the finished plugin as we go. You can grab it from <a href=\"https:\/\/github.com\/scofennell\/csst-nav\" rel=\"noopener\">my GitHub repo<\/a> if you&#8217;d like to refer to the finished product, or even install it on a WordPress test site. <\/p>\n<figure id='post-209678' class='align-right media-209678'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/10\/finished.png' alt='' data-recalc-dims=\"1\" \/><figcaption>The output from the finished plugin<\/figcaption><\/figure>\n<h3>The Shortcode<\/h3>\n<p>The plugin works by registering a shortcode, <code>[csst_nav]<\/code>.  The shortcode takes one argument, <code>which_menu<\/code>, where you can choose which nav menu to output by providing the slug, ID, or title of a nav menu.  Here are some examples, where I happen to have a menu called &#8220;Legal Links&#8221;, with a slug of <code>legal-links<\/code> and an ID of <code>5<\/code>:<\/p>\n<ul>\n<li><code>[csst_nav]<\/code><\/li>\n<li><code>[csst_nav which_menu='legal-links']<\/code><\/li>\n<li><code>[csst_nav which_menu='Legal Links']<\/code><\/li>\n<li><code>[csst_nav which_menu='5']<\/code><\/li>\n<\/ul>\n<figure id='post-209679' class='align-right media-209679'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/10\/editor.png' alt='' data-recalc-dims=\"1\" \/><figcaption>Using the shortcode in the editor<\/figcaption><\/figure>\n<p>The shortcode is a wrapper for the <a href=\"https:\/\/core.trac.wordpress.org\/browser\/tags\/4.3.1\/src\/wp-includes\/nav-menu-template.php#L16\" rel=\"noopener\"><code>wp_nav_menu()<\/code><\/a> function, which takes a ton of arguments.  <\/p>\n<p>Here&#8217;s where I depart from the defaults and do <em>what I prefer<\/em> instead:<\/p>\n<ul>\n<li><code>menu<\/code>: I want to be able to specify which menu to grab.<\/li>\n<li><code>container<\/code>: I want less markup, so no container element is needed.<\/li>\n<li><code>menu_class<\/code>: I love class names.  I&#8217;ll give this some classes namespaced for my plugin and for the menu I&#8217;m grabbing.<\/li>\n<li><code>echo<\/code>: No thank you. I&#8217;ll return the menu rather than echo it.<\/li>\n<li><code>items_wrap<\/code>: I&#8217;ll wrap the items in a <code>&lt;nav&gt;<\/code> rather than the default unordered list.<\/li>\n<li><code>before<\/code>: I&#8217;ll open each menu item as a <code>&lt;span&gt;<\/code>, and also get rid of <a href=\"https:\/\/core.trac.wordpress.org\/browser\/tags\/4.3.1\/src\/\/wp-includes\/nav-menu-template.php#L115\" rel=\"noopener\">core&#8217;s hard-coded <code>&lt;li&gt;<\/code><\/a>.\n<li><code>after<\/code>: I&#8217;ll close each menu item with a closing <code>&lt;\/span&gt;<\/code>, and also get rid of <a href=\"https:\/\/core.trac.wordpress.org\/browser\/tags\/4.3.1\/src\/\/wp-includes\/nav-menu-template.php#L188\" rel=\"noopener\">core&#8217;s hard-coded <code>&lt;\/li&gt;<\/code><\/a>.\n<li><code>before_submenu<\/code>: I&#8217;ll open each submenu as a <code>&lt;span&gt;<\/code> instead of a <code>&lt;ul&gt;<\/code>.\n<li><code>after_submenu<\/code>: I&#8217;ll close each submenu with a closing <code>&lt;span&gt;<\/code>, rather than a closing <code>&lt;\/ul&gt;<\/code>.\n<li><code>walker<\/code>: <strong>This is why you&#8217;re reading this article.<\/strong>  I&#8217;ll tell WordPress to use our custom walker class.<\/li>\n<\/ul>\n<p>Some of those arguments, such as <code>before_submenu<\/code> and <code>after_submenu<\/code>, don&#8217;t actually ship with <code>wp_nav_menu()<\/code>.  That&#8217;s okay though, as they still get passed through to the walker class where I can use them however I like.<\/p>\n<p>Here&#8217;s what that all looks like in code:<\/p>\n<pre rel=\"PHP\"><code class=\"language-javascript\">&lt;?php\r\n\r\n  \/**\r\n   * The main template tag for this class.  Get a custom menu via our walker.\r\n   * \r\n   * @return string A WordPress custom menu, passed through our walker class.\r\n   *\/\r\n  public function get() {\r\n    \r\n    \/\/ The CSS class for our shortcode.\r\n    $class = strtolower( __CLASS__ );\r\n\r\n    \/\/ Get a menu from the db.\r\n    $which_menu = $this -&gt; which_menu;\r\n\r\n    \/**\r\n     * Args for a call to wp_nav_menu().\r\n     * \r\n     * Some of these args don't get used by wp_nav_menu() per se,\r\n     * but we're able to pass them through to our walker class, which does use them.\r\n     *\/ \r\n    $menu_args = array(\r\n\r\n      \/\/ Instead of wrapping each menu item as list item, let's do a span.\r\n      'after' =&gt; '<\/span>',\r\n\r\n      \/\/ The closing markup after a submenu.\r\n      'after_submenu' =&gt; '<\/span>',\r\n\r\n      \/\/ Instead of wrapping each menu item as list item, let's do a span.\r\n      'before' =&gt; '<span class=\"%s\">',\r\n\r\n      \/\/ The opening markup before a submenu.\r\n      'before_submenu' =&gt; '<span class=\"%s\">',\r\n\r\n      \/\/ Nope, we don't need extra markup wrapping our menu.\r\n      'container' =&gt; FALSE,\r\n\r\n      \/\/ Nope, let's return instead of echo.\r\n      'echo' =&gt; FALSE,\r\n\r\n      \/\/ Let's use a &lt;nav&gt; instead of a nested list.\r\n      'items_wrap' =&gt; '&lt;nav role=\"navigation\" class=\"%2$s\"&gt;%3$s&lt;\/nav&gt;',\r\n\r\n      \/\/ Which menu to grab?  Takes ID, name, or slug.\r\n      'menu' =&gt; $which_menu,\r\n\r\n      \/\/ CSS classes for our menu.\r\n      'menu_class' =&gt; \"$class $class-$which_menu\",\r\n\r\n      \/\/ Our custom walker.\r\n      'walker' =&gt; new CSST_Nav_Walker(),\r\n\r\n    );\r\n\r\n    \/\/ The main content of the shortcode is in fact a call to wp_nav_menu().\r\n    $out = wp_nav_menu( $menu_args );\r\n\r\n    return $out;\r\n\r\n  }\r\n\r\n?&gt;<\/code><\/pre>\n<p>Alright, enough with the preamble.  It&#8217;s time to dive into the custom walker class.  I love excruciating detail!<\/p>\n<h3>The Custom Walker Class<\/h3>\n<p>There is something of a hierarchy going on here:<\/p>\n<ol>\n<li>Core defines an extremely generic class: <a href=\"https:\/\/core.trac.wordpress.org\/browser\/tags\/4.3.1\/src\/wp-includes\/class-wp-walker.php#L0\" rel=\"noopener\"><code>Walker<\/code><\/a>.  Its purpose is to iterate through complex structures like multi-dimensional arrays, and <em>do stuff<\/em> on each member of that structure.<\/li>\n<li>Core then defines a more specific extension of <code>Walker<\/code>, made specifically for digging through navigation menus:  <a href=\"https:\/\/core.trac.wordpress.org\/browser\/tags\/4.3.1\/src\/\/wp-includes\/nav-menu-template.php\" rel=\"noopener\"><code>Walker_Nav_Menu<\/code><\/a>.<\/li>\n<li>Finally, I define my own extension of <code>Walker_Nav_Menu<\/code>, calling it <a href=\"https:\/\/github.com\/scofennell\/csst-nav\/blob\/master\/inc\/class.csst-nav-walker.php\" rel=\"noopener\"><code>CSST_Nav_Walker<\/code><\/a>.<\/li>\n<\/ol>\n<p>My custom walker class will extend the following methods from core&#8217;s  <code>Walker_Nav_Menu<\/code>:<\/p>\n<ul>\n<li><code>start_el()<\/code>, which appends the opening markup for menu items, and menu items themselves.<\/li>\n<li><code>end_el()<\/code>, which appends the closing markup menu items.<\/li>\n<li><code>start_lvl()<\/code>, which appends the opening markup for submenus.<\/li>\n<li><code>end_lvl()<\/code>, which appends the closing markup for submenus.<\/li>\n<\/ul>\n<p>Those are some super generic names, eh? That&#8217;s kind of the point: We&#8217;re inheriting from <code>Walker<\/code>, which is meant to be able to iterate through any kind of structure, for any reason.  In that context, specificity is the enemy.  Let&#8217;s cut through the abstract nomenclature and figure out what each method does for us!<\/p>\n<h4>start_el( &#038;$output, $item, $depth = 0, $args = array(), $id = 0 )<\/h4>\n<p><a href=\"https:\/\/github.com\/scofennell\/csst-nav\/blob\/master\/inc\/class.csst-nav-walker.php#L36\" rel=\"noopener\">This method<\/a> draws the opening html for a menu item, and the menu item itself.  It carries five parameters:<\/p>\n<ol>\n<li><code>&amp;$output<\/code>, which is the all of the HTML for the menu, up until &#8220;this&#8221; menu item.  When I say &#8220;this&#8221; menu item, understand that this method is called once for each menu item.<\/li>\n<li><code>$item<\/code>, which is the WP Post object for this menu item (menu items are in fact posts of the <code>nav_menu_item<\/code> post type), plus some additional data particular to nav menus.<\/li>\n<li><code>$depth<\/code>, which keeps track of how many levels deep we are in the menu &mdash; as in nested submenus.<\/li>\n<li><code>$args<\/code>, which is mostly an array of arguments for <code>wp_nav_menu()<\/code>.  It includes the arguments that we passed in our shortcode callback, plus all of the default values we omitted.<\/li>\n<li><code>$id<\/code>, which is documented in the core source as the ID of the current menu item, though I&#8217;m not sure if it&#8217;s still supported.<\/li>\n<\/ol>\n<p>Most of these parameters are a bit underwhelming, but some of them carry a ton of useful information.  Allow me to <code>var_dump()<\/code>!<\/p>\n<h4>&#038;$output<\/h4>\n<p>Notice that this variable is prefixed with an ampersand, meaning it&#8217;s <a href=\"http:\/\/php.net\/manual\/en\/language.references.pass.php\" rel=\"noopener\">passed by reference<\/a>.  That means the method does not have to return anything, because anything that happens to this variable within the method will affect the variable outside of the method as well. This is also why the <code>var_dump()<\/code> gets very large very quickly:<\/p>\n<pre><code>var_dump( esc_html( $output ) );<\/code><\/pre>\n<p>gets us:<\/p>\n<pre rel=\"PHP\"><code class=\"language-javascript\">&lt;?php\r\n\r\nstring(0) \"\"\r\n\r\nstring(274) \"\r\n  <span class=' menu-item menu-item-type-post_type menu-item-object-page csst_nav_walker-item'>\r\n    <a href=\"http:\/\/localhost\/wp\/csstnav\/\" class=\"csst_nav_walker-item-link csst_nav_walker-item-text_link\" rel=\"noopener\">Front Page<\/a>\r\n  <\/span>\r\n\"\r\n\r\nstring(1066) \"\r\n  <span class=' menu-item menu-item-type-post_type menu-item-object-page csst_nav_walker-item'>\r\n    <a href=\"http:\/\/localhost\/wp\/csstnav\/\" class=\"csst_nav_walker-item-link csst_nav_walker-item-text_link\" rel=\"noopener\">Front Page<\/a>\r\n  <\/span>\r\n  <span class=' menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-11 current_page_item menu-item-has-children csst_nav_walker-item csst_nav_walker-item-has_children'>\r\n    [...] (truncated)<\/code><\/pre>\n<p>&#8221;<\/p>\n<p>This ends up being about 35kb of <code>var_dump()<\/code> text, so I&#8217;ve greatly truncated it.  I&#8217;m only showing parts of the first three menu items.  That&#8217;s the markup for the preceding menu items, at each menu item, which is why we <a href=\"https:\/\/github.com\/scofennell\/csst-nav\/blob\/master\/inc\/class.csst-nav-walker.php#L106\" rel=\"noopener\">append the current menu item<\/a> to it.<\/p>\n<h4>$item<\/h4>\n<p>This parameter gives us the WP Post object for the current menu item, making it by far the most interesting arg in this method. <\/p>\n<pre><code>wp_die( var_dump( $item ) )<\/code><\/pre>\n<p>gives us:<\/p>\n<pre rel=\"PHP\"><code class=\"language-javascript\">&lt;?php\r\n\r\nobject(WP_Post)#358 (40) {\r\n  [\"ID\"]                    =&gt; int(68)\r\n  [\"post_author\"]           =&gt; string(1) \"1\"\r\n  [\"post_date\"]             =&gt; string(19) \"2015-10-07 01:05:49\"\r\n  [\"post_date_gmt\"]         =&gt; string(19) \"2015-10-07 01:05:49\"\r\n  [\"post_content\"]          =&gt; string(1) \" \"\r\n  [\"post_title\"]            =&gt; string(0) \"\"\r\n  [\"post_excerpt\"]          =&gt; string(0) \"\"\r\n  [\"post_status\"]           =&gt; string(7) \"publish\"\r\n  [\"comment_status\"]        =&gt; string(6) \"closed\"\r\n  [\"ping_status\"]           =&gt; string(6) \"closed\"\r\n  [\"post_password\"]         =&gt; string(0) \"\"\r\n  [\"post_name\"]             =&gt; string(2) \"68\"\r\n  [\"to_ping\"]               =&gt; string(0) \"\"\r\n  [\"pinged\"]                =&gt; string(0) \"\"\r\n  [\"post_modified\"]         =&gt; string(19) \"2015-10-07 01:05:49\"\r\n  [\"post_modified_gmt\"]     =&gt; string(19) \"2015-10-07 01:05:49\"\r\n  [\"post_content_filtered\"] =&gt; string(0) \"\"\r\n  [\"post_parent\"]           =&gt; int(0)\r\n  [\"guid\"]                  =&gt; string(33) \"http:\/\/localhost\/wp\/csstnav\/?p=68\"\r\n  [\"menu_order\"]            =&gt; int(1)\r\n  [\"post_type\"]             =&gt; string(13) \"nav_menu_item\" \r\n  [\"post_mime_type\"]        =&gt; string(0) \"\"\r\n  [\"comment_count\"]         =&gt; string(1) \"0\" \r\n  [\"filter\"]                =&gt; string(3) \"raw\"\r\n  [\"db_id\"]                 =&gt; int(68)\r\n  [\"menu_item_parent\"]      =&gt; string(1) \"0\"\r\n  [\"object_id\"]             =&gt; string(2) \"50\"\r\n  [\"object\"]                =&gt; string(4) \"page\"\r\n  [\"type\"]                  =&gt; string(9) \"post_type\"\r\n  [\"type_label\"]            =&gt; string(4) \"Page\"\r\n  [\"url\"]                   =&gt; string(28) \"http:\/\/localhost\/wp\/csstnav\/\"\r\n  [\"title\"]                 =&gt; string(10) \"Front Page\"\r\n  [\"target\"]                =&gt; string(0) \"\"\r\n  [\"attr_title\"]            =&gt; string(0) \"\"\r\n  [\"description\"]           =&gt; string(0) \"\"\r\n  [\"classes\"]               =&gt; array(8) {\r\n    [0]=&gt; string(0) \"\"\r\n    [1]=&gt; string(9) \"menu-item\" \r\n    [2]=&gt; string(24) \"menu-item-type-post_type\" \r\n    [3]=&gt; string(21) \"menu-item-object-page\" \r\n    [4]=&gt; string(17) \"current-menu-item\" \r\n    [5]=&gt; string(9) \"page_item\"\r\n    [6]=&gt; string(12) \"page-item-50\"\r\n    [7]=&gt; string(17) \"current_page_item\"\r\n  }\r\n  [\"xfn\"]                   =&gt; string(0) \"\" \r\n  [\"current\"]               =&gt; bool(true)\r\n  [\"current_item_ancestor\"] =&gt; bool(false)\r\n  [\"current_item_parent\"]   =&gt; bool(false)\r\n}<\/code><\/pre>\n<p>Pretty neat, right?  We could reach into that post object and get a ton of cool stuff like the excerpt, the date, taxonomies.  Heck, maybe we could engineer a way to do featured images for nav menu items!  In addition to these values that we normally see for posts, there are a couple of new items, such as <code>classes<\/code>.  That&#8217;s where the awesome array of dynamic CSS classes can be found:  Things like <code>current-menu-item<\/code>. Also of note is <code>object<\/code>, which gives us details about what this menu item is linking to:  Perhaps a page or a term archive.<\/p>\n<h4>$depth<\/h4>\n<p>Depth keeps a running tally of many submenus &#8220;deep&#8221; we are.  I don&#8217;t have any use for this, but I&#8217;m willing to stop and admire what <a href=\"https:\/\/core.trac.wordpress.org\/browser\/tags\/4.3.1\/src\/\/wp-includes\/nav-menu-template.php#L82\" rel=\"noopener\">core<\/a> does with it:  They use it to prepend tab characters (as in, literally, &#8220;\\t&#8221;) so that the source code is more readable.  At least I&#8217;m assuming that&#8217;s why.  Well played core, well played.<\/p>\n<p>Rather than <code>var_dump()<\/code> <code>$depth<\/code>, it&#8217;s more instructive to just append it to <code>&amp;amp;$output<\/code> for each item.  You can see how it&#8217;s tracking the level for each item:<\/p>\n<figure id='post-209703' class='align-right media-209703'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/10\/start_el-depth.png' alt='' data-recalc-dims=\"1\" \/><figcaption>A demonstration of $depth, from the <code>start_el()<\/code> method.<\/figcaption><\/figure>\n<h4>$args<\/h4>\n<p><code>$args<\/code> should look familiar:  It&#8217;s mostly the array of values that <a href=\"https:\/\/github.com\/scofennell\/csst-nav\/blob\/master\/inc\/class.csst-nav.php#L226\" rel=\"noopener\">I passed<\/a> to <code>wp_nav_menu()<\/code> in our shortcode.  Plus, the default values for any args that I omitted.<\/p>\n<pre><code>var_dump( esc_html( $args ) );<\/code><\/pre>\n<p>gets us:<\/p>\n<pre rel=\"PHP\"><code class=\"language-javascript\">&lt;?php\r\n\r\nobject(stdClass)#341 (16) {\r\n\t[\"menu\"]            =&gt; string(13) \"a-nested-menu\"\r\n\t[\"container\"]       =&gt; bool(false)\r\n\t[\"container_class\"] =&gt; string(0) \"\" \r\n\t[\"container_id\"]    =&gt; string(0) \"\" \r\n\t[\"menu_class\"]      =&gt; string(31) \"csst_nav csst_nav-a-nested-menu\" \r\n\t[\"menu_id\"]         =&gt; string(0) \"\" \r\n\t[\"echo\"]            =&gt; bool(false) \r\n\t[\"fallback_cb\"]     =&gt; string(12) \"wp_page_menu\" \r\n\t[\"before\"]          =&gt; string(0) \"\" \r\n\t[\"after\"]           =&gt; string(0) \"\" \r\n\t[\"link_before\"]     =&gt; string(0) \"\" \r\n\t[\"link_after\"]      =&gt; string(0) \"\" \r\n\t[\"items_wrap\"]      =&gt; string(46) \"%3$s\"\r\n\t[\"depth\"]           =&gt; int(0) \r\n\t[\"walker\"]          =&gt; object( CSST_Nav_Walker )#339 (5) {\r\n\t\t[\"icon\"]     =&gt; string(96) \"\r\n\t\t\t&lt;svg class='csst_nav_svg-icon'&gt;\r\n\t\t\t\t&lt;use xmlns:xlink='http:\/\/www.w3.org\/1999\/xlink' xlink:href='#csst_nav_svg-icon'&gt;&lt;\/use&gt;\r\n\t\t\t&lt;\/svg&gt;\r\n\t\t\" \r\n\t\t[\"tree_type\"]=&gt; array(3) {\r\n\t\t\t[0] =&gt; string(9) \"post_type\" \r\n\t\t\t[1] =&gt; string(8) \"taxonomy\"\r\n\t\t\t[2] =&gt; string(6) \"custom\"\r\n\t\t}\r\n\t\t[\"db_fields\"] =&gt; array(2) {\r\n\t\t\t[\"parent\"] =&gt; string(16) \"menu_item_parent\" \r\n\t\t\t[\"id\"]     =&gt; string(5) \"db_id\"\r\n\t\t} \r\n\t\t[\"max_pages\"]    =&gt; int(1) \r\n\t\t[\"has_children\"] =&gt; bool(false)\r\n\t}\r\n\t[\"theme_location\"] =&gt; string(0) \"\"\r\n}<\/code><\/pre>\n<p>Of note is the <code>walker<\/code> arg.  You can see that it names our walker class, and even catches the SVG icon that we saved as a class member!  The other items under the <code>walker<\/code> arg are either unused or uninteresting for our purpose of customizing a nav menu.<\/p>\n<h4>$id<\/h4>\n<p><code>$id<\/code> seems to be a big disappointment.  It&#8217;s always 0.  Not even gonna dump it for you.<\/p>\n<h4>Practical Uses for the <code>start_el()<\/code> Args<\/h4>\n<p>Let&#8217;s start with what core does in <code>Walker_Nav_Menu -&gt; start_el()<\/code>.  As I noted above, they use <code>$depth<\/code> to <a href=\"https:\/\/core.trac.wordpress.org\/browser\/tags\/4.3.1\/src\/\/wp-includes\/nav-menu-template.php#L82\" rel=\"noopener\">prepend tabs<\/a>, seemingly in pursuit of more legible source code.  Such craftsmanship!  Also, you&#8217;d better believe they grab those <a href=\"https:\/\/core.trac.wordpress.org\/browser\/tags\/4.3.1\/src\/\/wp-includes\/nav-menu-template.php#L99\" rel=\"noopener\">CSS classes<\/a> from <code>$item<\/code>.<\/p>\n<p>In my custom version, I have two value-adds.  First, I have a chance to build the menu item according to my own coding preferences.  I happen to hate ternary operators, for example. Second, I have a chance to namespace all of the CSS classes that WordPress generates for the menu item.  <code>current-menu-item<\/code> would become <code>csst_nav-current_menu_item<\/code>. I do this by passing the css classes to a <a href=\"https:\/\/github.com\/scofennell\/csst-nav\/blob\/master\/inc\/class.csst-nav-formatting.php#L13\" rel=\"noopener\">custom method<\/a> which renames the classes and passes them back.  They come back with the prefix for our project, and some more consistent formatting around things like hyphens and underscores.<\/p>\n<p>That does it for <code>start_el()<\/code>!  I have nothing more to say about the opening HTML for a menu item.  But now that it&#8217;s open, we&#8217;d better close it.<\/p>\n<h4>end_el( &#038;$output, $item, $depth = 0, $args = array() )<\/h4>\n<p>The <code>end_el()<\/code> is <a href=\"https:\/\/github.com\/scofennell\/csst-nav\/blob\/master\/inc\/class.csst-nav-walker.php#L110\" rel=\"noopener\">&#8220;>a very short method<\/a>:  All it does is append the closing html for a menu item.  It carries the same args as <code>start_el()<\/code>, except for <code>$id<\/code>, which it omits.  Also, <code>&amp;amp;$output<\/code> will be larger than it was when we encountered it in <code>start_el()<\/code>, since the current <code>$item<\/code> has been appended to it.  These args are <code>var_dump()<\/code>&#8216;d in my discussion of <code>start_el()<\/code>, so I won&#8217;t go over them again.<\/p>\n<p>As for practical usage, it&#8217;s interesting to note that core simply prints a closing <code>li<\/code>. Instead, I&#8217;m reaching back into <code>$args<\/code> in order to close the element with the markup <a href=\"https:\/\/github.com\/scofennell\/csst-nav\/blob\/master\/inc\/class.csst-nav.php#L193\" rel=\"noopener\">I specified<\/a> via the <code>after<\/code> arg when creating our shortcode.<\/p>\n<h4>start_lvl(  &#038;$output, $depth = 0, $args = array() )<\/h4>\n<p>The purpose of <a href=\"https:\/\/github.com\/scofennell\/csst-nav\/blob\/master\/inc\/class.csst-nav-walker.php#L127\" rel=\"noopener\">this oddly named fellow<\/a> is to start a new &#8220;level&#8221; in the structure we&#8217;re digging through.  That sounds pretty abstract, but fortunately we have a very familiar example at our fingertips:  In a nav menu, a new level is simply a submenu!<\/p>\n<p>This method carries three parameters, <code>&amp;$output<\/code>, <code>$depth<\/code>, and <code>$args<\/code>, which are all <code>var_dump()<\/code>&#8216;d above.  As for usage, core takes this opportunity to open a new <code>ul<\/code> for the submenu, complete with indented source code.  Very nice. However, many times I have found myself unhappy with the submenu treatment.  For example, I want to add a toggle icon to indicate that there is a submenu.  I want the submenu to use my markup and CSS classes.  And, I want the submenu to respond as a show\/hide when the toggle is clicked.  This is the perfect time to make these <a href=\"https:\/\/github.com\/scofennell\/csst-nav\/blob\/master\/inc\/class.csst-nav-walker.php#L139\" rel=\"noopener\">customizations<\/a>.<\/p>\n<p>Good times:  Our submenu is open and submenu items will be appended to it via <code>start_el()<\/code> and <code>end_el()<\/code>, above.  If there are submenus inside of this submenu item, no problem.  Those will be appended via <code>start_lvl()<\/code> as well.  Once that&#8217;s all done, we&#8217;ll need to close our submenu.<\/p>\n<h4>end_lvl( &#038;$output, $depth = 0, $args = array() )<\/h4>\n<p><a href=\"http:\/\/<a href='https:\/\/github.com\/scofennell\/csst-nav\/blob\/master\/inc\/class.csst-nav-walker.php#L164\">This method<\/a> is very similar to <code>end_el()<\/code>, only instead of closing a menu item, it closes a submenu.  For core, that&#8217;s a closing <code>ul<\/code>.  For me, it&#8217;s a closing <code>span<\/code>.<\/p>\n<h4>Other Elements<\/h4>\n<p><a href=\"https:\/\/github.com\/scofennell\/csst-nav\/blob\/master\/inc\/class.csst-nav-walker.php#L14\" rel=\"noopener\">My custom walker<\/a> does have some other elements:  A constructor and a couple of attributes. I use the constructor to call my svg icon class and grab a toggle icon for the submenus.  I save the icon as an attribute on the class, so my other methods can easily use it.<\/p>\n<p>Core&#8217;s <code>Walker_Nav_Menu<\/code> class has some other elements as well:<\/p>\n<ul>\n<li>A mysterious attribute called <code>$tree_type<\/code>, which even core <a href=\"https:\/\/codex.wordpress.org\/Class_Reference\/Walker\" rel=\"noopener\">does not use<\/a>.  The source documents it as &#8220;What the class handles&#8221;, and a <code>var_dump()<\/code> gives us:\n<pre rel=\"PHP\"><code class=\"language-javascript\">&lt;?php\r\n\r\n\tarray(3) {\r\n\t\t[0]=&gt; string(9) \"post_type\"\r\n\t\t[1]=&gt; string(8) \"taxonomy\"\r\n\t\t[2]=&gt; string(6) \"custom\"\r\n\t}\r\n\t\r\n?&gt;<\/code><\/pre>\n<p>Which, meh, whatever.\n<\/li>\n<li>An attribute called <code>$db_fields<\/code>, which is a bit opaque.  A <code>var_dump()<\/code> gives us:\n<pre rel=\"PHP\"><code class=\"language-javascript\">&lt;?php\r\n\r\n\tarray(2) {\r\n    \r\n\t\t[\"parent\"] =&gt; string(16) \"menu_item_parent\"\r\n\t\t[\"id\"]     =&gt; string(5) \"db_id\"\r\n    \r\n\t}\r\n\r\n?&gt;<\/code><\/pre>\n<p>To which, <a href=\"https:\/\/www.youtube.com\/watch?v=H2KYzeT_lGY\" rel=\"noopener\">I yield<\/a>. If you can figure out how these are used and how we might leverage them for something interesting, leave it in the comments!\n<\/li>\n<\/ul>\n<h3>Resources and Next Steps<\/h3>\n<p><code>Walker<\/code> and its heirs are not as heavily discussed or documented as other parts of WordPress, which is one of the things that inspired me to write this article.  However, there is some prior work available.  I first became interested in walker deep-dives when I saw <a href=\"https:\/\/github.com\/twittem\/wp-bootstrap-navwalker\" rel=\"noopener\">this port<\/a> of a BootStrap nav menu.   And, predictably, <a href=\"https:\/\/codex.wordpress.org\/Class_Reference\/Walker\" rel=\"noopener\">the codex<\/a> gives a couple of examples as well.<\/p>\n<p>The main axe I&#8217;ve been grinding in this article has been to gain control of my class names and markup around nav items and submenus, but there are many other possibilities.  Perhaps we could reach into <code>$item<\/code> and grab the featured image or some post meta, if <code>$item<\/code> happens to be linking to a post.  If it happens to be linking to a term archive, perhaps we&#8217;d want to grab something from the upcoming <a href=\"https:\/\/make.wordpress.org\/core\/2015\/08\/27\/taxonomy-roadmap-for-4-4-and-beyond\/\" rel=\"noopener\">term_meta<\/a> system. You could even do something totally different, like output menu items with the markup and classes expected by your favorite jQueryUI widget or image slider.  Give it a try and happy <code>var_dump()<\/code>ing!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The following is a guest post by Scott Fennell. Scott is a WordPress theme &#038; plugin developer in Anchorage, Alaska. Here, he customizes the default HTML output of WordPress&#8217; menu system to his liking, without damaging the useful things it already does. There are many things about the WordPress nav menu system that I like, [&hellip;]<\/p>\n","protected":false},"author":229300,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[264],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":150992,"url":"https:\/\/css-tricks.com\/targetting-menu-elements-submenus-navigation-bar\/","url_meta":{"origin":209676,"position":0},"title":"Targeting Menu Elements with Submenus in a Navigation Bar","date":"September 23, 2013","format":false,"excerpt":"The following is a guest post by Ray Messina. Ray was interested in sharing this technique as a way to pay forward things he's learned from this site in the past, which is awesome. You might be aware of the jQuery .has method, which allows you to select an element\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":208524,"url":"https:\/\/css-tricks.com\/creating-an-animated-menu-indicator-with-css-selectors\/","url_meta":{"origin":209676,"position":1},"title":"Creating an Animated Menu Indicator with CSS Selectors","date":"November 20, 2015","format":false,"excerpt":"The following article is by James Nowland, a front end developer for Headjam, a creative agency in Newcastle, Australia. James has created a fairly simple little effect here, but one that you might think would require a little JavaScript. Instead, it uses some clever selector usage. In this article, I'll\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":158391,"url":"https:\/\/css-tricks.com\/line-menu-icon-menu\/","url_meta":{"origin":209676,"position":2},"title":"Line Menu Icon&#8230; That Is A Menu","date":"December 16, 2013","format":false,"excerpt":"I had a dumb little idea the other night so I just coded it up (as you do). You know those little icons that have come represent navigation? We've called them Three Line Menu icons around here, but otherwise known as Navicon (clever) or Hamburger (dumb). The point of that\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":300774,"url":"https:\/\/css-tricks.com\/is-is-useful\/","url_meta":{"origin":209676,"position":3},"title":"Is &#8220;is&#8221; Useful?","date":"January 3, 2020","format":false,"excerpt":"God I'm funny. Anytime we have fairly repetitive selectors that have a common parent, it's probably a place we can use the :is() pseudo-selector. Holger Bartel demonstrates like this: section section h1, section article h1, section aside h1, section nav h1, article section h1, article article h1, article aside h1,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/is-pseudo-shield.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305295,"url":"https:\/\/css-tricks.com\/4-css-grid-properties-and-one-value-for-most-of-your-layout-needs\/","url_meta":{"origin":209676,"position":4},"title":"4 CSS Grid Properties (and One Value) for Most of Your Layout Needs","date":"March 30, 2020","format":false,"excerpt":"CSS Grid provides us with a powerful layout system for websites. The CSS-Tricks guide gives you a comprehensive overview of Grid\u2019s properties with layout examples. What we\u2019re going to do here is a reverse approach to show you the smallest possible set of grid properties you need to know to\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/css-grid-properties.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":306971,"url":"https:\/\/css-tricks.com\/how-to-make-a-css-only-carousel\/","url_meta":{"origin":209676,"position":5},"title":"How to Make a CSS-Only Carousel","date":"April 24, 2020","format":false,"excerpt":"We mentioned a way to make a CSS-only carousel in a recent issue of the newsletter and I thought that a more detailed write up would be interesting and capture some of my thoughts on making one. So, here\u2019s what we\u2019re making today: There\u2019s no JavaScript here, whatsoever! No jQuery\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/robin-css-carousel.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/209676"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/229300"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=209676"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/209676\/revisions"}],"predecessor-version":[{"id":235048,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/209676\/revisions\/235048"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=209676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=209676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=209676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}