Print Stylesheets

This post has been marked as old. The code might no longer work. Comments have been disabled as this is no longer maintained. Use the search on the right to find a newer tutorial.

(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;}

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments are closed. Continue the conversation with me on Twitter: @billerickson

Comments

  1. Lars Tong Strömberg says

    How have you fixed the "print this page" links at the articles at Harvest Eating? Just below the "Share this" buttons on each page?

    • Bill says

      I added the following code to my custom_functions.php file:

      if (window.print) {
      document.write(' '
      + '');
      }
      // End -->


      Just put that inside a function and use a hook to place it where you like.

      • SM says

        Hi Bill, can you please give a bit more specific code here if I want to fix “Print this Page” link just exactly as Harvest Eating site? I’m a newbie in PHP things so I’m not sure how to finished the above code. Your help will be grateful! Thank you. 🙂

  2. Corp Warrior says

    It's definitely there. It probably can't be seen because of security settings. Try right click and 'save as' and then open it in notepad and you will see the content of the file.

    • Bill Erickson says

      I get \”File Not Found\” when I try to download it.

      If it is there, there's a good chance that the security settings that won't let me see it are what's causing it not to work. If I can't download it, your vistors' browsers can't download it.


      Bill Erickson
      WordPress Consultant
      https://www.billerickson.net

      • Corp Warrior says

        Hmm. That's weird, when I right click on this link:
        http://www.corpwarrior.com/wp-content/themes/thes
        and choose "Save As" I can download it without any problems.
        About the security settings, I jut mentioned them as an idea, I don't really know the real reason.

        BTW. Does the option "Subscribe to Replies" on your site works properly? I'm asking only because I haven't got any mail about reply being made on this comment although I had subscribed to the replies. I saw your reply accidentally. I thought you never answered.
        Tnx.

        • Bill Erickson says

          When I right click and try to save that, it saves the 404 page. I don't know what's causing it, but it's not a problem I've seen before. I'd talk to your host about it.

          I'd assume Subscribe to Replies works, but I've never used it before so I can't confirm. If it doesn't work I can contact Intense Debate (the developers of the commenting system) and see what the problem is.

          Thanks


          Bill Erickson
          WordPress Consultant
          https://www.billerickson.net

  3. Corporate Warrior says

    Maybe I need to change the permission rights on some of the folders and files (CHMOD them), will look into it.
    About the reply system, it's really great, I just installed it on my blog. I'm not sure if I confirmed the subscription, so maybe it's even working just fine.
    I would like to ask you just one more question. I hope I'm not too pushy, but I'm kind of a new to blogging and don't know all the tricks yet. 🙂
    How can I add the tags on sidebar, but that they look like on this site for example: tags like on these two sites for example: hxxp://thetechedition.com/ , hxxp://dmzwarez.info/
    I installed some plugins (simpletag or something like that) and I tried with others as well but can't seem to get it too look similar. And I've seen dozens of blogs using nice similar tags.

  4. Jen Leheny says

    Thanks for this – I have it working on my site now. Of course, I had to change the print.css to make it fit with my site (and I didn't worry about the print logo) but it was a great help to read what you have done. With info from another site ( http://www.aldosoft.com/blog/2009/11/applying-thesis-sty... ) I added these 3 lines to print.css before the display:none part.

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

    This keeps the text styling and so on of your page. The printed page looks much better with this bit added in so I thought you and your readers might like to know about it.

  5. Steve Barker says

    Hello Bill,
    I have recently purchased Thesis and using it for a web site but having trouble with the printing. I need all pages to print exactly as they are viewed on screen. Is there a simply way to achieve that with some kind of “print all” command?

    • Bill Erickson says

      Instead of creating a print stylesheet, try using the custom.css as your print stylesheet too.

      /* Print Stylesheet */
      function print_stylesheet() {
      echo '';
      }
      add_action('wp_head', 'print_stylesheet');