Anchors

What is an Anchor? How can I add Anchors to WordPress? How can I add "Back to the top" links to my WordPress?

Chapter index of the page (click on a chapter title to see how anchors work):

Chapter 1: What is an anchor?
Chapter 2: How can I add anchors to WordPress?
Chapter 3: How can I add a "Back to the top" link in WordPress?
Chapter 4: Linking to a specific part of the page from another pag

Chapter 1: What is an anchor?

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

Let’s have 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".

Chapter 2: 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>

Chapter 3: 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.

Try it by clicking here. Of course you can also use an image:

Chapter 4: 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.


This FAQ is also discussed in my WPFAQ.org E-Book (sample)


© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
It's an EBookStoretoday.com company. It’s presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -




Now share it…

Share

Comments are closed.