Skip to content

Instantly share code, notes, and snippets.

@NigelRodgers
Last active July 18, 2023 16:14
Show Gist options
  • Save NigelRodgers/174f81804acfcd746be88ca16fe22f37 to your computer and use it in GitHub Desktop.
Save NigelRodgers/174f81804acfcd746be88ca16fe22f37 to your computer and use it in GitHub Desktop.
Add a hyper link icon to subheadings in WordPress using .wp-block-heading class
jQuery.noConflict();
jQuery('.wp-block-heading').each(function() {
if (this.id) {
var button = jQuery('<div><button><img draggable="false" role="img" class="emoji" alt="????" src="https://s.w.org/images/core/emoji/14.0.0/svg/1f517.svg"></button></div>');
button.css({
'position': 'absolute',
'left': '-2rem'
});
button.find('button').css({
'background': 'none',
'border': 'none',
'font-size': '1rem'
});
jQuery(this).css('position', 'relative');
button.on('click', function() {
var temp = jQuery("<input>");
jQuery("body").append(temp);
temp.val(window.location.href.split('#')[0] + '#' + this.id).select();
document.execCommand("copy");
temp.remove();
jQuery(this).attr('title', 'Link copied!');
}.bind(this));
button.on('mouseout', function() {
jQuery(this).attr('title', 'Copy link to this section: ' + jQuery(this).text());
}.bind(this));
jQuery(this).attr('title', 'Copy link to this section: ' + jQuery(this).text());
jQuery(this).prepend(button);
}
});
@NigelRodgers
Copy link
Author

This only works if your theme uses the ".wp-block-heading" class

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment