How To: Creating a Print Stylesheet in WordPress

Awhile ago I made a call out to the authors of Premium WordPress themes to start adding print stylesheets to all of their themes.   Some already do, but I believe in order to truly be premium quality, things like a print stylesheet and an author page should all be included.

While building a print stylesheet for a new blog I am setting up, I realized that I hadn’t written a post here explaining how to create a print stylesheet yet, so consider this to be that post.

What is a Print Stylesheet?

A print stylesheet is an alternate stylesheet that should only be used when someone attempts to print a page off of your blog.

How Does a Print Stylesheet Work?

A print stylesheet is a separate stylesheet that will override any designated style.css code when someone attempts to print a page off of your website.  If a print stylesheet is created correctly, people printing a webpage will not also print the unnecessary elements, such as the header, footer, and sidebars.

How do I Make a Print Stylesheet?

First thing you need to do create your print.css file. This can be done by taking a blank Notepad (or similar) file and naming it print.css.  You can also make a copy of your blog’s style.css file and rename it, then remove the code within the copy.

What Code Do I Put Into My Print Stylesheet?

Depending on your blogs theme, this step will either be pretty easy or incredibly difficult.  Basically, we don’t want things like your header or sidebars to appear in your print stylesheet, so you’ll want to setup your print stylesheet to remove these elements:

#header, #nav, #sidebar, #footer .noprint {display: none;}

Depending on your exact theme and how the div id’s are setup, what you put here will vary.  In other words, use the above as a guide, but customize it to match your theme.  You can also use this method to censor out images and other unwanted elements of your post pages (if applicable).  Also, if you have your contact information in your footer, you may want to leave the footer on your prints.

Next, you will want to expand your content section so that it looks decent when printed, instead of the content margins your standard style.css uses.  It will probably look something like the following:

#content {width: 100%; margin: 0; float: none;}

Now, to ensure that alternate colors are not picked up when printed, you’ll want to do something like the following to make sure it prints using black ink:

a:link, a:visited {color: #000000}

Because most people use white paper, this should make your printouts better looking.

How To Tell Your Theme to Use the Print Stylesheet

Once you’ve built and uploaded your print stylesheet, the next step is of course to tell your theme to use it when someone prints something!  This is probably the easiest step of all.  You’ll want to simply paste the following code into your themes header file (usually just below the standard style.css code):

<link type="text/css" media="print" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/print.css" />

So, there you go!  Hopefully if you’ve followed these steps, and uploaded your new print.css file to your WordPress blog’s theme, anything printed from your website will look much better.

Related Printing Posts:

  • Leave a Comment
  • Premium WordPress Themes: Where Are The Print Stylesheets?

    Although the premium WordPress theme market has only been around for a little over 6 months now, there have already been several trends that have shown up. Each time a new premium theme author steps forward, they innovate and push the other authors to keep up and continue to improve their existing themes. This is why many of the top authors are regularly updating their existing themes to keep up with the competition.

    In the end, the consumers are the ones that win, because they are getting better themes and a larger variety of themes to choose from when they go to make a purchase. So, what is the next trend we can expect with premium WordPress themes?

    One thing I would like to see, though it is actually very basic, is that each theme including a print stylesheet. This of course is a separate stylesheet that is used when someone goes to print a website page. For example, one of the sites I run publishes a lot of recipes (1-2 per day). I needed a good print stylesheet so our readers can print our pages and have them display the recipe correctly on the page.

    I’ll admit I’ve seen a couple premium themes that offer this, but a majority still do not. I personally believe the more you can do to make your theme appeal to more people, the more success a premium theme author will find. I believe a paying customer should expect things like multiple stylesheets available, multiple page and post layouts, an options panel. The more flexible it is, the better.

    Hopefully we’ll start to see more and more of the print stylesheet showing up in the coming months. In the meantime, what trends would you like to see with the next generation premium WordPress themes?

  • Leave a Comment