{"id":163,"date":"2014-09-04T20:34:53","date_gmt":"2014-09-05T02:34:53","guid":{"rendered":"http:\/\/laubsterboy.com\/blog\/?p=163"},"modified":"2014-09-04T20:34:53","modified_gmt":"2014-09-05T02:34:53","slug":"wordpress-custom-sectional-menu","status":"publish","type":"post","link":"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/","title":{"rendered":"WordPress Custom Sectional Menu"},"content":{"rendered":"<h2>WordPress Menus<\/h2>\n<p>With the release of WordPress 3.0 <a href=\"http:\/\/codex.wordpress.org\/Navigation_Menus\">menus<\/a> were introduced as a visually editable element within the dashboard, dramatically improving WordPress&#8217;\u00a0CMS capabilities. However, many large websites require menu systems that are a bit more flexible and dynamic that what the built-in menu system provides. For instance, have you ever needed to create a primary navigation menu that resolved to top-level sections of the website and a series of secondary navigation menus that resolved to sub-pages related to each top-level section? Sure, you can create one menu for the top-level primary navigation and another menu for each sub-section of the website and then create a page template corresponding to each of the sub-section menus. The problem with this approach is that you have to create and maintain so many different menus and page templates, not to mention\u00a0if you&#8217;re planning to turn the site over to a client upon completion it requires them to learn and follow certain steps with each page that they create. What if, instead, we could create one master menu and use the regular page template? This is where a custom sectional menu comes in by use of the wp_nav_menu_objects filter hook.<\/p>\n<h2>Custom Sectional Menus<\/h2>\n<p>To do this we need to create a large nested menu, resembling something similar to the list below, and then set it to be the active menu for the primary and secondary theme locations.<\/p>\n<ul>\n<li>top-level-menu-item1\n<ul>\n<li>sub-section-menu-item1<\/li>\n<li>sub-section-menu-item2<\/li>\n<li>sub-section-menu-item3\n<ul>\n<li>nested-sub-section-menu-item1<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>top-level-menu-item2<\/li>\n<li>top-level-menu-item3\n<ul>\n<li>sub-section-menu-item1<\/li>\n<li>sub-section-menu-item2\n<ul>\n<li>nested-sub-section-menu-item1<\/li>\n<li>nested-sub-section-menu-item2<\/li>\n<li>nested-sub-section-menu-item3<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Using the nested menu example from above the primary navigation menu would always show the top-level-menu-items. However, when viewing a sub-section page, such as the page associated with &#8220;nested-sub-section-menu-item3&#8221; the secondary menu would only show the menu items that are nested under &#8220;top-level-menu-item3&#8221;. The only remaining question is, how exactly do we do this?<\/p>\n<h2>The Solution<\/h2>\n<p>I&#8217;ve put together a fairly simple function snippet that can be copied and pasted into your themes functions.php file.<\/p>\n<pre class=\"lang:default decode:true \">function lb_sectional_menu($items, $args) {\n\t\/\/ theme_locations to filter\n\t$locations = array('secondary');\n\t\/\/ include the root parent menu item in the menu (true) or not (false)\n\t$display_parent_menu_item = false;\n\t\n\tif (in_array($args-&gt;theme_location, $locations)) {\n\t\t$allow_menu_items = false;\n\t\t\n\t\tforeach ($items as $key =&gt; $item) {\n\t\t\tif ((int)$item-&gt;menu_item_parent === 0) $allow_menu_items = false;\n\t\t\tif ((int)$item-&gt;menu_item_parent === 0 &amp;&amp; ($item-&gt;current || $item-&gt;current_item_parent || $item-&gt;current_item_ancestor)) $allow_menu_items = true;\n\t\t\tif ($allow_menu_items === false || ((int)$item-&gt;menu_item_parent === 0 &amp;&amp; $display_parent_menu_item === false)) unset($items[$key]);\n\t\t}\n\t}\n\t\n\treturn $items;\n}\nadd_filter('wp_nav_menu_objects', 'lb_sectional_menu', 10, 2);<\/pre>\n<p><em>Update September 17, 2014 &#8211; I&#8217;ve updated the lb_sectional_menu filter function to be much more efficient and less prone to error. The wp_nav_menu_objects filter is applied after all menu_items have been sorted\/ordered so instead we can just look for menu_items with a menu_item_parent that is equal to zero (meaning that it&#8217;s a root parent menu_item) and allow menu_items until the next menu_item_parent equal to zero is encountered. This means the menu will work even if it&#8217;s a page, post, tag, custom link, etc. It will also work no matter how many menu items are nested.<\/em><\/p>\n<p>This function allows you to build a single, nested, menu and then reuse it across the entire website, where it will dynamically display\u00a0the necessary menu items for the section being viewed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress Menus With the release of WordPress 3.0 menus were introduced as a visually editable element within the dashboard, dramatically improving WordPress&#8217;\u00a0CMS capabilities. However, many large websites require menu systems that are a bit more flexible and dynamic that what the built-in menu system provides. For instance, have you ever needed to create a primary [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,3],"tags":[],"class_list":["post-163","post","type-post","status-publish","format-standard","hentry","category-code-snippet","category-guide"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>WordPress Custom Sectional Menu<\/title>\n<meta name=\"description\" content=\"WordPress Custom Sectional Menu - A guide to creating a single custom, nested, menu that can be reused across an entire website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress Custom Sectional Menu\" \/>\n<meta property=\"og:description\" content=\"WordPress Custom Sectional Menu - A guide to creating a single custom, nested, menu that can be reused across an entire website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"John Russell Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-09-05T02:34:53+00:00\" \/>\n<meta name=\"author\" content=\"John Russell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@laubsterboy\" \/>\n<meta name=\"twitter:site\" content=\"@laubsterboy\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"John Russell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/\"},\"author\":{\"name\":\"John Russell\",\"@id\":\"https:\/\/www.johnrussell.dev\/blog\/#\/schema\/person\/296c0c6bd1deeeb20834393e1e16325c\"},\"headline\":\"WordPress Custom Sectional Menu\",\"datePublished\":\"2014-09-05T02:34:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/\"},\"wordCount\":472,\"commentCount\":0,\"articleSection\":[\"Code Snippet\",\"Guide\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/\",\"url\":\"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/\",\"name\":\"WordPress Custom Sectional Menu\",\"isPartOf\":{\"@id\":\"https:\/\/www.johnrussell.dev\/blog\/#website\"},\"datePublished\":\"2014-09-05T02:34:53+00:00\",\"author\":{\"@id\":\"https:\/\/www.johnrussell.dev\/blog\/#\/schema\/person\/296c0c6bd1deeeb20834393e1e16325c\"},\"description\":\"WordPress Custom Sectional Menu - A guide to creating a single custom, nested, menu that can be reused across an entire website.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.johnrussell.dev\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Custom Sectional Menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.johnrussell.dev\/blog\/#website\",\"url\":\"https:\/\/www.johnrussell.dev\/blog\/\",\"name\":\"John Russell Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.johnrussell.dev\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.johnrussell.dev\/blog\/#\/schema\/person\/296c0c6bd1deeeb20834393e1e16325c\",\"name\":\"John Russell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.johnrussell.dev\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/00ce0f258fcc5e5d29897a5e81316009713e9104cfaf49f481c5bce3f81c7cb1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/00ce0f258fcc5e5d29897a5e81316009713e9104cfaf49f481c5bce3f81c7cb1?s=96&d=mm&r=g\",\"caption\":\"John Russell\"},\"url\":\"https:\/\/www.johnrussell.dev\/blog\/author\/laubsterboy\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress Custom Sectional Menu","description":"WordPress Custom Sectional Menu - A guide to creating a single custom, nested, menu that can be reused across an entire website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/","og_locale":"en_US","og_type":"article","og_title":"WordPress Custom Sectional Menu","og_description":"WordPress Custom Sectional Menu - A guide to creating a single custom, nested, menu that can be reused across an entire website.","og_url":"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/","og_site_name":"John Russell Blog","article_published_time":"2014-09-05T02:34:53+00:00","author":"John Russell","twitter_card":"summary_large_image","twitter_creator":"@laubsterboy","twitter_site":"@laubsterboy","twitter_misc":{"Written by":"John Russell","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/#article","isPartOf":{"@id":"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/"},"author":{"name":"John Russell","@id":"https:\/\/www.johnrussell.dev\/blog\/#\/schema\/person\/296c0c6bd1deeeb20834393e1e16325c"},"headline":"WordPress Custom Sectional Menu","datePublished":"2014-09-05T02:34:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/"},"wordCount":472,"commentCount":0,"articleSection":["Code Snippet","Guide"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/","url":"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/","name":"WordPress Custom Sectional Menu","isPartOf":{"@id":"https:\/\/www.johnrussell.dev\/blog\/#website"},"datePublished":"2014-09-05T02:34:53+00:00","author":{"@id":"https:\/\/www.johnrussell.dev\/blog\/#\/schema\/person\/296c0c6bd1deeeb20834393e1e16325c"},"description":"WordPress Custom Sectional Menu - A guide to creating a single custom, nested, menu that can be reused across an entire website.","breadcrumb":{"@id":"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.johnrussell.dev\/blog\/2014\/09\/wordpress-custom-sectional-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.johnrussell.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"WordPress Custom Sectional Menu"}]},{"@type":"WebSite","@id":"https:\/\/www.johnrussell.dev\/blog\/#website","url":"https:\/\/www.johnrussell.dev\/blog\/","name":"John Russell Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.johnrussell.dev\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.johnrussell.dev\/blog\/#\/schema\/person\/296c0c6bd1deeeb20834393e1e16325c","name":"John Russell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.johnrussell.dev\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/00ce0f258fcc5e5d29897a5e81316009713e9104cfaf49f481c5bce3f81c7cb1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/00ce0f258fcc5e5d29897a5e81316009713e9104cfaf49f481c5bce3f81c7cb1?s=96&d=mm&r=g","caption":"John Russell"},"url":"https:\/\/www.johnrussell.dev\/blog\/author\/laubsterboy\/"}]}},"_links":{"self":[{"href":"https:\/\/www.johnrussell.dev\/blog\/wp-json\/wp\/v2\/posts\/163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.johnrussell.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.johnrussell.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.johnrussell.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.johnrussell.dev\/blog\/wp-json\/wp\/v2\/comments?post=163"}],"version-history":[{"count":0,"href":"https:\/\/www.johnrussell.dev\/blog\/wp-json\/wp\/v2\/posts\/163\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.johnrussell.dev\/blog\/wp-json\/wp\/v2\/media?parent=163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.johnrussell.dev\/blog\/wp-json\/wp\/v2\/categories?post=163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.johnrussell.dev\/blog\/wp-json\/wp\/v2\/tags?post=163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}