Temporarily Disable a Link

We are not always fortunate with the order in which we publish pages and blog posts.

Occasionally a post must be published prior to others in the series as it’s information has become more immediate and required reading.

Perhaps you are creating a series of articles on a theme. To provide a customer with information on a topic, one of the sub articles requires publishing ahead of schedule.

The article has references with links to other posts in the series.

Consequently the links which you wish to use won’t be ready in time.

Can you complete your page or post content, including your links, but not make them clickable for now?

When the blocking posts and/or pages are completed the fast tracked one can be revisited and the links activated.

I was writing a blog post which linked to another, also only partially written. But, I found I needed to publish the one with the link first. It had some information which I wished to make available to a customer.

Once you publish the page along with the broken links visitors to your website will be taken to a 404 page.

What can you do?

  • If you remove the link, will you know the URL to be put back in place when the page becomes available?
  • Can the link be disabled, but left in place, then at a date in the future the link be edited to enable it?

If the link is across some words, rather than a specific mention of the referenced website page, we can leave the link reference in place but disable its action.

Consider whether you wish the disabled link to be effective, illustrating its presence with colour and underlines.

Effectively we want to keep the link in place whilst waiting for its referenced page to come live, but in the interim to disable the link in the short term.

Options which you may wish to consider are

Add an onclick to the link

<a href=”link URL” onclick=”return false;”>link text</a>

This is the easiest to implement – all we’ve added is onclick=”return false;”

To make the change flip the editor into code view and add the extra text.

Don’t forget to save the content before making this change and test afterwards. A mismatch of quotes and the greater and less than signs can have unexpected effects.

Server code

If you are going to wrap or amend the reference in server side code then why not leave the reference hidden as a comment and use the plain text?

This method requires the access to server pages. If you are creating a new website theme and choosing to omit a common reference this will work.

But if you are working from the page editor of a CMS website, such as WordPress, this won’t be an option to consider.

It also has the advantage that you could add a test with a time limit to switch the presentation.

HTML comments

If the link is to be presented on its own on a line this idea is feasible.

HTML allows comments in its code

<!– commented text –>

As can be seen the text comment is wrapped using the greater and less than symbols, together with dashes and an exclamation mark on the opening side.

So for our simple link we could do the same

Here’s the text link with the comments in place.

Further information about <!– <a href=”/carrot-growing” > –>carrot growing<!– </a> –> was given in this post.

I suggest that this is feasible on a single line but within a larger paragraph of text burying the comment for later is less clear.

Of course the whole paragraph could be duplicated and wrapped with comment tags.