CSS print

WordPress makes it easy to style your WordPress site with Themes, many of which are tested thoroughly on different computers and browsers before being released. These are designed for the screen. But what about having your WordPress site designed for print? Some people still like to print out web pages and read them at their leisure, so consider designing your WordPress site for print.

By default, when a user prints a WordPress web page that is not designed with printing in mind, the style sheet is stripped away and the page prints as if there is no style sheet. It tends to look like a long line of information beginning with your header, the content, then the long list that is your sidebar, then footer. Not very pretty.

To see what your WordPress site looks like for printing, print out a page or, from your browser's menu, choose Print > Print Preview. Not very pretty, is it? And fairly wasteful of paper having that long list of sidebar blogroll links printing out over two pages.

To make your site pretty to print, we need to focus on the architecture of the site, the structure that holds the content within each section. Luckily, WordPress Themes' modular file system tends to make this process much easier, since major structural areas are clearly designated.

The core structure for most WordPress sites is as follows, though the names may be different on your Theme.

#header #content #comments #sidebar (or #menu) #footer

You will find the styles for these sections in your style.css style sheet in your WordPress Theme folder.

How you change these sections in preparation for printing is up to you. You can still print the sidebar but not the footer, or include the footer but not the sidebar, change font styles and sizes, or even tell it to print images or not. We will give you some examples and the rest you can figure out on your own by experimenting.

Creating Print Styles

Styles associated with printing can be set in two different ways. If you want very simple changes to the site for easy printing, you can use the first method and add them directly to the style sheet. If you want to control the end result of your site when printed, it is best to keep these in their own print.css style sheet.

Note: Some WordPress Theme authors may have already thought ahead and included print styles for their Theme. Check the Theme folder for a print.css style sheet file and in the style.css for references to print before proceeding.