Many visitors still print things from the web: recipes to use in the kitchen, invoices to file away, checklists to tick off by hand, worksheets for a class, and long guides to read away from a screen. A visible print button tells those readers that printing is welcome, and it saves them from hunting through a browser menu to find the print command. It is a small touch, and on the right kind of site it makes a real difference to how useful a page feels.
You do not need a plugin for this. A print button is three small pieces: a link that calls the browser print function, a shortcode so you can reuse the button, and a print stylesheet that hides the header, the sidebar, and the ads.
Do readers still need a print button when browsers have Ctrl+P?
Every modern browser can already print a page. On Windows the shortcut is Ctrl+P, on a Mac it is Cmd+P, and every browser menu has a Print item as well. So it is fair to ask whether a button adds anything at all. The answer depends on your readers. Many people do not know the shortcut exists, and on a phone or a tablet there is no keyboard shortcut at all. A button puts the action where the reader is already looking, right next to the content they want to print.
A print button also signals that the page is designed to print well. When a reader clicks it and gets a clean page with only the article on it, they trust the site more. This matters most on recipe blogs, invoice pages, travel checklists, study notes, and worksheets. If your site publishes that kind of content, a print button is worth the small effort. If your site is mostly short news posts that nobody would ever print, you can safely skip it.
How do I add a simple print link with window.print()?
The simplest method uses one line of HTML. The JavaScript function window.print() opens the browser print dialog, and you can call it from any link or button. Add a Custom HTML block to your post and paste in the link below. The return false part stops the browser from following the link, so the page stays where it is after the print dialog closes.
<a href="#" onclick="window.print(); return false;">Print this page</a>Save the post and test the link in a private browser window. Clicking it should open the print preview straight away. If nothing happens, check that no security plugin is stripping onclick attributes from post content. Some security plugins remove inline JavaScript, and if yours does, the shortcode method in the next section is the better route, because it keeps the JavaScript in PHP code rather than in the post content.
Place the button where a reader will naturally look for it. Near the top of a recipe, just above the ingredients list, works well. On a guide, a button at the top and another at the bottom covers both kinds of readers. Keep the text short and clear, so the reader knows exactly what will happen before they click. For more small touches that make a site easier to use, read our guide to add a back to top button in WordPress without a plugin.
How do I turn the print link into a reusable shortcode?
Pasting the same HTML into every post gets old fast, and changing the button later would mean editing every post one by one. A shortcode solves both problems. You define the button once in a small PHP snippet, then drop the shortcode into any post, page, or widget. The free Code Snippets plugin is the safest way to add PHP like this, because it keeps your code separate from your theme files and lets you switch the snippet off with one click.
Install Code Snippets from the plugin directory, then go to Snippets, then Add New. Paste in the code below, set the snippet to run only on the front end, and activate it. The function builds the same print link as before and gives it a CSS class so you can style it in the next step.
function vutg_print_button() {
return '<a class="vutg-print-button" href="#" onclick="window.print(); return false;">Print this page</a>';
}
add_shortcode( 'print_button', 'vutg_print_button' );Now type [print_button] anywhere in a post or a page and WordPress will replace it with the button when the page loads. Note that the square brackets in the code sample above are written as HTML entities, because WordPress would try to run a real shortcode inside post content. In your own editor, type the shortcode with normal square brackets. Test it on a draft post first. If the shortcode text shows on the page instead of a button, the snippet is not active, so check the Code Snippets list and switch it on.
How do I style the print button with CSS?
A plain text link works, but it does not look like a button, and many readers will scroll straight past it. A few lines of CSS turn it into a clear, clickable button that matches your site. Go to Appearance, then Customize, then Additional CSS, and paste in the rules below. They give the button padding, a blue background, white text, and gently rounded corners. Change the background colour to match your theme.
.vutg-print-button {
display: inline-block;
padding: 10px 18px;
background: #2563eb;
color: #ffffff;
border-radius: 6px;
text-decoration: none;
}
.vutg-print-button:hover {
background: #1d4ed8;
}Save the Customizer settings and refresh a post that contains the button. It should now look like a proper button rather than a plain link. Keep the button a sensible size on mobile too, because many readers print from a phone by sending the page to a wireless printer or saving it as a PDF.
One more detail matters: hide the button itself in the printed output. There is no point printing a button on a piece of paper, and it looks untidy. The print stylesheet in the next section takes care of that, along with the header, the sidebar, and the ads. If you run a longer article, a table of contents helps readers find their place before they print, and our guide to add a table of contents in WordPress without a plugin shows how to build one the same code first way.
How do I hide headers, sidebars, and ads when printing?
By default, a browser prints everything on the page: the site header, the navigation menu, the sidebar, the footer, the comment form, and every ad slot. A print stylesheet fixes this with a @media print block. Rules inside that block only apply when the page is printed, so your on screen design stays the same while the printed version becomes clean and focused.
Add the CSS below to the same Additional CSS area in the Customizer. It hides the header, the footer, the sidebar, the comments area, and any element with the ad-slot class, and it sets the printed text to a readable size in black. Class names vary from theme to theme, so open your site in Chrome, press F12, and use the Inspect tool to find the real class names your theme uses, then adjust the list to match.
@media print {
.site-header, .site-footer, .sidebar, .comments-area, .ad-slot, .vutg-print-button {
display: none !important;
}
body {
font-size: 12pt;
color: #000000;
}
}Always test with the print preview before you call the job done. In Chrome, press Ctrl+P and check that only the article content appears, that no navigation links or ads survived, and that the text is not cut off at the page edges. Repeat the check on a phone if your readers print from mobile. For the wider picture of how hosting and caching affect what your readers see, our web hosting guide explains how to compare hosts on speed and reliability.
How do I print only one section of a page?
Sometimes the whole page is not what the reader wants. On a recipe post, only the recipe card matters. In those cases you can print a single section and hide everything else. Wrap the section in a div with an id of print-area, using a Custom HTML block or your theme template, and add the CSS below to your print stylesheet. It hides every element on the page, then makes only the print area and its children visible again.
@media print {
body * {
visibility: hidden;
}
#print-area, #print-area * {
visibility: visible;
}
#print-area {
position: absolute;
left: 0;
top: 0;
}
}Test this carefully, because the visibility trick can behave oddly with fixed headers or sticky elements. If the printed result has a large blank gap at the top, a sticky header is usually the cause, and hiding it in the print stylesheet fixes it.
When should I use a print plugin instead?
The code first method in this guide covers most sites, and it keeps your site light, because no extra plugin is loaded on every page. If you want readers to download a PDF as well as print, a plugin can generate it for you. If you want a print button added automatically to every post and page without editing each one, a plugin saves a lot of repetitive work.
Print, PDF, Email by BestWebSoft is a popular free option that adds print and PDF buttons with placement settings. WP Print is a lighter alternative that focuses on printing only. Before you install either one, check when it was last updated and whether it is tested with your WordPress version, because an unmaintained plugin can break after a core update. Test it on a staging copy first if you can. The official plugin directory at WordPress.org lists the current version, the last update date, and user reviews for every plugin, so check those details before you commit.
Whichever route you choose, keep the goal in mind. A print button exists for the reader, not for the site owner. It should be easy to find, it should produce a clean page, and it should never print navigation, ads, or the button itself. Test the result on desktop and on mobile, ask a friend to try it without instructions, and fix whatever confuses them.
Frequently asked questions
Does WordPress have a built-in print button?
No. WordPress core has no print button feature, so you add one yourself with a small HTML link, a shortcode, or a plugin. The HTML link in this guide uses window.print(), a standard browser function that works in every modern browser without extra software.
Will window.print() work on mobile phones?
Yes. Tapping a button that calls window.print() opens the print or share sheet on both Android and iOS, where the reader can send the page to a wireless printer or save it as a PDF. Mobile readers have no keyboard shortcut, so a visible button is even more useful for them than on desktop.
Can I add a print button without touching any code?
Yes. Install a print plugin such as Print, PDF, Email by BestWebSoft or WP Print, and use its settings page to choose where the button appears. You will not need to write HTML, PHP, or CSS. The trade off is an extra plugin to maintain and less control over the exact print layout.
Why does my printed page still show ads and sidebars?
The print stylesheet is either missing or its selectors do not match your theme. Open your site with the browser Inspect tool, find the real class names for the header, sidebar, and ad slots, and add them to the @media print block. Then check the print preview again, and clear your caching plugin cache if the old stylesheet is still being served.
Last updated: November 2026.
