How to Link to a Specific Part of a WordPress Page

Sometimes linking to a page isn’t enough. You may have a very long page with lots of text, and you want to direct visitors to one section in particular.

In this post, you’ll learn the trick for linking to a precise part of any post or page on your WordPress site.

How to Link to Part of a Page

In order to link to a specific part of a page, you need to do two things.

1. Add a point to link to

First, you need a way to mark a place in the page. We’ll do this by adding an ID attribute to a heading element on the page. Don’t worry, it’s easier than you think.

2. Link to that specific point

Secondly, you need to modify a link to point to that place in the page. To do this, we’ll modify the URL of a link with the ID of the heading we want to link to.

Let’s get started, and I’m sure you’ll find this easy to setup on your site.

Ready to learn WordPress? Conquer WordPress in the next hour with WP101's video tutorials. Start Learning Now.

How to Add an ID to a Heading

In your dashboard, navigate to the page you want to link to. Then, switch the editor from the Visual view to the Text view.

switching the post editor to the Text view

Scroll down the page until you find the section you want to link to. In this example, we are going to use an h3 element as our target.

In the Text view, you’ll see your headings are wrapped with HTML tags like this:

<h3>This is a heading</h3>

To add an ID, update the h3 tag like this:

<h3 id="page-part">This is a heading</h3>

Here’s how it will look in the editor:

example of a heading element with an ID

The ID doesn’t have to be added to a heading. You can use any HTML element in your page. In fact, if you don’t see any HTML tags you can use, just add this to your page while in the Text view:

<div id="link-target"></div>

That will add an empty “div” HTML element. You won’t see any difference when you view the post, but this will give you a target you can link to.

How to Link to an ID on a Page

Now that your ID has been added, you can link directly to it.

Highlight the text you want to be linked, and click on the link icon to add a link.

highlighting and linking text

In the popup, add the link to the page followed by a hashtag and the ID you added to the page.

linking to a page part

When you want to link to part of a page, you can always add a hashtag (#) and an ID of an element on the page to link directly to that element.

Now when someone clicks on that link, they’ll be taken directly to the element you added the ID to.

Conclusion

With a bit of HTML, you can link to any part of any post or page on your site. This can be great for linking to long pages, or simply saving visitors a bit of time.

If you’re new to working with HTML, check out this free HTML course by the Khan Academy to learn more.

If you have any questions about adding links to specific parts of pages, leave a comment below.

Related Posts

25 Comments

  1. Bruna Campos Bruna Campos

    Thats what im looking for! Thanks!

  2. Dando aula de Violão Dando aula de Violão

    wow thank you, the time was in search of that content. Thank you so

  3. Matt Sztanko Matt Sztanko

    Wow, it’s taken about 10 other posts I’ve skimmed through to get to yours…the others were a bit unclear but your version was crystal clear! Great job, now I know exactly what to do, many thanks for this!

  4. Aleksandra Pavlova Aleksandra Pavlova

    Amazing, thanks, perfect for my landing page!

  5. Mike Mike

    It does not say how to link to specific place on the next page. The div tag is not working. 🙁

    • Ben Sibley Ben Sibley

      Hey Mike,

      You can place the div element anywhere on the page, or add an ID to an existing element on the page where you want the link to lead to. Make sure the editor is in the “Text” view when you add the div – it won’t be visible in the “Visual” mode.

  6. Curso Iniciantes do Violão Curso Iniciantes do Violão

    Amazing, thanks, perfect for my landing page!

  7. Laurel Laurel

    This was exactly what I was looking for; however it doesn’t seem to be working for me. The browser is automatically adding a forward slash in front of the #. I can’t figure out why… but because of that, it only links to the top of the page, and not to the bottom of the page where I’m attempting to link it… Thank you in advance!

    • Ben Sibley Ben Sibley

      Try adding a forward slash after the ID, and this may prevent the browser from adding it:

      http://website.com/some-page#page-part/

  8. Mark Mark

    Well done! Clear and helpful instructions.

  9. Sirisha allamneni Sirisha allamneni

    Thank you very much. Very good explanation for a non-coder like me.

  10. Mark Perkins Mark Perkins

    Fantastic thank you

  11. Stinus Stinus

    Any way you can make it scroll down quickly to the ID instead of having to reload the page?
    thanks 🙂

    • Ben Sibley Ben Sibley

      Hmm it should skip to the link immediately. Make sure the URL is formatted exactly the same in the link as in the browser’s address bar when viewing the page.

  12. Zaheen Zaheen

    I have this link, when normal click on it, its not working but when i right click and open in new windows its working fine. can you please help me how can i solve this issue?

    • Ben Sibley Ben Sibley

      If a link is not working with “#” after it, try adding a forward slash first, like this:
      http://website.com/example-page/#anchor

      • Zaheen Ahmed Zaheen Ahmed

        Thanks for your reply,
        I also tried in this manner what you mentioned above,its not working. it looks a dead link when right click on it and open in new windows its working fine. can it be conflict with any plugin or something?

        • Ben Sibley Ben Sibley

          Make sure the ID isn’t assigned to two elements on the page. This could also prevent it from working. You can check for errors like this with an HTML validator.

          • Zaheen Ahmed Zaheen Ahmed

            Thanks Ben, Problem has resolved there was conflict because of javascript code, i am also using pagescroll to ID function, there was a small error in the code.

            regards,
            Zaheen

  13. Manoj Manoj

    Hi Ben

    Thanks a lot for this tip. I was searching for this kind of method for linking to a specific part of my web page.

    Well written.

    With best wishes,

  14. Wanda Wanda

    Thank you – I think I figured it out. Took me all morning but I think it is working. I am a real novice so had to take time to figure out what “element” meant and what “id” was. 🙂
    Thanks

  15. Fiona Fiona

    Hi seems so easy but somehow doesn’t work for me.

    I’ve added it as ”Come As You Are. Leave As You Want To Be. And ENJOY Anything In Between.”   Unknown 

    (also tried

    and link as http://www.ohmybodytalks.com/something-about-me#mystory/ (with and without the / at the end.

    • Ben Sibley Ben Sibley

      Hi Fiona,

      The way you’ve shared the link here is correct. However, when I visit that URL, a forward slash gets added in front of the “#” which prevents it from working. Try checking if you have a plugin on the site that adds a forward slash to the URL automatically.

  16. Ciska Ciska

    Hi,
    This is what I was looking for and implemented on my page. However I also have this problem that it does not jump to the bottom section immediately, it seems as if the page does a reload/refresh before landing where I want it. My page sample
    http://travelhippi.com/resources/

    If you click on the “Flight bookings” button it should go down the page to that section. It just take a bit long to get there. Is this normal?

    • Ben Sibley Ben Sibley

      Hi Ciska,

      It takes me to the flight bookings section right away when I click on it. Maybe the page is just taking a little while to load?

Post a comment

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