Linking to a div's ID in a WordPress subpage

637 Views Asked by At

I am trying to add a link in a nav in WordPress that links to a page's div that has a unique ID. I have done this on homepages: /#idname, but it is isn't working as a subpage: /subpagename/$id-name, is there a solution?

2

There are 2 best solutions below

0
On

but it is isn't working as a subpage: /subpagename/$id-name, is there a solution?

Are you sure this is not just a typo /subpagename/$id-name where you're using $ instead of #?

You need two things to anchieve an hyperlink anchor: A defined and unique ID, set on a compatible html5 tag and an anchor.

The anchor should look something like this <a href="#myAnchor">#</a>.

The tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the element is the href attribute, which indicates the link's destination.

Source @ https://www.w3schools.com/tags/tag_a.asp

There is even an example page here https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_href_anchor

Additional information

As a general warning, what you're trying to do is condidered bad practice.

Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .

These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

Use a instead. In general, you should only use a hyperlink for navigation to a real URL.

Source @ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Examples

0
On

Yes, you are correct, that was a typo. I should have been a pound mark. I figured out why the anchor wasn't working. The ID was in an API that gets loaded after the page loads so when you link to the page the ID wasn't loaded yet.

I ended up adding an anchor outside of the API and gave it a absolute position with CSS and it works. -- thanks for your answer.