Yes, it IS possible to embed hyperlinks in titles! (but there are caveats)

Ready for a surprise?

The title of this post contains two links. The link on the first part of the text is to the post itself; this is quite normal. However, there’s a second link at the end, on the bracketed text, that should take you to the ‘caveats’ section below. (I’m assuming that you’re reading this in a standard web browser, not in the WordPress Reader.)

Let’s start with the caveats

  • Things change. This works today; it may not work tomorrow.
  • I’m referring here to WordPress.com posts/ pages created in the ‘block editor’.
  • Some of this is theme-dependent; I’ve tested on Twenty Ten, Reddle & Colinear.
  • How the link is rendered will be device/ browser/ theme dependent.
  • I’ve not found a way to reliably highlight such links: they may be mystery links.
  • If the default link on a title is to the post itself, overriding that may cause confusion.
  • You may want to check the slug before publication to ensure it’s human-readable.

How to embed links in (WordPress.com) post titles

The title of a web page is, technically speaking, no different from the rest of the page. It’s marked up using HTML. Currently, at least, it’s possible to embed hypertext anchors within the title simply by typing in the necessary code directly into the title in the editor.

What I actually entered as the title of this post was:

Yes, it IS possible to embed hyperlinks in titles! <a title="This link is to the caveats!" href="https://pendantry.wordpress.com/2021/08/24/yes-it-is-possible-to-embed-hyperlinks-in-titles-but-there-are-caveats#caveats">(but there are caveats)</a>

If you don’t know the code to create an HTML anchor element (‘<a> tag’) — which defines a hyperlink — I explain that in my post ‘How to embed links in WordPress comments‘ (or you could visit the relevant W3Schools tutorial page, which has the advantage of a ‘try it yourself’ interactive widget).

Curiously, in the three WordPress.com themes on which I’ve tested this (Twenty Ten, Reddle and Colinear), as far as I can tell, the editor removes any and all HTML (and inline CSS) except anchor elements. It won’t even allow the humble underline element (<u>), which was the first thing I tried to use to draw attention to the existence of an unexpected link in the title. The anchor’s title attribute is allowed (on all three of those themes I tested), but that’s of minimal use as it’s still necessary to hover over the text to get it to pop up, so such links remain mystery ones.

(For more on the title attribute in anchors, see my post ‘How to add mouseover tooltips to links in WordPress‘.)

In some themes, WordPress automatically creates a default link on the title to the post’s permalink (in some situations). Embedding an anchor within the title terminates that default link; the remainder of the title text will in that situation be rendered with no link at all. So (if you’re using one of those themes), if you add a link to the interior of the title, it’s probably best to insert a link to the permalink to the remainder of the title as well; alternatively, if you just want to add a single link, you can avoid this extra hurdle if you put the link at the end of the title.

You can embed several links (I’ve tried it with three): there is a limit, which is probably the maximum length of the title. I’ve done some testing that indicated that a title can contain up to (a bizarrely huge!) 64k characters, so this shouldn’t be an issue.

The background: what made me think of this

During a recent trip into the blogosphere via ?RandomRaiders!, I visited a post from last year on Goldie’s site. It’s labelled (in the post’s title) as an ‘HW’ post. Now, I try hard to avoid jargon (and abbreviations, unless they’re well-known) wherever possible, because I believe that clarity beats brevity, and jargon tends to hinder, rather than aid, communication. But I’m well aware that some people love the stuff. It seems to be a part of human nature to abbreviate even when doing so might obfuscate; I suspect there may be a cognitive bias that applies§. But I digress.

Goldie uses a variety of abbreviations on his site, applying these as prefix labels to his post titles. His intent is to assist his audience, and that’s admirable; personally, I find them confusing, and wonder why he doesn’t simply use categories — but I don’t mean to cast aspersions on my friend, it’s his site and he can do with it as he wishes. And, as always, it’s quite possible that I’m the one who’s wrong here; perhaps his other visitors find his abbreviations helpful.

