One-page websites often have a menu at the top and internal links that allow the users to jump around to various sections of the page.  This is done in WordPress by creating a custom menu that only contains anchor references without the page slug.  This works very well as long as you only have one page on the entire site, but what happens if you have a second page for a contact form or landing page?  The anchor references are no longer reliable from page-to-page and thus the page slug and anchor must be specified for each link.  This causes a new problem because a link containing a page slug will cause a browser refresh when all the user wanted to do was jump to another section on the page.  This is an annoying user experience, but also causes an undue load on the server and could throw off any statistics tracking.

Even if you’re very careful to make all of the on-page links relative to the anchors and all of the off-page links contain the page slug and anchor (which can be difficult as WordPress likes to inject the full URL for some reason), you still have the issue of the WordPress menus, footers, widgets, etc. being ether full links or just anchor links, but not both at the same time.

To combat this, we could add a second menu to the page and conditionally display it depending on what page the user is currently viewing.  An alternative to this is to maintain a single menu with multiple links (some with just the anchor and some with the page URL and anchor) and then conditionally display the correct menu item based on the page that is being viewed.  There are plugins to accomplish both of these tasks but maintaining two or more menus is a pain that becomes exponentially worse if you have two or more footers, two or more sidebars, two or more whatevers.

There’s a better way:  jQuery

In this solution we’ll dynamically replace all of the links on the current page with just their anchors which will eliminate the page refresh issue and still allow the web developer to maintain one set of links whether it be in a menu, on the page, in the footer or the sidebar and also not to have to worry about whether WordPress injected a full URL, path, or anchor link.

Here’s the code. This can easily be dropped into your child theme (you created a child theme, right?).  This code identified all of the links in the entire document and then iterates through them and replaces the page+anchor with just the anchor when viewing the current page.

Don’t forget to include the jQuery library if it’s not already baked into your solution!

There’s actually a slightly more efficient way to write this function, but I wanted to leave it like this incase any other developer want to integrate it and modify the code to further their needs.

If this helped or if you have any questions, leave us a comment below!