{"id":1051,"date":"2019-04-03T10:18:34","date_gmt":"2019-04-03T02:18:34","guid":{"rendered":"https:\/\/www.intelliwolf.com\/?p=1051"},"modified":"2019-04-25T14:59:45","modified_gmt":"2019-04-25T06:59:45","slug":"anchor-links-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.intelliwolf.com\/anchor-links-in-wordpress\/","title":{"rendered":"How To Add Anchor Links In WordPress"},"content":{"rendered":"\n
Anchor links are a very useful part of web design. They let you improve the User Experience by directing users to a specific part of a page, rather than making them search for the information. They make it easier for you to write more comprehensive information and combine multiple small, related pages, without compromising the users' experience.<\/p>\n\n\n\n
How do you add anchor links in WordPress?<\/strong> Add a unique ID to any html element on a page. To jump to that part of the page from another part of the same page, use a hashtag followed by the ID. To jump there from another page, use the URL of that page, followed by a hashtag then the ID.<\/p>\n\n\n\n An anchor link, also called a \"jump link\", let you jump to a specific part of a webpage.<\/p>\n\n\n\n They are particularly useful for long articles, glossaries or technical documents.<\/p>\n\n\n\n Wikipedia uses anchor links extensively. You often see them in a table of contents as well.<\/p>\n\n\n\n The basic idea is that the link goes to a specific page, then to a specific part of the page. The form of that combination follows this convention:<\/p>\n\n\n\n https:\/\/www.domain.com\/specific-page\/#specific-part-of-page<\/p>\n\n\n\n The three parts of an anchor link are:<\/p>\n\n\n\n Part 1 is the regular URL pointing to the page which has the anchor link.<\/p>\n\n\n\n Part 3 is the name of the specific part of the page, which we'll setup later.<\/p>\n\n\n\n If you've worked with CSS, you'll know that we use the hashtag (#) to refer to an id.<\/p>\n\n\n\n You might use:<\/p>\n\n\n\n We're doing the same thing with the anchor links, just with HTML.<\/p>\n\n\n\n If you're linking to a specific part of the same page<\/strong>, you use #specific-part-of-page<\/em>.<\/p>\n\n\n\n If you're linking to a specific part of a different page<\/strong>, you use https:\/\/www.domain.com\/different-page\/#specific-part-of-page<\/em>.<\/p>\n\n\n\n The difference is that you drop the url when you're linking to the same page.<\/p>\n\n\n\n The full external anchor link will still work if you're linking to a different part of the same page. The reason we don't use it is because the external anchor link will cause the page to be reloaded, whereas the internal anchor link will just move the view to the desired part of the page.<\/p>\n\n\n\n Adding an anchor link to WordPress is a two-part process. First you need to add the anchor<\/a>, then you need to link to it<\/a>.<\/p>\n\n\n\n Let's go through those steps now.<\/p>\n\n\n\n First, let's clear up some confusion. Adding an anchor used to be done <\/em>with the \"name\" parameter of an anchor tag, hence the name. The code to set the anchor was:<\/p>\n\n\n\nWhat is an anchor link or a jump link?<\/h2>\n\n\n\n
#specific-part-of-page {\n color: #000000;\n}<\/code><\/pre>\n\n\n\n
Difference between internal and external anchor links<\/h2>\n\n\n\n
How to add an anchor<\/h2>\n\n\n\n
<a name=\"example\"><\/a><\/code><\/pre>\n\n\n\n