On the SnippetClub website, I wanted a way to quickly link to a certain heading in a tutorial that would scroll them to the correct point.
There are lots of methods out there to do this. I came across the plugin Add Anchor Links which worked fine.
However it didn’t have the ability to copy the url to your clipboard, so I decided to fork the code and add that.
Demo
1. Our anchor icon
Add the following function to functions.php or code snippet plugin.
This code adds the anchor link markup for our headings
/* * add_anchors * * @function Returns anchor link next to headings * @author Taylor Drayson * @since 14/02/2023 * @forked https://wordpress.org/plugins/add-anchor-links/ */ function tct_add_anchors($text) { // Search for headings levels 2-6. $pattern = '#<h([2-6])(?: [^>]+)?>(.+?)</h\1>#is'; preg_match_all($pattern, $text, $headlines, PREG_OFFSET_CAPTURE); $offset = 0; if ($headlines) { foreach ($headlines[2] as $match) { list($headline, $pos) = $match; if (strlen($headline)) { $anchor = \sanitize_title($headline); $icon = '<button onclick="copyAnchor(this)" data-tooltip="Copy link" data-anchor="'. get_permalink() .'#'. $anchor .'" aria-hidden="true" class="tct-anchor tooltip" id="'. $anchor .'"><svg aria-hidden="true" class="aal_svg" height="22" version="1.1" viewBox="0 0 16 16" width="22"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></button>'; $text = substr_replace($text, $icon, $offset + $pos, 0); // Insert after H tag. $offset += strlen($icon); } } } return $text; }Copy
2. Modifying our heading block
Next we need to call our tct_add_anchors function so that we can modify the heading block html markup.
<?php function tct_block_extensions($block_content, $block) { if ($block["blockName"] === "core/heading") { return tct_add_anchors($block_content); } return $block_content; } add_filter("render_block", "tct_block_extensions", 10, 2);Copy
3. Copying to clipboard
To copy the url to our clipboard, we need to use some javascript. The gets the [data-anchor] attribute and writes it to the clipboard.
function copyAnchor(el){ navigator.clipboard.writeText(el.getAttribute("data-anchor")); el.dataset.tooltip = 'Copied'; setTimeout(() => { el.dataset.tooltip = 'Copy link'; }, 3000); }Copy
4. Adding tooltip
I am using Kyle from The Admin Bar’s tutorial on creating tooltips with GenerateBlocks.
Note: Tooltip tutorial requires GenerateBlocks Pro.
This tutorial will still work without the tooltip, however the tooltip gives the user a little bit of help that clicking on the button copies the url to clipboard.