Add a Print-Friendly Stylesheet

Applies to Version(s): Thesis 1

Cascading Style Sheets (CSS) drive visual presentation and formatting in modern web design. Creating a print-friendly stylesheet can make your posts and pages easier to read in print form.

To create a print.css file, and to reference it in Thesis, the basic steps are these:

Create a text file named print.css, upload that file to the Thesis /custom/images folder, and finally, call the CSS file into the document head.

To be useful, print.css accomplishes more than a default print action. Goals often include legible text, along with reduced clutter and fewer images. An example follows.

Important: this code does not go into custom.css — this is sample content for the new print.css file:

@import url("../../style.css") print;
@import url("../layout.css") print;
@import url("../custom.css") print;

.custom #sidebars { display:none; }
.custom #footer_area.full_width, .custom  #footer { display:none; }

The first three lines above simply request CSS formatting from your existing Thesis defaults: style.css, layout.css, and custom.css. The result generates a printed version of the site that is visually similar to the screen version.

The last two lines are optional, and these can be removed or expanded. However, their inclusion hints at the potential of print.css contents — in the above, this site’s sidebars and footer will not be printed.

Now that you have a print.css file, upload it to /custom/images and call it with the following in custom_functions.php:

function print_friendly_css_file() { ?>
  <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/custom/images/print.css" media="print">
<?php }

add_action('wp_head','print_friendly_css_file');

An alternative strategy would be to supply the absolute URL to print.css in the Thesis Site Options interface (under Document Head > Additional Scripts); however, the php function is more resilient to upgrades.