A new day, a new thing

My goal to learn something new every day

Day 34: Adding anchors (jump links) in WordPress

If you want to link to a webpage that contains a lot of information, such as a long Wikipedia page, it can be annoying for the reader to have to scroll down through the entire page to search for the section that you want to link to. I’m sure that just about anyone who has a blog knows how to add links to other pages/sites, but what about to certain sections on a page? Take for example the link to Wikipedia in yesterday’s post. If you click the link in the second paragraph, you’ll notice that it will take you directly to a section of the page with relevant information, rather than the top of the page.

For a Wikipedia page, linking to sections is actually quite simple to do. Just copy the URL of the page you want to link to, and then in the insert/edit link box paste the link (as it is called on WordPress. On other platforms, just use the insert links tool provided). But before clicking Add Link, go back to the Wikipedia page and look at the heading of the section you want to link to. This will be one of the bolded words. Put a ‘#’ at the end of the URL and then add the text of the heading:

Insert Link

In the example above, I wanted to link to the History page on the Roman numerals Wikipedia entry, so I just added #History to the end of the URL. Once you click on Add Link, the link will now take you directly to the section on the Wikipedia page. Note: You have to type the word exactly as it appears on the Wikipedia page, so if a word is capitalised, you must include the capital letter or else it won’t work.

URLs cannot contain spaces, so if you want to link to a section on a Wikipedia page that is more than one word, you will have to substitute the spaces with underscores ( _ ). For example, to link to the section Hand signals on the Roman numerals page, you would type: http://en.wikipedia.org/wiki/Roman_numerals#Hand_signals, making sure to capitalise the ‘H’ in ‘hand’ because that’s the way it appears on the page.

The reason that this works is because the section headings on Wikipedia are automatically turned into anchors, also known as jump links. These are areas on a webpage that can be linked to. I’ve used anchors for quite a while to link to sites that use them, such as Wikipedia, but realised today that I’ve never used them in my own posts, simply because I didn’t know how. If this blog were self-hosted, using WordPress.org software, I’d probably use a plugin to do this for me. Unfortunately, as great as WordPress.com is, adding plugins is just not possible. So today, I figured I’d learn how to add anchor links in WordPress.com.

Adding anchor links in WordPress.com, is relatively simple, but it does require using just the tiniest amount of HTML. Because I’m using WordPress, I’ll describe how to do it through the WordPress post editor, but HTML editors on other blogging platforms should allow you to do it in just the same way.

STEP 1: Creating the Anchor

First, decide what part of your post you want to make into an anchor. It’s best to set this to a heading (although not absolutely necessary1), by highlighting the text and then selecting one of the Heading options from the drop-down menu.

Heading dro down

 

Next, open up the HTML text editor, by clicking on the Text tab at the top of the writing area of your post.

TEXT

This will open up the code of your post, which may look a little daunting at first, but should be fairly easy to read. You can ignore most of the snippets of code that will be littered throughout your text for now. Scroll down to locate the word/phrase that you want to make an anchor—this is the one that you’ve just turned into a heading. The text will be surrounded by angle brackets like this: <h3>Your Text</h3>. The number just indicates the number of the heading you chose; If you chose Heading 4 it will say <h4>.

To create a heading, put your cursor in the first angle bracket just after the number. Hit the space bar and then type id=”AnchorName”. The AnchorName can be whatever you want, but should not include spaces. You can use all lower case if you wish, or a mixture of lower and upper case. The double quotation marks around the name of the anchor are NOT optional. The following shows how I made the title of this section, “STEP 1: Creating the Anchor” an anchor.

Heading

I just added id=”step1″ after the ‘h3’ in the first angle bracket.

And that’s it, you’ve made your anchor. You can switch back to regular editing mode now, by clicking on the Visual tab.

STEP 2: Linking to the Anchor

Now that you’ve created your anchor, it’s time to link to it. To do this, first click on the insert/edit link button. Because you are linking to a section on the same page, there’s no need to put in the entire URL this time. Instead, just type # followed by your anchor name (no space).

link to step 1

Try it for yourself: Link to Step 1.

If you’re logged into WordPress, and you can see the admin bar at the top, you might notice that when the page jumps back up to the top, the heading is hidden. This is unfortunate, as it spoils the effect a little. It’s not that there’s a problem with the link, just that the admin bar hides the the anchor that you’ve just jumped back to. If you log out and try again (without the admin bar), you’ll see that it works just fine, and looks a lot better.

STEP 3: Linking to an Anchor on another page (optional)

Once you’ve created an anchor on one of your blog posts, you, or anyone else can link to that section by adding the # and name of the anchor to the end of the URL. For example, I turned the fractions heading on yesterday’s post into an anchor, so to go straight to that section, I just have to put https://anewdayanewthing.wordpress.com/2015/02/02/day-33-roman-numerals/#fractions into the URL textbox on the insert/edit link box. Note: To link to another page/post on your blog other than the one you are currently on, you must use the full URL. Just adding the # and the anchor name (as the example in step 2 does) will only work if you are linking within the same page.

Links

Step 1

Step 2

Step 3

Adding anchors can be useful for a number of reasons. Within the same page or post, they can be used to add a table of contents at the top or bottom. They can also be used if you like adding footnotes. Instead of making your reader scroll all the way down to the bottom to read a footnote, you can anchor the footnote and put a link to the anchor in the main body of the text. Don’t forget to anchor the section in the main text as well, so that you can put a link back to it to help your reader get back effortlessly, just like I have done with the footnote from Step 1—did you notice it? 😉


Anchor image courtesy of Stew Dean on Flickr

[1] (Back) You can create an anchor with any of the angle brackets, known as tags you see on the HTML text page. Tags are used to show which sections should be bolded or italicised for example, as well as many other things. If, for example, you wanted to create an anchor, but didn’t want it to be a heading, you could perhaps just make the word bold instead. The tag for bold is <strong> in HTML. In the second paragraph of this post, you may have noticed that the word Wikipedia was bold. That’s because I wanted to make it a tag. In the HTML text edit tab, I added id=”wiki” to the <strong> tag. Click here to go there now.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on February 3, 2015 by in Tech and tagged , , .

Calendar

February 2015
M T W T F S S
« Jan   Mar »
 1
2345678
9101112131415
16171819202122
232425262728  

It looks like the WordPress site URL is incorrectly configured. Please check it in your widget settings.

%d bloggers like this: