Hello, I’m posting recipes on my Ghost blog. I want to do jump links that link to the recipe at the bottom of the post.
I’ve searched the forum and online and I found the answer BUT I don’t know how to implement it.
I can see that it works on his site but I don’t know how to get it to work on my site.
Can someone please explain in plain English how to do this? I am a former HTML developer and have been blogging on Wordpress for over a decade but I am not very familiar with Ghost.
Thank you
If you add a heading to the section you want to add a jump link to (e.g. “Recipe”) then you can use that heading in the URL to create your link, like this:
yoursite.com/article/#recipe
If the heading has more than one word, use - to separate. Here’s an example from a real site: https://demo.ghost.io/design/#installing-ghost-themes
Thanks for your quick response.
I understand how to make the link. How do I add the tag for the heading?
Here is the link I made: https://yoursite.com/test/#mushroomscalloprisottorecipe
Now how do I create the anchor that it links to?
Ghost automatically allows you to make jump links with all headings in your posts. You just use the # identifier at the end of the URL to link to a specific section of your article, followed by the heading itself.
You need to swap out yoursite.com/test/ for the actual URL of your post, followed by the heading. If the heading is Mushroom Scallop Risotto Recipe, then it should be #mushroom-scallop-risotto-recipe at the end of the link.
Thank you Kym!
I tried it and it still did not work.
What am I doing wrong? I’m sure it’s something really stupid but I can’t figure it out.
Thank you in advance!
https://www.annmariemichaels.com/easy-mushroom-scallop-risotto/#easy-mushroom-scallop-risotto-recipe
I just tested it using this heading from your post, and it works for me with the above URL.
Are you saying it works for you? When I try to click the link in Chrome or Brave or Safari, nothing happens.
If I hold down the link on some browsers, it will open in a new tab.
Very odd. Is it supposed to do this? How do I make the link automatically click to the link instead of having to hold down?
Thanks.
You need to copy and paste the URL I shared above into your browser to see it jump to the relevant heading within your article.
I shared the link this way to prevent the forum software from turning it into a bookmark card - so you could see how the URL needs to be compiled.
OK thanks. I put it into the browser url bar and it worked. However, it is still not working on my post. How do I add it to the post so it works?
As you can see, I added it twice to the post now – still doesn’t work.
@annmarie you’ve added your heading manually using a HTML card - in that case you won’t have an id automatically generated for you compared to using the built-in headers.
In this case because you’ve given your own id, the internal link would be #mushroomscalloprisotto or if you’re linking from an external site https://www.annmariemichaels.com/easy-mushroom-scallop-risotto/#mushroomscalloprisotto
I’m trying this as well however my Heading already has dashes in it for example
The Brand Gap - Marty Neumeier
so how do I handle anchors since I was testing and it didn’t seem to work using #The-Brand-Gap—Marty Neumeier
Also how do I use the URL in the link if it’s still in preview with a preview URL can this only be don’t after the page is published?
Hey Nam, welcome to Ghost!
When you preview the post, you can see exactly how dashes and such have been handled. You can also put in the URL as just #your-heading for the link (as long as it is on the same page), so it doesn’t matter that the page link is going to change when you publish.
I just checked hyphens. My heading was My big heading - with a hyphen, and Ghost gave me an anchor of my-big-headingwith-a-hyphen. Which is a little quirky, but certainly something you could get used to.
I see yea that worked, i had to inspect the titles to get the correct ID, seems like it also removes periods and other punctuations.
Yep! It’s got to make a string that’s a legal url.
1- I have found that this works but any caps in the heading need to become lower case.
2- The resultant URL lands below the heading and the heading isn’t visible. Is there a way to have it anchor above the heading or at the heading rather than below it?
Example: Do Searchers Use Pack Results?, LSA Review Abuses, Google's Failed Review Moderation
A recent observation about the anchor not showing the headline that it is link to:
That only occurs on desktop browsers. On mobile browsers it functions correcting and makes the headline visible when the anchor link is selected.
Hi @annmarie Saw your question here on the forum and I get the same question from most of my clients. So, I created a step-by-step guide for those who would like to learn how to do it. I know it seems like there are so many steps involved (for a non tech person), but believe me when you get used to it, it just take a few seconds to do it.
The simplest answer is here, from a previous post.
Hi, creating anchor seems to be challenging on Ghost. I’ve been creating anchor links in my Ghost posts, but when I publish, unrelated characters and numbers get added to the slug, causing errors. E.g.’
I’ve never added ‘p/bd194660-3e60-43c2-88c8-b2af2f59061b7’ but can’t remove it.
No matter how much I edit the id, it doesn’t seem to fix it. The errors are inconsistent, sometimes happening and sometimes not. What could be causing this? Or should I just avoid using a lot of anchor links in my posts?
I’m not tech-savvy, but really want to fix it in any way!
Thanks in advance for your kind help!
That link is a preview link. When you actually publish, you should get the slug you’ve chosen, or if it is already in use, that slug with -2 appended.