So, anyway: I landed on that post of Goldie’s, and its title is prefixed with ‘HW’; and I suddenly thought how useful it would be to be able to click on the unfamiliar (to me) abbreviation in the title itself to find out what ‘HW’ means. (It stands for ‘Hashtag Week’, which is just as inscrutable to me, and perhaps explains my inability to remember it when I see it, unlike, say ‘CW’, which is ‘Creative Writing’.)

An example

The title of Goldie’s post I refer to above is ‘HW: Monday Motivation; Chase Your Dreams!

In some WordPress themes (such as Twenty Ten, which I’ve used here on ‘Wibble’ since day one, as well as the theme Goldie currently uses on his site), the title is rendered by default as a link to the post’s permalink (in some situations). In such cases, WordPress automatically employs the following code (in the background, hidden from the user):

<a href="https://dailyflabbergast.wordpress.com/2020/07/27/hw-monday-motivation-chase-your-dreams/">HW: Monday Motivation; Chase Your Dreams!</a>

If Goldie wants to retain the ‘HW’ abbreviation as a prefix, then there’s a problem, because inserting a link terminates the default anchor (as I explained above), and the remainder of the title will just be text with no link.

<a href="https://dailyflabbergast.wordpress.com/2019/08/31/nrop-cw-bt-hw-what-do-those-mean/">HW: </a>Monday Motivation; Chase Your Dreams!

One way round this would be to manually add the permalink back in again for the rest of the title. However, this is more work (especially as it would be necessary to ensure that the correct permalink is used each time — and that, of course, changes with every post):

<a href="https://dailyflabbergast.wordpress.com/2019/08/31/nrop-cw-bt-hw-what-do-those-mean/">HW: </a><a href="https://dailyflabbergast.wordpress.com/2020/07/27/hw-monday-motivation-chase-your-dreams/">Monday Motivation; Chase Your Dreams!</a>

An alternative would be to put the abbreviation at the end of the post title instead of at the beginning, relying on the default behaviour of WordPress to provide the first link. That way, Goldie would only have to add the link to the abbreviation at the end (and that’s much easier because it’s the same address for every post):

Monday Motivation; Chase Your Dreams!<a href="https://dailyflabbergast.wordpress.com/2019/08/31/nrop-cw-bt-hw-what-do-those-mean/"> :HW</a>

This would have the added benefit of visitors being able to identify from then on whether the post title had the ‘link-in-title’ feature, or not. If the abbreviation is at the beginning, it’s an older post, and there’s no link; if it’s at the end, then it’s one of the ‘enhanced’ ones. (And, assuming that Goldie were to run with this idea, he could perhaps consider amending his original ‘what do those mean?’ post to explain the difference.)

I have long used the term ‘mystery link’ to refer to links that are effectively hidden (to most users) on a web page — ever since I recognised, many years ago, that these were an irritant. In the vast majority of cases, there is very little point in embedding, within a web page, navigation that is effectively invisible, and can only be found (by most users) by waving the mouse around in the hope of finding something that may (or may not) be there. As respected HCI expert Jakob Nielsen says, “Users […] like websites that support the goals of their visit” — and hiding links from the user fiercely hinders this. According to Nielsen:

Textual links should be colored and underlined to achieve the best perceived affordance of clickability, though there are a few exceptions to these guidelines.

Guidelines for Visualizing Links, Jakob Nielsen (2004)

Although I do consider myself an expert in HCI, I am far from being a well-known one (and I am a long, long way from being ‘respected’, though that’s another story). Nevertheless, it came as quite a surprise that when I searched for the term ‘mystery link’ just today, expecting to be able to link to a relevant, informative page somewhere on the web, I was unable to find one; hence this explanation.

Is this a deliberate feature… or an overlooked flaw?

