Sometimes, I stumble across things on websites and think huh, that’s pretty fancy. Occasionally, I later discover that it’s something that can be done on good ol’ WordPress. HTML anchors are one of my latest discoveries.
This particular fancy trick is being able to jump ahead to a particular spot on post/page. Wikipedia uses this a lot. It involves creating an HTML anchor, which can be navigated to much in the same way you might navigate between pages.
You can create HTML anchors for various block types, including headings, paragraphs, and images. Headings seem like a logical option, so for this post, I’m creating HTML anchors for Heading A (above) and Heading B (below).
When you’ve got a post open in the block editor, you’ll need to look at the block settings over on the right side of the screen. Then scroll down to the “Advanced” section and click on the little arrow to expand it. As shown in the screenshot below, it will display a box where you can enter an HTML anchor, followed by a short blurb and a link to get more info about anchors.
There are a couple of things to keep in mind when creating your anchors. HTML anchors are case sensitive, so heading-a and Heading-A aren’t the same thing. You can’t have spaces, for the same reason my URL isn’t https://mental health at home.org. If you’ve got 2 words, you can connect them with a dash.
Okay, that’s how you create the anchors, but how do you use them?
They can be added on to your post’s URL using a hash (#) symbol, which gives a link that you can insert wherever the heck you’d like. So, for my two example headings, those links would look like:
Those links don’t just work on the post where I’ve created the anchors; I can use them anywhere.
If I were to create a table of contents right here, just because I can, I could do something like this:
As far as I know, you can’t test these until you’ve published a post, because the URL doesn’t really exist yet until it’s published. If you make a mistake, which I do pretty regularly (whether that’s a typo in your anchor/link or mismatch in upper/lowercase), there won’t be any sort of error message when someone clicks on the link; instead, nothing will happen, as long as the actual post link is correct.
As an example of this, in the little table of contents above, I’ve created a link to a heading C anchor that doesn’t exist. Click the link, and nothing will happen.
For more info, see what WordPress has to say about page jumps.
More fancy: Cover blocks
One fancy feature I discovered that I think is cool to be able to do, but isn’t actually useful on my site, is the “cover” block with a fixed background. It’s a cool little trick, but it only works with vertical images. The picture I’m using below doesn’t really work, because to make it big enough vertically, it ends up very stretched out horizontally, giving a very zoomed in effect.
Well, there you have it, a couple of fancy-ish tricks that may not actually be useful in your life at all, but they’re still there for you if you need them. And I hope my explanation of HTML anchors is somewhat understandable. I wasted rather excessive amounts of time trying to figure them out in the first place.
Have you come across any fancy features of WP that you like to whip out on occasion?