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.
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:
If the heading has more than one word, use - to separate. Here’s an example from a real site:
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?
Normally in HTML the anchor looks like this:
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!
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?
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