WordPress On-page Anchor LinksI was emailed by a client over the weekend and asked a relatively simple question concerning how to link to sections on the same page, similar to a table of contents for the current post or page. So here is a guide with a walk through process of using the WordPress editor to create a table of contents.

Maybe you can tell me how to create a jump-to link within the same page. So up near the top I have listed 7 topics.  I want visitors to be able to click on them and jump down the page.

I. Setting up the Post

II. Creating the Links

III. Adding the Section id Attributes

IV. Extra – Fixed Navbar 

 

Setting up the Post

Overall nothing special needs to be completed, I would suggest writing out the post in full.

Wordpress On-page Anchor Links

 

In creating the links we can use the WordPress link button, instead of using http:// or www we will simply link to #nameofanchor. In my case I’ve chosen to start all my links with “anchor-*” to make sure that they do not get confused with any styles. While I use limited id tags in my css, better safe than sorry. So the first anchor I have setup is “#anchor-settingupthepost”.

Wordpress Anchor Link

Adding the Section id Attributes

The last step needed will require first selecting the “Text” tab in the upper right corner of the WordPress editor. This will let you see the raw code behind the post you are creating. It’s ugly, but a lot of it is just markup you can ignore. You need to find the headings you made when you wrote out the entire post, in my case, they are H3 tags. Once you find them you will add an id with the name of the anchor you created in the previous step. Remember to drop the # symbol and don’t forget open and closing quotes!

WordPress Anchor Tags

Fixed Navbar

On my site I use a fixed navbar at the stop for desktop size resolutions, this will cause a slight issue with anchor links. When being summoned to the called portion of the page it aligns with the top of the window, not the bottom of your fixed navbar. As a result, we need to add in some faux padding/margins to respect this. Here is the snippet I use, my navbar is 95px in height (height + margin + padding):

You can opt to skip the media query if your fixed navbar is active at all sizes of your website, or if your website is not responsive. In the case of this site, my fixed navbar is only fixed at widths of 980px or higher.