My goal for this series of posts was to try to post something related to blogging once a month, but obviously things have gotten a little bit hectic, and I’ve had to push back my planned post on the early ace blogosphere. In the meantime, I’m just going to write up a quick (because I already have had parts of this written for a while now) technical guide to links, including how to make links from one part of a post to another.

You may have noticed that recently we’ve (as in, everyone using WordPress) started running into an issue where, when someone pastes a URL from Tumblr into a comment, the entire post is imported into the comment (that’s also true for posts, btw). This is an irritating new “feature” of WordPress that, for now, we apparently can’t turn off. All we can do is edit the comment to either change the URL into a proper link, or break up the link. The latter solution is familiar to Tumblr users, since the bare-bones options for communicating there do not allow links, but I think everyone would agree that it’s annoying to have to copy, paste, and then fix every link before you can visit it!

So here is the other option: a little bit of HTML.

How to Make a Basic Link

HTML can seem very daunting or scary, but it’s not so bad if you learn just a little bit of it at a time. Here is how to make a basic link:

<a href="URL"> This is the text you want to add a link to. </a>

Copy and paste that. Remove URL, and paste in its place the address of the post you want to link to—in between the double quotation marks. Change This is the text you want to add a link to. (this is called link text) to whatever  you want the link to say. I added spaces in between the opening and closing HTML tags and the link text in between just so it’s easier to read, but they’re not necessary and are usually omitted.

Keep in mind: Blind people browse the internet through Screen Readers, which are devices that read to them aloud. Often, they browse by only listening to a list of links on the page, jumping from link to link without context. So if your link text only says “this”, “here”, or “more”, then they’re not going to have any idea what that means. Try to make your link text descriptive, with key words at the beginning. Post titles usually make good link text. There are more accessibility guidelines here—check point number seven under “What We Learned.”

Another thing to keep in mind: When you link to something from a WordPress post, by default WordPress will try to send a pingback—an automated notification comment on the post that you linked, which lets the blog’s author (and anyone reading their comments) know about your post. Pingbacks are very useful for facilitating conversations, and generate a little bit of traffic. However, sometimes you may not want that kind of traffic (for example, there have been occasions where someone links to an ace person’s blog just to attack them). You can turn off pingbacks for all posts in your discussion settings, and there is a checkbox to turn them off for individual posts (below the post editor window, underneath “allow comments”).

If you are linking to something offensive, you may want to avoid using a regular link, because doing so would increase the linked post’s search engine traffic. There is a service called DoNotLink that allows you to avoid that—I believe it also circumvents leaving pingbacks as well. (Correct me if I’m wrong.)

Help! Weird characters are appearing instead of a link!

If you tried to post a link, but instead you’re seeing something like:

<a href="URL"> This is the text you want to add a link to. </a>

…then the issue is that you have probably pasted the code in an area that does not allow code (and then, maybe, copied and pasted again from there). Especially if you’ve copied-and-pasted your post from some other place, it’s very easy to accidentally paste it into the wrong editor window, or otherwise have some sort of issue with some program (like Word) automatically converting your tags into something you don’t want. (Sometimes it’s not the tags—it’s because the quotes get automatically converted into the code for curly quotes.)

Basically, the less-than and greater-than signs (or pointy brackets) that designate HTML tags have been changed to characters that are allowed in whatever field you’re entering text in. More specifically, they have been automatically converted to a code designating those characters—this is called an “escape code” or an “HTML character entity”—so that the browser will know to visually display the character, and not treat it as a tag. It’s a common security measure on various sites to strip HTML characters from comments or other kinds of input fields.

Here is a character entity reference list, in case you need it! It includes lots of symbols that are handy to have around, including a non-breaking space character, which will be useful for the next section.

Make sure that when you’re editing a link’s HTML directly, you are doing it in the HTML editor, and not the visual/WYSIWYG editor. Please note that if you’re writing a WordPress post from the “Add New” link on the WP Admin Dashboard, there will be tabs at the top right of the post editor that say “Visual” and “Text”—the latter is the HTML editor. That’s the one you want to be in for this next section, but otherwise the visual editor will automatically make links for you. You can even copy a link address, highlight a section of the text, and then just press Control V to automatically make the highlighted text a link to whatever address you copied. (Be careful, though—I’ve accidentally messed up my links by pasting the wrong one, or doing that twice!)

Fancy Footnotes, or Links Within a Post

Sometimes, you may want to create footnotes to a post.  There are several ways you can do this. The simplest way is probably just to add a little asterisk to the place you want to add a note to, and put another asterisk with the note at the bottom of the post, separated a little bit from the main body text.* Like I just did.

One problem with that, though, is that if your post is very long, it takes a lot of scrolling to get to the footnote, and a lot more scrolling to get back to reading the post. Instead of putting it at the bottom, you could put it right underneath the paragraph to which you are adding a note. But that breaks up the flow of your writing and calls a lot more attention to the footnote than you may want. Especially if the footnote in question is long, or if there are a lot of footnotes, it may not be a workable solution. So instead, you may want to create a way for readers to jump from the main body of the text to the footnotes and back again.

By now, you’ve got the basics of links down. Here is where it gets a little more complicated. It can be difficult to figure this out the first time you try it, but once you get the hang of it, I think you’ll find it pretty easy.

Superscript

First, though, let me quickly present an alternative to asterisks. When you have many footnotes, asterisks become a very tedious way to denote the presence of footnotes, because you’re always having to count them up, and when there are five or six of them, they take up a lot of space. Instead, you may want to use little numbers—this is called superscript. Here is some code you can use for that purpose:

<sup>[1]</sup>

