RevealTheme logo
Back to Blog

WordPress For Print Media Considerations

WordPress For Print Media Considerations
The RevealTheme Team

By

··3 min read

CSS print stylesheets format pages when users print them. The default print rendering is often poor; printed pages include navigation, ads, sidebars; the content is hard to read.

Print stylesheets fix this. Most sites don't bother; some uses justify the work.

What print stylesheets do

Hide navigation, sidebars, ads, comments, related posts. The print version focuses on the article content.

Adjust typography for print readability. Larger font for body text; appropriate line height.

Show URLs for links. Printed text loses link information; print stylesheets can add URLs in parentheses.

Optimize layout for paper proportions.

When print stylesheets matter

Recipe sites where users print recipes to use in the kitchen.

Reference sites where users print articles for offline use.

Coupon or printable content sites where the printed output is the value.

Educational sites where students may print materials.

When they don't matter

Most content sites where users don't print articles.

Application sites where the interaction is digital-only.

News sites where content is consumed online and discarded.

The implementation

Add a print media query to the theme's CSS:

@media print {
  .site-header, .site-footer, .sidebar, .comments { display: none; }
  body { font-size: 12pt; }
  a:after { content: " (" attr(href) ")"; }
}

The CSS applies only when the page is being printed. The screen rendering is unaffected.

The testing

Browser print preview shows the print rendering. Verify the output matches expectations.

Print preview is faster than actually printing for iteration.

The honest framing

Print stylesheets are a small detail that matters for specific use cases. Most sites can skip them; some sites benefit substantially.

For recipe sites, reference sites, educational sites: the print stylesheet is worth implementing.