Print buttons, print stylesheets and printer-friendly pages
By Nasir Uddin Shamim ยท Founder, PrintxPDF
Short answer: Give readers a print button and a print stylesheet. The button is a plain HTML anchor or a button calling window.print(), placed near the article title. The stylesheet hides navigation, resets the layout to a single column, sets @page margins, controls page breaks and prints link URLs so the paper copy stands on its own.
Readers still print. Recipes go on the counter, itineraries go in a pocket, order confirmations go in a folder, and documentation goes next to the keyboard. Almost none of that is designed for: most sites ship no print stylesheet at all, so the nav bar takes the first sheet and the article arrives in fragments. These four guides cover the two halves of the fix, a button people can find, and a stylesheet that makes the button worth pressing.
Every guide in this topic
- How to add a print button to WordPress, Five ways to add a print or PDF button to WordPress: a plugin, a Custom HTML block, a shortcode, a theme filter and WooCommerce orders, with working code.
- How to write a print stylesheet that actually works, A working @media print stylesheet: hiding chrome, @page margins, break-inside and break-after, printing link URLs with attr(href), and six bugs that break it.
- How to make your website printer-friendly, Ten things publishers get wrong when readers print, how to test in print preview, and a checklist covering nav, dark mode, links, tables, images and QR codes.
- How to add a print or PDF button to any website, Copy-paste a print or PDF button into any site: a plain HTML anchor, a CSP-safe window.print() button, plus notes for Squarespace, Wix, Shopify and Webflow.