How to add copy code button to all code blocks – Without Plugin ?

Step 1. Create a Child Theme

If you have not created a child theme yet then first create a child theme

Visit to know : How to create child theme in WordPress

If you have already created a child theme then ignore step 1.

Step2. Add following code to your child themes functions.php file

add_action('wp_footer', function() {
?>
<!-- Prism.js Core + Theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css">
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-php.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-css.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markup.min.js"></script>

<style>
/* Code block wrapper */
.code-block {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  font-family: "Fira Code", monospace;
}

/* Copy button */
.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #0073aa;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  opacity: 0.85;
  transition: all 0.2s ease;
  z-index: 10;
}
.copy-btn:hover {
  opacity: 1;
  background: #006199;
}
.copy-btn.copied {
  background: #4caf50 !important;
}

/* Optional – style scrollbars in dark mode */
pre::-webkit-scrollbar {
  height: 6px;
}
pre::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {

  function addCopyButtons() {
    document.querySelectorAll('pre code').forEach(codeBlock => {
      const pre = codeBlock.parentNode;
      if (pre.classList.contains('code-block')) return; // prevent duplicate

      pre.classList.add('code-block');
      const button = document.createElement('button');
      button.className = 'copy-btn';
      button.textContent = 'Copy';
      pre.appendChild(button);

      button.addEventListener('click', async () => {
        try {
          await navigator.clipboard.writeText(codeBlock.innerText);
          button.textContent = 'Copied!';
          button.classList.add('copied');
          setTimeout(() => {
            button.textContent = 'Copy';
            button.classList.remove('copied');
          }, 1500);
        } catch (err) {
          console.error('Failed to copy:', err);
        }
      });
    });

    // Run Prism highlight again for new blocks
    if (window.Prism) Prism.highlightAll();
  }

  // Run once
  addCopyButtons();

  // Watch for dynamically added code (AJAX, filters, etc.)
  const observer = new MutationObserver(() => addCopyButtons());
  observer.observe(document.body, { childList: true, subtree: true });

});
</script>
<?php
});