While creating this post, it occurred to me that this feature could be exploited by the unscrupulous to trap the unwary. Knowing that the default behaviour of post titles in some WordPress sites is to link to the current post, and that users, being familiar with that behaviour, might be less likely to check where the link goes before following it, this technique could be used nefariously to hijack traffic. (I’m willing to bet that the scammers I referred to in my post last week would love such a bait-and-switch tactic!)

Given that that’s a possibility, I think it’s quite likely that WordPress may make a change to prohibit manual addition of links to titles in the future. (I really don’t understand why it is that anchors are, currently, allowed, whereas other code is not.) See my very first caveat, at the top of this post: Things change.

Just in case you’re unfamiliar with links to content within pages, which I’ve used in this post several times; this is, again, standard HTML. WordPress refers to the technique as ‘page jumping‘ (which I actually think is a misnomer, as it suggests jumping between pages rather than within them). Unfortunately, these seem somewhat erratic; sometimes such links ‘jump’ to the correct block; other times, they jump to the block below the named one. I haven’t got to the bottom of that particular conundrum yet; it may be another example of the current bugginess of the ‘Gutenberg’ block editor and/or the WordPress environment (although I have seen this behaviour on other platforms in the past).

A footnote

§ I’ve been through Wikipedia’s extensive list of cognitive biases and haven’t been able to find an appropriate bias label; the nearest approximation is the ‘mere-exposure effect‘, but that’s not quite what I mean. I’m referring to (what appears to me, at least, to be) the tendency to overestimate others’ knowledge of something based upon one’s own familiarity with it.

About peNdantry

Phlyarologist (part-time) and pendant. Campaigner for action against anthropogenic global warming (AGW) and injustice in all its forms. Humanist, atheist, notoftenpist. Wannabe poet, writer and astronaut.
This entry was posted in ... wait, what?, Communication, Computers and Internet, Education, People, Phlyarology, Tech tips and tagged , , , , , . Bookmark the permalink.