I’ll be using this as a base to add to—I just didn’t want people to get confused by what that tag does. WordPress does not (natively) have the ability to change text into superscript using just the visual editor, so to make notes appear as superscript, you’ll have to go into the HTML editor and add that tag. You’re going to have to go into the HTML editor for all of this anyway, of course.

Step One

The first step to creating an internal link is to define a place within the document that you want to link to. If you are creating footnotes, you need to define TWO places for each footnote—one above, and one below. Think of it like this: you’re creating a portal. A little wormhole within your document. You need to tether it to two different points. Point A and Point B cannot have the same name—if they do, then all links will go to Point A, and Point B will be ignored.

Here is how you give a point in your document a name:

<a id="fn1a">&nbsp;</a>

That’s footnote 1a. Copy and paste that code wherever it should go—a stands for above, so this one would go in the main body text, where you make a note that there is a footnote with further commentary.

This is the code that should go at the actual footnote, below the body text:

<a id="fn1b">&nbsp;</a>

That stands for footnote 1b. You can name the points in your document anything you want, actually, but I find it easiest to have a standard way to name them like this. Please keep in mind that the names are case-sensitive, meaning that FN1b is a different name than fn1b, and a different name from Fn1b.

You will notice that I have used the HTML character entity for a non-breaking space character** as the link text. The reason I do this is because WordPress likes to automatically strip out regular spaces from posts when you switch back and forth from the HTML to the visual editor sometimes—especially when they are at the beginning of a paragraph or stand alone, which is where you may need to put these sometimes. You will notice, if this is working correctly, that when you switch back to the visual editor, there should be a little icon of an anchor. That’s because this is called an anchor link. If there is no anchor icon, then your HTML has been stripped out and you will need to add it again. It’s annoying, but WordPress just does that sometimes. Most WYSIWYG editors have some sort of issue like that.

Step Two

The second step in creating internal links is to actually create the link itself. Here is an example:

<sup>[<a href="#fn1b">1</a>]</sup>

Copy and paste that code at point 1a. This is what creates a wikipedia-style mark that there is a footnote with a working link to the footnote. (It will look like this.^[1])

[<a href="#fn1a">1</a>]

Paste that code at point 1b, the footnote itself. (It will look like: [1])

That’s it. That’s all you need—just a hashtag and the name of the anchor that you defined in step one. Remember, again, that the names are case-sensitive, and that every point in the document needs to have its own name. You are creating a portal between two points, so if you have three footnotes, you’ll need to have six points, each with their own unique ids—and each linking to the other matching point.

To make a second set of footnote links, just follow the same steps, only replace each 1 with a 2. And so on.

Double-check that your links are working by previewing your post. HTML requires exact precision, so even just one typo can trip you up. You also may find that you need to make some minor adjustments to the position of your anchors. Read on for how to do that.

Adjusting the Anchor Position

When you follow the steps above to make a set of footnote links (or any other kind of link within a document), you may run into this irritating issue: When you actually click that link, you find that it takes you to a place somewhere below where you actually wanted to go. You’re almost certain to run into this issue if you’re hosted at WordPress!

It’s actually not taking you to the wrong place. It’s taking you to the right place, but the navigation bar at the top is covering up the first few lines of text.

So, to make it show up correctly, you have to adjust the position of the anchor.

The CSS Way

The easiest way to do that is by adding a few lines of custom CSS (Cascading Style Sheets)—but if you’re hosted at WordPress.com, you can’t do that unless you’re willing to pay $30/year to unlock that feature (but of course, if you self-host WordPress on your own site, you get it for free). It used to cost only half that much, but c’est la vie. On Tumblr, however, I’m pretty sure you can still add custom CSS to your tumblr theme for free. (Here are two more helpful links on using Chrome’s inspector and some Tumblr-specific CSS snippets.) So, for those of you who can customize your CSS directly, here is a snippet of code you can use to change the anchor position:

a.anchor{
 display: block; 
 position: relative; 
 top: -90px; 
 visibility: hidden;
}

The part that says -90px is where you’ll need to change the pixel value of how much you want the link adjusted to suit your specific theme. Just enter in a different number instead of 90, and see what happens. Remember that you want it to be a negative number in order to pull the position upwards, so keep that minus sign in there.

To make this work, you will just need to add that code to your CSS, and then every time you add an anchor link, add a class=”anchor” to it like so:

<a id="fn1a" class="anchor">&nbsp;</a>

If you don’t add that class to the anchor link, the CSS style won’t have anything to hook into and modify, so it won’t work. Remember to do it every time!

The real benefit of the CSS approach to fixing these internal links is that whenever you change your theme, all it takes is just a tiny adjustment to your already-written CSS code to make every anchor link fit your new theme.

The Manual Way

If you can’t modify CSS, then the only other real solution is to manually move the anchor up a few lines in the post instead of having it exactly where the footnote is. This takes some trial-and-error, and if you change your theme, you may need to readjust the links again.

For this blog post, I have used the second method of just manually moving the anchor. If you want to see an example of where I’ve placed them, please right click and inspect, and view the source code for this post.

I hope that all of this makes sense. If it doesn’t immediately, please don’t think you are dumb! It takes a while to absorb information like this—and the truth is that a lot of making websites is just copy and paste anyway. The best way to learn is just to try it out and see what happens.

You can use this process I just described for creating internal links to link to things that are not footnotes, too. Like different sections of a long post, or questions in a FAQ document, for example. It may help, if this isn’t quite clicking yet for you, to check how anchor links work in places like that, too.

Happy writing, everyone!

---

*  A horizontal line is a good way to create this separation—you don’t need to know any HTML for that if you’re on WordPress, though, because it’s included in the visual editor.

** A non-breaking space character is a space that does not allow a line break.