If you like to neatly organize your posts into “section”, then listen up!
So, this is reeeaaaally embarrassing for me because I consider myself pretty computer/coding savvy, and I totally used to know how to do this, but I seem to have forgotten and can’t even Google it. Let me explain:
On a blog post, say about Space and Time, if I wanted to write the first section about space, I’d header it “Space,” and then I’d header the second section “Time” because I want it to be about time.
How do I make these linkable inside the actual blog post? Because I know the URL would be, for instance, www.blog.com/space-and-time, but how do I get the space-and-time#space or space-and-time#time part to work, so that if I wanted to link to that particular section, I could do so?
I know it’s super specific (so feel free to truncate my question), but I can’t find this out anywhere, and it’s been driving me nuts trying to remember/finagle my way to it with no results whatsoever.
Hi Sierra! What you’re referring to is the ID attribute. I don’t think there’s any way to do this with the visual editor, so you will have to use HTML.
Let’s say your first header is “Space”. You’d write it out in your post like this:
It doesn’t have to be inside an h2 tag, but if it’s a section title it really should be. 😉 Now all we have to do is assign that HTML tag an ID, like this:
That tells us that the header section for “Space” has an ID of “space”. Now to link to that, the URL would be http://www.yourblog.com/post-title#space. So you just have that hash with the ID at the end.
But as I said, you don’t have to use h2 tags. You can assign an ID to anything. Here are a few more examples:
<div id="space">Space</div> <span id="space">Space</span> <p id="space">Space</p>
Note about “good practices”
It used to be common practice to assign IDs like this when you want to link within a page:
This is no longer considered good practice. If you don’t actually want that “Space” text to be a link, there’s no reason to use the anchor tag. Stick to headings instead (or anything else).
Okay, why am I not getting this? I have no idea what you guys are talking about lol.
I think it’s like a wikipedia page. When you click on something in the menu at the top, you jump to that section on the page. I think. XD
Oh okay, that makes sense now. Thanks.
Thank you, you wonderfully helpful human being, you!
ASHLEY YOU ARE SOME KIND OF GODDESS. I’ve been trying to figure this out for so so so so so so so so so long, and I’m freaking out because I’m so happy that I can do this now I SERIOUSLY LOVE YOU SO MUCH AHH *attack hugs*
Fantastic post! <3333 *runs off to go try this*
Hey Ash, would that also work as a class (instead of id)?
I find they are easier (for me) when writing css, but it doesn’t seem this particular issue would even need css. But, when coding, I lean more on css, my hubby moreso on html, so for me to do this, I could use class?
not sure why it says Space in my previous post. lol
It’s not possible with using a class because classes are used when you want to use it multiple times within one page. So if you were to (try) to use a class with this method, it would assume it appears multiple times and it wouldn’t know which one to jump do.
But IDs are used for totally unique elements, which is why it works here, because it then knows exactly which one to jump to, since there’s only one!
So you have to use ID, but as you said, you wouldn’t really need to use CSS in this case. You could add both though if you wanted. Like this:
<div id=”thisistheid” class=”thisistheclass”>
Got it. Thanks girl. Sometimes I wish I could trade brains for a day with all that puter knowledge u have 😉 I’m still so green even though I’ve been doing my classes for months now. ~AR
OMG thank you. I’ve been wondering how to do this for YEARS.
I was actually just thinking about this the other day. Is this doable on WordPress.com?
Yep, absolutely. 🙂
Thank you ! I was just thinking of this the other day and I try to google it and there’s no result ! >_< I'm happy I find your website Imma gonna subscribes now~ really helpful