{"id":7,"date":"2026-09-30T14:49:39","date_gmt":"2026-09-30T14:49:39","guid":{"rendered":"https:\/\/staging.codeally.dk\/?p=7"},"modified":"2026-09-30T14:49:39","modified_gmt":"2026-09-30T14:49:39","slug":"7","status":"publish","type":"post","link":"https:\/\/staging.codeally.dk\/?p=7","title":{"rendered":""},"content":{"rendered":"\n<h2 id=\"a-small-cue-for-links-that-leave-your-site\" class=\"wp-block-heading\">A small cue for links that leave your site<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">As a solo WordPress developer, I rely on open-source software and other people&#8217;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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">An icon can help signal where a link goes, but clear link text still matters.<\/p>\n<\/blockquote>\n\n\n\n<h2 id=\"how-it-works\" class=\"wp-block-heading\">How it works<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When WordPress renders post content, the plugin checks links and adds <code>rel=\"external\"<\/code> to links pointing to another host. It uses WordPress&#8217;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&#8217;s <code>data-type=\"link\"<\/code> attribute. Links wrapping an image or SVG are skipped.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body a:is([rel~=\"external\"], [target=\"_blank\"], [data-type=\"link\"]):not(:has(svg, img))::after {\n    content: \"\\2007\";\n    mask-image: var(--cdly-external-links-icon);\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">One thing I especially want testers to check: WordPress can put <code>data-type=\"link\"<\/code> 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.<\/p>\n\n\n\n<h2 id=\"a-lowrisk-way-to-try-it\" class=\"wp-block-heading\">A low-risk way to try it<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The important part: the plugin does not edit or save changes to your posts. It adds <code>rel=\"external\"<\/code> 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.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>No permanent changes to saved post content.<\/li>\n\n\n\n<li>No JavaScript or third-party library.<\/li>\n\n\n\n<li>A localized screen-reader label is provided for links marked <code>rel=\"external\"<\/code>.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"a-translated-announcement-for-screen-readers\" class=\"wp-block-heading\">A translated announcement for screen readers<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 <a href=\"https:\/\/www.w3.org\/\">W3C<\/a>, the announcement is along these lines:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Without the plugin: \u201cW3C \u2013 Link.\u201d<\/li>\n\n\n\n<li>With the plugin on an English site: \u201cW3C \u2013 External Link.\u201d<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">The label is translated through WordPress. On a Danish site, the same link can be announced as \u201cW3C \u2013 Eksternt link.\u201d The plugin includes a Danish translation, and the localized label is passed to assistive technology through the CSS generated content.<\/p>\n\n\n\n<h3 id=\"temporary-audio-sample\" class=\"wp-block-heading\">Temporary audio sample<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This player is a temporary placeholder using a small sample file from my boho child theme. I\u2019ll replace it with screen recordings of the Narrator announcements before publishing.<\/p>\n\n\n\n<figure class=\"wp-block-audio\"><audio controls=\"controls\" src=\"https:\/\/boho.oldrup.dev\/wp-content\/themes\/boho\/assets\/media\/simple-guitar-melody.ogg\" preload=\"none\"><\/audio><\/figure>\n\n\n\n<h2 id=\"a-note-about-the-editor\" class=\"wp-block-heading\">A note about the editor<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 id=\"a-few-things-to-know-before-testing\" class=\"wp-block-heading\">A few things to know before testing<\/h2>\n\n\n\n<div data-wp-context=\"{ &quot;autoclose&quot;: false, &quot;accordionItems&quot;: [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow\">\n\t\n\t<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-1&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n\t\t\n\t\t<h3 class=\"wp-block-accordion-heading has-icon has-icon-right\">\n\t\t\t<button aria-expanded=\"false\" aria-controls=\"accordion-item-1-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" id=\"accordion-item-1\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">Will it work with my site?<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button>\n\t\t<\/h3>\n\t\t\n\t\t\n\t\t<div aria-labelledby=\"accordion-item-1\" data-wp-bind--hidden=\"state.isHidden\" data-wp-on--beforematch=\"actions.handleBeforeMatch\" id=\"accordion-item-1-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow\">\n\t\t\t\n\t\t\t<p class=\"wp-block-paragraph\">The plugin is built for content made with the native WordPress Block Editor. Third-party page builders are not officially supported. It requires WordPress 6.9 or later and PHP 8.2 or later. It is designed for modern Chrome, Safari, and Firefox; the stylesheet uses modern CSS features.<\/p>\n\t\t\t\n\t\t<\/div>\n\t\t\n\t<\/div>\n\t\n\n\t\n\t<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-2&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n\t\t\n\t\t<h3 class=\"wp-block-accordion-heading has-icon has-icon-right\">\n\t\t\t<button aria-expanded=\"false\" aria-controls=\"accordion-item-2-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" id=\"accordion-item-2\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">What about links that open in a new tab?<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button>\n\t\t<\/h3>\n\t\t\n\t\t\n\t\t<div aria-labelledby=\"accordion-item-2\" data-wp-bind--hidden=\"state.isHidden\" data-wp-on--beforematch=\"actions.handleBeforeMatch\" id=\"accordion-item-2-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow\">\n\t\t\t\n\t\t\t<p class=\"wp-block-paragraph\">The stylesheet gives these links a visual indicator. The plugin does not add <code>rel=\"external\"<\/code> or its localized screen-reader label to them. Use your theme or page builder&#8217;s accessibility options if you need to explain that a link opens a new tab, and use new tabs sparingly.<\/p>\n\t\t\t\n\t\t<\/div>\n\t\t\n\t<\/div>\n\t\n\n\t\n\t<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-3&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n\t\t\n\t\t<h3 class=\"wp-block-accordion-heading has-icon has-icon-right\">\n\t\t\t<button aria-expanded=\"false\" aria-controls=\"accordion-item-3-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" id=\"accordion-item-3\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">Can I change the icon?<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button>\n\t\t<\/h3>\n\t\t\n\t\t\n\t\t<div aria-labelledby=\"accordion-item-3\" data-wp-bind--hidden=\"state.isHidden\" data-wp-on--beforematch=\"actions.handleBeforeMatch\" id=\"accordion-item-3-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow\">\n\t\t\t\n\t\t\t<p class=\"wp-block-paragraph\">Yes. There are two built-in icon shapes. You can choose the arrow icon for an individual block by adding <code>has-cdly-icon-arrow<\/code> under Additional CSS Class(es), or set the <code>--cdly-external-links-icon<\/code> CSS custom property in your theme or custom CSS.<\/p>\n\t\t\t\n\t\t<\/div>\n\t\t\n\t<\/div>\n\t\n<\/div>\n\n\n\n<h2 id=\"try-it-and-tell-me-what-you-find\" class=\"wp-block-heading\">Try it, and tell me what you find<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can get the plugin from the <a href=\"https:\/\/github.com\/oldrup\/codeally-external-links-icon\">Codeally External Links Icon GitHub repository<\/a>. 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 id=\"references-and-resources\" class=\"wp-block-heading\">References and resources<\/h2>\n\n\n\n<h3 id=\"link-purpose-and-clear-link-text\" class=\"wp-block-heading\">Link purpose and clear link text<\/h3>\n\n\n\n<h4 id=\"w3c-link-purpose-in-context\" class=\"wp-block-heading\"><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/link-purpose-in-context.html\">W3C: Link Purpose (In Context)<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">W3C explains why link text and its surrounding context should help people understand where a link will take them.<\/p>\n\n\n\n<h3 id=\"links-that-open-a-new-tab-or-window\" class=\"wp-block-heading\">Links that open a new tab or window<\/h3>\n\n\n\n<h4 id=\"w3c-g201-giving-users-advanced-warning-when-opening-a-new-window\" class=\"wp-block-heading\"><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Techniques\/general\/G201\">W3C: G201, Giving users advanced warning when opening a new window<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 id=\"wordpress-audio-block\" class=\"wp-block-heading\">WordPress Audio block<\/h3>\n\n\n\n<h4 id=\"wordpress-audio-block-2\" class=\"wp-block-heading\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/audio-block\/\">WordPress: Audio block<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress documentation for adding and configuring audio in a post or page.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>A small cue for links that leave your site As a solo WordPress developer, I rely on open-source software and other people&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/staging.codeally.dk\/index.php?rest_route=\/wp\/v2\/posts\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.codeally.dk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.codeally.dk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.codeally.dk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.codeally.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":1,"href":"https:\/\/staging.codeally.dk\/index.php?rest_route=\/wp\/v2\/posts\/7\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/staging.codeally.dk\/index.php?rest_route=\/wp\/v2\/posts\/7\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/staging.codeally.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.codeally.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.codeally.dk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}