How to Create Bookmarks / Anchors (aka Linking Within Pages)

An anchor simply scrolls you down to a predetermined place on a page. See it in action on our Resources page.

How many times have you gone to a webpage that you need to find some information on, only to realize that it’s a mile long… and you silently cry on the inside?

See, really long pages are a pain to navigate around.

That’s where bookmarks/anchors come in, they provide a quick way for visitors to jump around page content without scrolling.

For the most part, the term “bookmark” and “anchor” are the same, but for simplicity I’ll be using the word “anchor” (just because some people might confuse ‘bookmark’ with saving a webpage to their favorites). K?

An “anchor” is a combination of two pieces, the anchor AND the hyperlink to that anchor. That might seem weird, but if you have an anchor with no hyperlink to it… do you really have an anchor?

[head angled with eyes squinting] HHHmmm? I think not.

It only takes two steps to make an anchor, here’s how…

Start With Your Anchor

In order to create a hyperlink to your anchor, you FIRST need to define where that anchor should be in your page. An anchor is just a tiny piece of HTML that you embed on a page.

Here is the HTML (you would need to paste this in the TEXT tab of a long WordPress page, NOT the regular Visual tab):

<a name=”anchornamegoeshere”></a>

Of course you would need to change anchornamegoeshere to something that makes sense for that particular anchor.

Where do you put that little piece of HTML? You should put it directly ABOVE the heading / section you want to link to. Why? That way the top of the visitors browsers window will be directly at the top of the section they want to read.

For example, if you had a page of resources broken out by category, and one of your categories was titled “Hardware”, your anchor HTML should be:

<a name=”hardware”></a>

and that would look like this in your WordPress editor:

PRO TIP: Make your life easy… when creating anchors only use lowercase letters, NO spaces or NO symbols. Numbers are ok, but they aren’t very descriptive (example: “hardware” is more descriptive than “3951”).

Hey, I don’t see the Anchor?

That is true! When you paste the anchor HTML into your page you will NOT see anything when you switch back to the Visual editor OR when you save the page and view it on the front-end.

That’s ok.

It’s there. Trust me.

Link To Your Anchor

Now that your anchor is set, now the fun part is being able to link to that anchor. This is the entire purpose of the anchor… to link to it.

There are two ways to link to your anchors and each is formatted a little bit differently.

If you are linking from the top of Page A to an anchor on Page A

Type your text at the top of the page and add a hyperlink

The hyperlink should be #anchornamegoeshere

No need for http:// or the domain name at all… just #anchornamegoeshere

The hyperlink should look like this in your WordPress editor:

Or this might be the link you are trying to create:

If you are linking from Page B to an anchor on Page A

On Page B, type your text and add a hyperlink

The hyperlink should be the the full link to the page where the anchor has been added (for example: http://my-domain.com/about/)

After the URL to the page add the #anchornamegoeshere at the end

The hyperlink should look like this in your WordPress editor:

A Real Life (Awesome) Example

When we launched the Web Designer’s Academy last year, our top goal is to share that we know with you. Well, after creating websites for years we have some products / services that we regularly use so we put together a Resources page.

On that page at the top is a list of categories that link down to their sections, it’s a great example of why using anchors on long pages work so well