How to Add In Page Anchor Links In WordPress Posts
Anchor links can be used to create a link within the same HTML document or page. Anchor links are used in pages with lots of content so that the visitor can quickly jump to a section by clicking an anchor link.
Create Anchor links Within a Post in WordPress
Say you have written a very long post and want to place in page anchor links to some texts in your posts in WordPress. Here is a step by step guide to achieve the same:
1. Open the post for editing and select the text you would want the user to click.
2. Click the hyperlink button and remove the http:// . Now, insert a unique anchor to this link. For example: #anchorname or #firefox etc.
3. Switch to the HTML tab of the post and find the paragraph where you would want the page to scroll down once the user clicks the link that you created in step 2.
4. Include <div id=”anchorname> before the begining of the paragraph and include </div> at the end of the paragraph.
5. Save the post and preview it. Click the link and the page would automatically scroll to the paragraph where you have included the corresponding <div> tag.
Create Anchor links Across posts in WordPress
You can create similar anchor links to and from other posts of your blog. Suppose you want to create an anchor link from post 1 to a paragraph at post 2. First, open post2 for editing and include the unique div tag (e.g <div id=”somename”> paragraph </div>.
Next, open post 1 and select the text with which you would want to create the link. Click the hyperlink button and enter the full URL of post 2 followed by the id of the anchor link. ( i.e http://yourblog.com/post2#somename).
this part:
http://yourblog.com/post2#somename
isn’t working huhu!
@bimbolera: That’s just an example to illustrate how anchor links work in WordPress. Have you tried the procedure as described? It works perfect, I bet. Thanks for your comment
Another way is to use Anchor Heading
And link as page.com/page#anchorname
by using text
@Debajyoti: Yes , that procedure works too but just in case you want to link to anchor tags across multiple pages, you have to include a unique div id. Thanks for the comment.
Amit, thanks for this post. This was the only thing that worked for me after an hour or so of searching around.
@Doug: I am glad it worked, thanks for the comment.
Thanks so much for this post. I’m not a programmer and this was helpful to have someone hold my hand through it. I used it today!
I changed it up slightly. I had a post that appeared on the blog homepage and contained a “Read More” link. I had text above that, which I wanted to link to the expanded page. I had to add the full url address before the #anchorname code. No space after the end of the url and the #anchorname.
It worked like a charm. Thanks again. Great post for us marketers without any coding background.
Diane
@dvautier
Thanks Amit for this useful advice.
Christopher
@Christopher: I am glad you found it useful. Thanks for the comment.
Am writing an article now and was wondering if it was possible. I guess it is, going to try it right away:).
thanks, sorted it and twittered how cool it was
Thanks, this was exactly what I was looking for. I tried a couple of other methods but they didnt work.
Thanks, I tried-it and it works! Great
Here is the link I tried :
http://escrimeliban.com/championnat-mediterranneen/reglement/#englishtext
I’m trying to link text from 1 page to another in wordpress and used your suggestion above and it doesn’t work.
Is there a different way to link text from page to page in wordpress?
@Lorene: You might want to double check the source code of the post again and check for errors of the “”. WordPress handles double quotes very badly. The above method works in any HTML webpage, not just WordPress
Thanks so much for this – it works! I’m not a programmer, or that tech savvy for that matter, but these instructions were simple and easy to follow. I have a wordpress.com (not .org) blog, so I thought I would not be able to anchor, but thanks to your instructions, I can!
@lesh: Glad you found it useful. WordPress Anchor links helps a lot when you have a long post and you want to create easier navigation
div id=”somename” vs div id=”somename”
First of all thank you for you post. I simply copied and paste the line in my article, just to test it. But it didn’t work. Then I found the quotes you use in the post are different once then wordpress accept. So if somebody is lazy as me and just copy past the line, it will not work, instead past this
paragraph
The official html way to link to a position in a page is a bit different.
Click here to go to anchor1
Click here to go to anchor2
Some paragraph....
This is the paragraph where the anchor1 link scrolls to
This is the paragraph where the anchor2 link scrolls to
I’m sorry, the comments don’t allow me to show the html
I’ll try something else..
Click here to go to anchor 1
Again no luck. Code and pre tags don’t work here. So I cannot demonstrate what I mean.
<a href=”#anchor1″>Link to anchor1</a>
@Erik: I understand what you’re trying to convey, but for security reasons, HTML codes are disabled in the comment form.
Ok this works, unfortunately I cannot delete my previous comments. So one more time.
The official html way to link to a position in a page is a bit different.
<a href=”#anchor1″>Link to anchor1</a>
<p>Some paragraph…</p>
<a name=”anchor1″></a>
<p>This is the paragraph where the link will scroll to</p>
@webmaster I understand your reasons. However, in an article that’s about coding, it’s a bit strange you cannot share code examples in comments. Well, finally I managed hehe.
cheers,
Erik
Hi – Can you help. All of a sudden my site URL gets a # at the end when you type in the normal URL. This is along the lines as this discussion but can’t really understand what is going on. I’m not a programmer. Would really appreciate any direction. Thank you
Andrew
Hi Andrew, can you be a little more specific regarding your problem. What errors are you getting after implementing the steps mentioned in this tutorial?
Hi – Thanks for your help. i think i have just sorted the problem. It was related to a widget with some java script in it for a webform!! Our hosting service pointed me in your direction because they thought it was to do with ‘anchors’
Thank you for replying,
:>)
Awesome! thx!
worked perfect.
Great article…I have used plugins that didn’t work and with your help everything is solved…congruts….:D