How to Add In Page Anchor Links In WordPress Posts

Written by Amit Banerjee on 15 Feb, 2010 Under Blogging

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.

Insert Anchor links in WordPress posts

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.

Anchor links in WordPress posts

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).

  1. Reader Comments

  2. bimbolera

    this part:

    http://yourblog.com/post2#somename

    isn’t working huhu!

    February 25th, 2010
  3. @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

    February 28th, 2010
  4. Another way is to use Anchor Heading

    And link as page.com/page#anchorname

    by using text

    May 22nd, 2010
    • @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.

      May 22nd, 2010
  5. Amit, thanks for this post. This was the only thing that worked for me after an hour or so of searching around.

    July 28th, 2010
    • @Doug: I am glad it worked, thanks for the comment.

      July 28th, 2010

Add Your Comment

All Comments are Moderated.

YOUR COMMENT



About This Site

Ampercent is a technology blog on computer tutorials, software guides, how to tricks and web tools. The blog is updated daily and written by two computer science students from India. Read More »



Subscribe to RSS Feed

Join Our Community

Submit Product For Review

Want a Software or a product to be reviewed ? Tell us about it, we will do the rest.