How to add a print or PDF button to any website

A print button is one HTML element. Every plugin, widget and paid service on this subject is packaging around that element. Below are the two versions worth using, when each applies, and where to paste them in the platforms that make it awkward.

Decide what the button should do first

If you have not written print CSS, the second option is strictly better today and you can add the first later. If your page is behind a login, the second option cannot work at all: a cleaner fetching that URL gets the sign-in screen, not the order.

Version 1: the plain anchor

No framework, no build step, no dependency. It degrades gracefully: with JavaScript disabled it still opens the cleaner, just without the current URL prefilled.

<!-- Printer-friendly link. Paste anywhere HTML is allowed. -->
<a class="pxp-print"
   href="https://printxpdf.com/print?url="
   onclick="this.href='https://printxpdf.com/print?url='+encodeURIComponent(location.href)"
   target="_blank" rel="noopener">&#9113; Print / PDF</a>

<style>
.pxp-print{display:inline-flex;align-items:center;gap:.5rem;padding:10px 18px;
  font:700 14px/1 system-ui,-apple-system,sans-serif;letter-spacing:.03em;
  text-decoration:none;color:inherit;border:2px solid currentColor;border-radius:6px}
.pxp-print:hover{background:currentColor;color:#fff}
@media print{.pxp-print{display:none !important}}
</style>

encodeURIComponent is the part people leave out, and it is why buttons break on pages with query strings or accented characters in the path. The @media print rule at the bottom is the part everyone leaves out, and it is why printed pages have a "Print" button printed on them.

Version 2: window.print(), CSP-safe

If your site sends a strict Content-Security-Policy header, an inline onclick will be blocked and the button will silently do nothing. Attach a listener instead. Use a real <button type="button">, not an anchor with a javascript: href: buttons are keyboard-operable and announced correctly by screen readers, and type="button" stops it submitting a surrounding form.

<button type="button" class="pxp-print" data-print-page>
  &#9113; Print this page
</button>

<script>
  document.querySelectorAll('[data-print-page]').forEach(function (btn) {
    btn.addEventListener('click', function () {
      window.print();
    });
  });

  // Optional: expand collapsed sections before the dialog paints
  window.addEventListener('beforeprint', function () {
    document.querySelectorAll('details').forEach(function (d) { d.open = true; });
  });
</script>

To open the cleaner from a button instead of an anchor, swap the click handler for window.open('https://printxpdf.com/print?url=' + encodeURIComponent(location.href), '_blank', 'noopener').

Where to paste it, platform by platform

The Wix case is worth spelling out because it wastes a lot of afternoons. Wix HTML embeds run inside an iframe on a different origin. Calling window.print() there prints the iframe, which contains nothing but your button, and parent.print() is blocked by the same-origin policy. The anchor, which simply navigates a new tab, is unaffected.

Putting it in place

1. Pick the behaviourCleaner link for public pages with no print CSS. window.print() for login-gated pages, or for public pages where you have already written and tested a stylesheet.
2. Paste it into the template, not the pageOne edit in a layout beats fifty edits in fifty posts. On a hosted CMS, use a synced pattern, a reusable block or a saved section so there is still one source of truth.
3. Place it where the decision happensNear the title for recipes, tickets and receipts. At the end as well for long articles, which is where a reader decides the piece is worth keeping.
4. Hide it on paperAdd @media print { .pxp-print { display: none !important } }. Do this now, because you will not notice it until a reader mentions it.
5. Check the keyboard and the screen readerTab to it, press Enter, and confirm it announces as a link or a button with a real name. type="button" on buttons, rel="noopener" on anchors with target="_blank".
6. Print the result and read itDo not ship on the strength of the preview thumbnail. Print one page, or save it as a PDF and read it at full size.

Generate one instead of writing it

If you would rather pick a colour, size and label than edit CSS, the button builder produces the same markup with inline styles, ready to paste into any CMS. On WordPress specifically, the plugin, block and shortcode routes cover the options in more detail, and the WordPress plugin page has the one-click version.

A button without a stylesheet is only half a feature. When you have the button in place, spend an afternoon on a print stylesheet and run the printer-friendly checklist over your main templates.

Frequently asked questions