A small cue for links that leave your site

As a solo WordPress developer, I rely on open-source software and other people’s work every day. Sharing a useful little tool is one way I can give something back. I care especially about accessibility and a more sustainable web, so I wanted this plugin to solve one small problem without adding JavaScript or another dependency.

Codeally External Links Icon is now available for testing. It adds a visual cue to links, so visitors have a better chance of noticing when a link takes them somewhere else. You may already know that external links should be indicated, but not want to edit every link by hand. That is the job this plugin is meant to take care of.

An icon can help signal where a link goes, but clear link text still matters.

How it works

When WordPress renders post content, the plugin checks links and adds rel="external" to links pointing to another host. It uses WordPress’s built-in HTML tag processor, then CSS adds the icon. The selector below shows the links the stylesheet considers: links marked external, links that open in a new tab, and links carrying WordPress’s data-type="link" attribute. Links wrapping an image or SVG are skipped.

body a:is([rel~="external"], [target="_blank"], [data-type="link"]):not(:has(svg, img))::after {
    content: "\2007";
    mask-image: var(--cdly-external-links-icon);
}

One thing I especially want testers to check: WordPress can put data-type="link" on links in block content, including internal links. Because the CSS selector also matches that attribute, an internal link may get an icon too. Please let me know what you see with your theme and content.

A low-risk way to try it

The important part: the plugin does not edit or save changes to your posts. It adds rel="external" to the rendered output only. There are no database tables or options to clean up, so you can try it and deactivate it without having to undo changes to your content. As with any plugin, testing on a staging site first is sensible.

• No permanent changes to saved post content.
• No JavaScript or third-party library.
• A localized screen-reader label is provided for links marked rel="external".

A translated announcement for screen readers

The plugin also adds a localized screen-reader label using CSS, without inserting extra text into your link. For example, when Windows Narrator reaches a link to W3C, the announcement is along these lines:

1. Without the plugin: “W3C – Link.”
2. With the plugin on an English site: “W3C – External Link.”

The label is translated through WordPress. On a Danish site, the same link can be announced as “W3C – Eksternt link.” The plugin includes a Danish translation, and the localized label is passed to assistive technology through the CSS generated content.

Temporary audio sample

This player is a temporary placeholder using a small sample file from my boho child theme. I’ll replace it with screen recordings of the Narrator announcements before publishing.

A note about the editor

You will not see the icon while editing a post. That is intentional, not a bug: the plugin loads its stylesheet on the front end, where visitors see the page. Keeping the icon out of the editor avoids adding a separate editor implementation and keeps the code simpler and more robust.

A few things to know before testing

Try it, and tell me what you find

You can get the plugin from the Codeally External Links Icon GitHub repository. The current requirements are WordPress 6.9 or later and PHP 8.2 or later. A WordPress.org release may follow; first, I would like people to try it on real sites and help me make it better.

Feedback, bug reports, and accessibility observations are very welcome on GitHub. A useful report includes what you expected, what happened instead, your WordPress and PHP versions, and the theme or editor you use. In particular, let me know if internal links also get an icon on your site.

Open source works because people share what they learn. If this small plugin helps, or if you spot a way to make it more accessible, robust, or lightweight, I would be glad to hear from you.

References and resources

Link purpose and clear link text

W3C: Link Purpose (In Context)

W3C explains why link text and its surrounding context should help people understand where a link will take them.

Links that open a new tab or window

W3C: G201, Giving users advanced warning when opening a new window

This W3C technique explains why an unexpected new tab or window can be disorienting and gives examples of how to warn people in advance. It is advisory guidance, not a standalone WCAG requirement.

WordPress Audio block

WordPress: Audio block

WordPress documentation for adding and configuring audio in a post or page.