31 Responses to Yes, it IS possible to embed hyperlinks in titles! (but there are caveats)

  1. darsword says:

    Very interesting. Maybe after cataract surgery my eyes won’t glaze over while trying to understand what you are trying to teach us. Meanwhile, just an FYI, and you may already know this, in my GMail on my phone, the title came through as an URL including the <a>. Maybe you intended that?

    I think I’ll reblog this to remind myself later. Thanks!

    Liked by 1 person

    • pendantry says:

      Is there any chance that you could take a screenshot of what you saw? I’m not clear on what you mean.

      BTW, I had to edit your comment to allow it to make sense, as the ‘<a>’ you’d included in the text was interpreted as the beginning of an anchor, making the remainder of your comment appear to be a hyperlink… to nowhere. I swear, technology will be the death of us all yet….

      PS Hope the cataract surgery is a resounding success!

      Liked by 1 person

  2. darsword says:

    Reblogged this on Darswords and commented:
    For future reference post cataract surgery…

    Liked by 1 person

    • pendantry says:

      Thanks very much for reblogging this, darsword. It’s really interesting (to me, at least) how your reblog appears (it’s not what I expected, at all). If nothing else, it confirms that the WordPress ‘reblog’ function is still badly broken!

      Liked by 1 person

      • darsword says:

        It used to work great. Oh, well. Sorry. I hope you did get traffic for it because I thought the blog was interesting.

        Liked by 1 person

        • pendantry says:

          Yes, I don’t use ‘reblog’ as much as I’d like to at present due to its irritating quirkiness. No need to apologise! (unless you’re Chief Bug Eradication Officer at WordPress, that is).

          Hope the cataract surgery is a resounding success. Both my mum and my dad had it, and it worked wonders for them.

          Liked by 1 person

  3. Catxman says:

    I had a lot of trouble memorizing the bracket a h ref equals formula in HTML to get things appear as I wanted them to show up. Naturally, I was piqued by your entry on hyperlinks.

    I got value out of it even though I’m not planning on using it any day soon. In my theme, Eschuteon, I get excellent-looking fade-in and underlines with the theme. So I’m happy as a ladybug in the tall grasses there …

    Keep up the good work.

    Liked by 1 person

    • pendantry says:

      As I explain in my post ‘How to embed links in comments‘ you only need to memorise fifteen characters to be able to create a standard hyperlink anchor:
      <a href=””></a>
      Granted, not a simple task. Try writing it out a hundred times; after that it’ll be like riding a bike.

      I like your site, Catxman; it’s quite thought-provoking. Thanks for providing a link to a page on it. Links are good (well, in the main).

      Like

  4. Wow. This was awesome! How do you even find these things out?!

    I will have to think about this. Since this is not a widely used technique, I’m afraid it would only confuse people (take them where they didn’t want to go). Or, they wouldn’t even notice. I know that’s probably how this would work on me.

    The reason why I came up with NROP, CW, HW, etc. was because I became aware of my audience. There were people who liked my NROP pieces but could not care less about CW and vice versa. The pinned post explaining the acronym was supposed to help. However, I realize that many read my posts through the WP Reader and might never get to the pinned post if they weren’t a part of my audience back when I first wrote it.

    Thank you for this idea. Now, can you find out how I can change colors in the title text? Then, I can use two different colors to separate the permalink from the hyperlink.

    Liked by 1 person

    • pendantry says:

      You’re absolutely right to be worried about the risk of ‘taking people where they didn’t want to go’ — that’s exactly why I made the extra link in the title of this post go to an internal link within the same page, one that wasn’t far from the title itself, so less likely to confuse.

      Unfortunately, there’s no way — as far as I’ve been able to determine — to change the colour of the text in the title. The WordPress system won’t even allow the <u> element (underline) in the title (that’s the first thing I tried to use to highlight the fact that the text in the title was a link). You can type the code into the title, but as soon as the focus moves elswhere, it gets stripped out, as does almost everything else I’ve tried.

      Having said that, I have discovered since writing this post last week, that a few other snippets of HTML are allowed. One of those things is the <abbr> (abbreviation) element — and you might want to consider using that instead of a link to help your readers. It’s simpler to apply than using a link, doesn’t risk taking the reader elsewhere, yet still adds value.

      To illustrate: the title of your post I used as a ‘case study’ here is:
      HW: Monday Motivation; Chase Your Dreams!

      If you were to change this to the following:
      <abbr title=”Hashtag Week”>HW</abbr>: Monday Motivation; Chase Your Dreams!

      … then (assuming a viewing environment that permits the user to ‘hover’ over text — which, as far as I’m aware, excludes dumbphones) the user would be presented with the text ‘Hashtag Week’ in a ‘tooltip‘ when the mouse hovers over the ‘HW’ in the post title.

      Like this:
      HW: Monday Motivation; Chase Your Dreams!

      (If you do decide to give that a try, I’d love to hear how you get on with it.)

      As for “How do I find these things out,” well, that’s a combination of years of experience messing with computer systems, seeing what others get right (and, all too often, wrong), and a smidgeon of what I like to think is ‘out-of-the-box thinking’.

      Sorry for the length of this response, but I hope you (and maybe others?) find it of interest.

      Liked by 1 person

  5. Ah, PS. I DO use categories. The acronyms are just for the reader to know right away what kind of post it is. I guess you can look at the associated tags but they are not as visible as the title it (in the Reader).

    Liked by 1 person

  6. P.S. 2. (Sorry for the spam, but… that’s just how fragmented my thinking is right now) You might want to add a category at the top of your page under which you would include all these tech tips. It would be easy for us to navigate to them in the future.

    Liked by 1 person

    • pendantry says:

      Fabulous idea, thank you! I’ve just spent a bit of time identifying the relevant posts, giving them all a ‘Tech tips’ category… and reorganising Wibble’s menu a bit to incorporate it.

      On the subject of the menu: I see on your site that your menu option ‘Categories’ is just a label, not a link. I spent far too long trying (and failing) to figure out how I could do the same here. I can’t see any way to add a menu option that’s not a link: I wanted a ‘Featured posts’ heading, but without having a page link (compare your ‘Categories’ and ‘Old posts‘ menu items; there’s no link on the former, but there is one on the latter). I guess it must be a theme-dependent feature (and ‘Twenty Ten’, my theme, doesn’t have that).

      Like

      • I really like your category edits. You cleaned it up a little, too. Looking good.

        Ahh… I remember having trouble figuring out how I did the categories, too. I will try to look into that because I would like to take the link out of ‘Old posts.’ I will keep you posted.

        Liked by 1 person

        • pendantry says:

          I hope you can give me some clues on how you managed to get the non-link ‘Categories’ label, it might help me to figure out how to do it here too. I’ve kind of tried a bit of ‘reverse psychology’ with the “Don’t click here!” (which is a link to a random post), I do kind of like that but I’d much prefer that to be a non-link label ‘Featured posts’, and add another menu item ‘Random post’ with the ?random link (as I used to have); that would give me a top level of six options — which, I think, is really the upper limit of choices one ought to present to the user. I was never happy with having more than that. Thanks for giving me the push I needed to rework that!

          Liked by 1 person

        • pendantry says:

          I just had a chat with a Happiness Engineer who was able to provide a solution — and I see that on your site it looks like you’ve done the same thing on your ‘Older posts’ option: ‘custom link’ menu item, URL: ‘#’, Link text ‘Menu label’. Sorted! (I still don’t understand how it is that your ‘Categories’ option clearly doesn’t have the ‘#’ thing, but, hey, best not to let ‘good enough’ not be, um, good enough, eh?)

          Liked by 1 person

          • DAMN IT! Now I’m pissed because I did email you that answer earlier ;) Took me a bit of time and effort but I figured it out.

            Liked by 1 person

          • pendantry says:

            Drat. Sorry I missed your email, I’ve just seen it. Thanks ever so much for getting back to me, I really appreciate it!

            Liked by 1 person

          • pendantry says:

            Please don’t be pissed… Looking at your site, I noticed that the menu items that expand have downward-pointing arrow symbols… my guess is that those are added automatically by your theme (but then again, maybe they’re not?). But they gave me an idea. I searched in ‘charmap’ (a standard Windows tool) for ‘down’, and it offered me the ‘Modifier Letter Down Arrowhead’ symbol: ‘▼’… so in those menu items where I had sub-items, I added a space and that symbol to the top level menu item. And I wouldn’t have thought of that without you.

            The Universe has been talking to me a lot, recently. I just visited a post on Revruss’s site, which features a phrase that’s very appropriate here:

            Companions lighten every load and heighten every celebration.

            Liked by 1 person

          • I’m not really pissed. Just had a rough day with multiple things just not going my way. Was just happy that for once I could help YOU and when I read that you already solved that problem… Well, yea. BUT! Thank you for raising this issue because that prompted me to fix my own menu! Yes, they are automatic on my theme (or at least I didn’t add them consciously). Your menu bar now looks top notch! And I like the random post that you get when you click on ‘don’t click here.’ Did you use the random raiders custom link for that?

            Great quote!

            Stay golden!

            Liked by 1 person

          • pendantry says:

            Yes, that menu option is a ‘custom link’ to https://pendantry.wordpress.com?random . I was going to label it honestly as ‘Random post’, but decided to go with the “Don’t click here!” instead; it tickles my funnybone.

            Hope that the ‘multiple things’ causing you troubles will soon be resolved.

            Liked by 1 person

  7. Margy says:

    I’ve thought a lot about making it easy to find older content – both for my readers and for me! Personally, I like Category and tag widgets and entry.meta because they automatically update if you change them. I’ve changed the wording for categories and tags a few times over the years!

    I used your idea for Random posts on my sidebar – a picture of a toilet with toilet paper roll eyes, etc and the caption: “Click to see Francis Ford Crapolla’s reading recommendations:”

    Liked by 1 person

I'd love to hear your thoughts...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s