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.

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 COMMENT

  1. Instead of editting the HTML code (and using div’s) I found it much easier to add the “anchor” button to the MCE editor in WordPress and then use it to insert the anchors where desired.  The code to add to your theme’s function.php file can be found here (I got it elsewhere originally but can’t remember where): 
    http://pastebin.com/MVLUhrEQ

LEAVE A REPLY

Please enter your comment!
Please enter your name here