I recently had the need to add a series of anchor links to a WordPress menu that linked to specific sections\u00a0of a page. I found this to be tedious, since the page URL needed to be hard coded into the custom link menu item and if the page URL was ever updated each anchor needed to be updated as well. To complicate things further, when looking at the custom link within the menu editor it’s not immediately obvious that the link is an anchor if the URL is longer than the input box.<\/p>\n
What I wanted to be able to do is simply create a custom link menu item and set the link value to #my-custom-anchor.\u00a0<\/em>Generally if you create a custom link menu item and set the link to be something like\u00a0#my-custom-anchor<\/em> it will work, if you’re already on the page for the given anchor, however it will also navigate to “my-custom-anchor” even if you’re on another page where “my-custom-anchor” doesn’t exist.<\/p>\n What I needed was for the anchor to navigate to the desired page and then to the specific section of the page. To do this, the URL would need to have the page URL prepended to the anchor hash. This would allow anchor links to be clicked from anywhere on the website and still navigate to the correct page, and correct section, but if the page was already being viewed the page would not reload (so scrolling animations would still work as well).<\/p>\n Since all of the anchor links were nested under a page menu item, as illustrated in the example below, I was able to filter the menu and prepend\u00a0the URL with the URL of its’ parent menu item.<\/p>\n In the above example each “Page Section… Menu Item” would link to “Page Menu Item 1” and scroll to the specified section of that page. This is very useful for long pages with many sections and sub-sections.<\/p>\n To accomplish this I created a menu filter function, that gets added to the themes functions.php file, that searches for menu items with URLs that begin with a # and then prepends the URL with the URL of its’ parent menu item.<\/p>\nMenu Structure Example<\/h3>\n
\n
\n
\n
The Solution is in the Code<\/h2>\n
function lb_menu_anchors($items, $args) {\r\n\t$urls = array();\r\n\t$custom_anchor_links = array();\r\n\t\r\n\tforeach ($items as $key => $item) {\r\n\t\t$urls[$item->ID] = $item->url;\r\n\t\t\r\n\t\tif ($item->object == 'custom' && substr($item->url, 0, 1) == '#') {\r\n\t\t\t$custom_anchor_links[] = $item;\r\n\t\t} \r\n\t}\r\n\t\r\n\tforeach ($custom_anchor_links as $custom_anchor_link) {\r\n\t\tif (strpos($urls[$custom_anchor_link->menu_item_parent], '#') === false) {\r\n\t\t\t$custom_anchor_link->url = $urls[$custom_anchor_link->menu_item_parent] . $custom_anchor_link->url;\r\n\t\t} else {\r\n\t\t\t\/\/ multiple nested menu items with anchors\r\n\t\t\t$custom_anchor_link->url = explode('#', $urls[$custom_anchor_link->menu_item_parent])[0] . $custom_anchor_link->url;\r\n\t\t}\r\n\t}\r\n\t\r\n\treturn $items;\r\n}\r\nadd_filter('wp_nav_menu_objects', 'lb_menu_anchors', 10, 2);<\/pre>\n