Thesis Tip #6 – Print Stylesheets

(This tutorial is specifically for the Thesis theme, but can be adapted to work with any Wordpress theme).

For a lot of websites, the browser isn’t the only medium through which the site will be viewed. If your visitors will be printing out your posts or pages (like my cooking client Harvest Eating), it’s essential to add a print stylesheet.

For everyone else, it’s just a good practice to have your site look well printed. Luckily, it’s pretty easy.

The custom.css file you use to design your Thesis site only defines styles for the web, so when you print those are already gone. The main thing we’ll use the print stylesheet for is hiding things we don’t want showing up, like the menu and sidebars.

Create the Print Stylesheet

Go into /themes/custom and create print.css.

Now you can start writing your print-specific styles. For everything you want hidden, add it to {display: none;}.  Here’s the print stylesheet I used for Harvest Eating:

.custom #submenu, .custom #header .left, .custom #header .right, .custom #header .menu, .custom #sharethis_0, .custom #print, .custom #tweetmeme_button, .custom .video, .custom #idc-container, .custom .prev_next, .custom #sidebars, .custom #footer-recipes, .custom #footer {display:none;}
.custom #print-logo {float: right;}

See this post by A List Apart for some great print stylesheet tips.

Add the Print Stylesheet to Thesis

Once your print stylesheet is done, stick this in custom_functions.php to add it to the site.


/* Print Stylesheet */
function print_stylesheet() {
echo '<link type="text/css" media="print" href="' . THESIS_CUSTOM_FOLDER . '/print.css" rel="stylesheet" />';
}
add_action('wp_head', 'print_stylesheet');


Print Logo

You’ll also notice I have a #print-logo at the bottom of my print stylesheet. We wanted the Harvest Eating logo to show up on any recipes that were printed out, but we didn’t want to use up the customer’s color ink on it. So I created a black-and-white version of the logo, added it to the top of the header, and hid it using the custom.css stylesheet. So when the page is printed (and so the custom.css stylesheet isn’t being used), it shows up.

In custom_functions.php:


/* Logo at top on printed page */
function print_logo() { ?>
<div id="print-logo"><img src="<?php bloginfo('template_url');?>/custom/images/logo-bw.jpg" /></div>
<?php }
add_action('thesis_hook_before_header','print_logo');


In custom.css

.custom #print-logo {display: none;}

Tagged as: thesis, thesis-tip, tutorial, wordpress

All Thesis Tips:

• Thesis Tip #15 – Custom Author Pages
• Thesis Tip #14 – Add Related Posts Before Comments Link
• Thesis Tip #13 – Using Gravatars in WordPress
• Thesis Tip #12 – Adding Custom Headers to Category Pages
• Thesis Tip #11 – Clickable Logo in Header
• Thesis Tip #10 – Filter Categories from Homepage
• Thesis Tip #9 – Custom Options Page
• Thesis Tip #8 – Change Next and Previous Post Text
• Thesis Tip #7 – Import and Export Your Design
• Thesis Tip #6 – Print Stylesheets
• Thesis Tip #5 – Featured Content Rotator
• Thesis Tip #4 – Adding Classes to Body
• Thesis Tip #3 – Multiple content areas
• Thesis Tip #2 – Additional Sidebars
• Thesis Tip #1 – Custom Images and Category Pages

Bill Erickson is a WordPress Consultant who builds custom websites using WordPress as a CMS and Thesis as a framework. He’s a cofounder and resident of The Creative Space, and a cofounder of the BIL Conference (the open analog to the TED Conference).