{"id":106,"date":"2013-01-07T14:51:28","date_gmt":"2013-01-07T14:51:28","guid":{"rendered":"http:\/\/engage.augsburg.edu\/mannj\/?p=106"},"modified":"2021-05-07T11:51:04","modified_gmt":"2021-05-07T16:51:04","slug":"linking-to-a-part-of-a-page","status":"publish","type":"post","link":"https:\/\/engage.augsburg.edu\/mannj\/2013\/01\/07\/linking-to-a-part-of-a-page\/","title":{"rendered":"Linking to a part of a page"},"content":{"rendered":"

If you have a page with a lot of content, you may want to provide links at the top of the page that will jump a visitor to a certain portion of the page. We call this kind of link a “page jump,” so I will refer to these as “jump links.” Here’s how you can do this easily in WordPress.<\/p>\n

Link, Anchor, and ID<\/h2>\n

Each page jump has two parts: a link and an anchor. The link is the thing you click, and the anchor is the place where the link takes you. These are connected by the use of a unique nickname, an ID. An ID should ideally be one word: it can be multiple words separated by hyphens or underscores, and can have numbers, but cannot<\/em> contain spaces.<\/p>\n

Step 1: Create the link<\/h2>\n

Start by creating the link to the portion of the page you want. Decide on an ID. In my example, my link says “What is the cost?” and links to an area of the page about the cost of the event, so my ID is simply “cost”. Highlight your text and create your link in the normal way<\/a>, but the URL should only be the # sign followed by your id: in my case, #cost. It should look like this:<\/p>\n

\"\"<\/p>\n

Step 2: Create the Anchor<\/h2>\n

After creating the link, choose the place on the page you want to link to. Instead of having to go into the “text” view and mess with the code, you just need to put in the “anchor” shortcode I have created. Replace “cost” with the ID that matches your link (note that the anchor does not contain the # symbol):<\/p>\n

[anchor id=”cost”]<\/p>\n

Create the anchor above the text that corresponds to it. Notice in my example here that the anchor is above my headline, “What is the cost?”<\/p>\n

\"\"<\/p>\n

And that’s all! Now repeat the process for each link you want to create.<\/p>\n","protected":false},"excerpt":{"rendered":"

If you have a page with a lot of content, you may want to provide links at the top of the page that will jump a visitor to a certain portion of the page. We call this kind of link a “page jump,” so I will refer to these as “jump links.” Here’s how you […]<\/p>\n","protected":false},"author":112,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/engage.augsburg.edu\/mannj\/wp-json\/wp\/v2\/posts\/106"}],"collection":[{"href":"https:\/\/engage.augsburg.edu\/mannj\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/engage.augsburg.edu\/mannj\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/engage.augsburg.edu\/mannj\/wp-json\/wp\/v2\/users\/112"}],"replies":[{"embeddable":true,"href":"https:\/\/engage.augsburg.edu\/mannj\/wp-json\/wp\/v2\/comments?post=106"}],"version-history":[{"count":7,"href":"https:\/\/engage.augsburg.edu\/mannj\/wp-json\/wp\/v2\/posts\/106\/revisions"}],"predecessor-version":[{"id":1221,"href":"https:\/\/engage.augsburg.edu\/mannj\/wp-json\/wp\/v2\/posts\/106\/revisions\/1221"}],"wp:attachment":[{"href":"https:\/\/engage.augsburg.edu\/mannj\/wp-json\/wp\/v2\/media?parent=106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/engage.augsburg.edu\/mannj\/wp-json\/wp\/v2\/categories?post=106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/engage.augsburg.edu\/mannj\/wp-json\/wp\/v2\/tags?post=106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}