An anchor is a link which points to a particular part of a page.

Here’s an example:
Say you have a page which is full of text and divided into chapters. You may want to have an index of the chapters at the top of the page and when someone clicks on a link in that chapter index you want him to be taken directly to the chapter he wanted to read. How can you achieve that? That’s what anchors are good for…

Try it by clicking on a link in the “Chapter index of the page”.

How can I add anchors to WordPress?

For an anchor to work you need two things. First is a link pointing to the anchor like

http://yourdomain.com/sitename/pagename/#1

and second is the target hence where you want people to be taken to when clicking on the link. This is defined by the following code

<a name="1"></a>

which needs to be placed where you want people to be taken to when clicking on the link. The 1 stands for the name of the anchor. I always use 1 for chapter 1, 2 for chapter 2, 3 for chapter 3, … But you could also use a keyword like languages if you want

http://yourdomain.com/sitename/pagename/#languages
< a name="languages"></a>

I would recommend you to use 1, 2, 3, … because it’s easier.

1) Write the content of the page where you want to have Anchors
2) Make the links, as you always do, pointing to the anchors.

<a href="http://yourdomain.com/sitename/pagename/#1" target="_top">Chapter 1</a>

for Chapter 1

<a href="http://yourdomain.com/sitename/pagename.html#2" target="_top">Chapter 2</a>

for Chapter 2 and so on…

Replacing http://yourdomain.com/sitename/pagename/ with the URL of the page you want to have anchors on. Once you have the URL of the page add #1 for the link pointing to chapter 1, #2 for chapter 2, #3 for chapter 3, … as in the examples above.

Example: Towards the top of this Anchors FAQ page I made a link linking to:
http://wpfaq.org/site/anchors/#3 for Chapter 3

3) Now you need to add the anchor code to the page where you want people to be taken to when clicking the appropriate link. A few lines above the start of the chapter of interest or at the end of the chapter preceding the chapter of interest add

<a name="1"></a>

How can I add a “Back to the top” link in WordPress?

Especially when pages are long it is recommended to add a link which goes back to the top so people don’t have to scroll the whole way up again. To add a “Back to the top” link in WordPress add the following code under Appearance, Editor, header.php right after the <body> or <body <?php body_class(); ?>> line

<a name="top"></a>

and where you want the link to display add

<a href="#top">Back to the top</a>

of course you can also add the back to the top link more than once on the same page if you want.

Linking to a specific part of the page from another page

To link to a specific part of the page from another page use the URL of the anchor

http://yourdomain.com/sitename/pagename/#NameOrLabelOfTheAnchor

In the example of this page

http://yourdomain.com/sitename/pagename/#1 for section 1
http://yourdomain.com/sitename/pagename/#2 for section 2
and so on…

Just as in step 2 of Chapter 2 of the tutorial.

Leave a comment

Your email address will not be published. Required fields are marked *