Choosing What Gets Printed

We work out which part of your page is the article and print that, dropping navigation, sidebars and ads. When that choice is wrong, or nearly right, you can correct it by adding a class to your own markup.

Start by Checking Whether You Need This

Most sites need nothing here. Print a few of your own pages first. If the article comes through cleanly, leave it alone.

Reach for this when a specific block is missing every time, or when something you do not want keeps appearing. It is a per-element tool, not a setting.

Take Control Completely

Overrides the automatic choice. Once any element on the page carries this, only elements carrying it are printed.

Class	What it does
`print-only`	Print only the elements carrying this class, and nothing else. Add it to every sibling you want kept.

Keep Something We Would Have Dropped

Leaves our automatic choice in place and protects these elements from being cleaned away.

Class	What it does
`print-yes`	Keep this element in addition to whatever we selected on our own. For when most of the article is found but one block is dropped.
`print-header`	Kept and shown at the top. Usually a logo or banner.
`pf-footer`	Kept and shown after the article. Hide it on your own page with an inline style and it appears only in the printout.
`copyright`	Never dropped. Hide it on your page and it still appears in the print and the PDF.
`delete-no`	Never dropped, and readers cannot delete it with the Delete tool. Use it for a disclaimer or a credit line that has to survive.
`delete-off`	Does the same thing as delete-no. Either name works.
`print-footer`	Kept and shown after the article, like pf-footer. Either name works; older pages use this one.
`pf-content`	Marks your article wrapper so it survives the clean-up. The WordPress plugin puts this on your content for you.
`print-content`	Does the same thing as pf-content. Either name works; older pages use this one.
`pf-title`	Protects a title element from being cleaned away. It does NOT choose which element becomes the title.
`pf-author`	Protects a byline from being cleaned away. It does NOT set the author shown in the header.
`pf-date`	Protects a date from being cleaned away. It does NOT set the date shown in the header.

Drop Something We Would Have Kept

The opposite: leave the automatic choice alone, but exclude this.

Class	What it does
`print-no`	Leave this element, and everything inside it, out of the printout.

Control the Printed Layout

Where pages break, and keeping figures with their captions.

Class	What it does
`page-break-before`	Starts a new printed page before this element.
`page-break-after`	Starts a new printed page after this element. Useful to stop a tall image being split across two sheets.
`caption`	Keeps an image and its caption together so they are not separated by a page break.
`caption-text`	The caption text itself, inside a caption container.

Examples

Print only the recipe, nothing else on the page. Add print-only to every block you want. Anything without it is dropped, so remember the ones you take for granted.

<div class="print-only">
  <h1>Sourdough</h1>
  <p>Mix the starter…</p>
</div>

<div class="comments">Dropped, because print-only is in use.</div>

Nearly right, but one block is missing. Leave the automatic choice alone and rescue the one element.

<table class="print-yes">…nutrition information…</table>

One thing keeps appearing that you do not want.

<aside class="print-no">Subscribe to our newsletter</aside>

A copyright line on the printout but not on the page. Hidden elements are normally dropped, so this pair is deliberate: copyright survives the clean-up even while hidden on screen.

<p class="copyright" style="display:none">© 2026 Your Company</p>

Telling Us Where the Title, Author and Date Are

The pf-title, pf-author and pf-date classes do not do this

They keep those elements from being cleaned away, which is useful, but they do not choose which element becomes the title, the byline or the date. That is a different mechanism, below.

Designating them is done with CSS selectors on the settings tag, not with classes:

<printfriendly-options style="display:none;"
  data-selectors="titleSelector=h1.entry-title;authorSelector=.byline .name;dateSelector=time.published;">
</printfriendly-options>

The full list, including contentSelectors and removeSelectors, is on the settings reference. We usually hold these for a site on our side instead. If the article is being picked up wrongly across your whole site, send us a URL rather than working through them by hand.

On WordPress

The plugin offers the same thing as a setting. Its content selection choice decides how the article is found before any of the classes above are considered: using your theme's own content wrapper, using our detection, or using CSS selectors you supply.

Try the alternatives there first. The classes on this page work on WordPress too, but editing templates is more work than changing a setting.

Common Questions

I added print-only and now almost nothing prints#

That is what it does. The moment any element carries print-only, everything without it is excluded, including headings and images you assumed were part of the block.

Add it to every sibling you want, or use print-yes instead, which adds to the automatic choice rather than replacing it.

I added a class and nothing changed#

Check it reached the page. Many themes and page builders rewrite markup, so view source on the live page and confirm the class is actually there.

Then check caching, on your side and at your CDN. A cached copy from before the edit is the usual answer.

Classes go on your own site's HTML. Adding one in the PrintFriendly preview, after it opens, does nothing.

Does an element hidden with display:none still print?#

Normally no, which is usually what you want. The exception is the keep classes above: copyright and pf-footer are honored even while hidden, which is how a print-only copyright line or footer works.

For content hidden in tabs or accordions that you want printed, the Pro setting Show hidden content is the blunter but simpler answer. See Actions and Pro Features.

A tall image is split across two printed pages#

Force a break before it.

<img class="page-break-before" src="/tall-diagram.png" alt="">