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;}
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. 🙂
Bill Erickson says
I’m sending it to you as an email since it won’t post in the comments.
SM says
Thank you so much, Bill! Really appreciated! Now I’ll have to do it now. 🙂
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
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.
Bill Erickson says
Just go to Appearances > Widgets and drag the Tag Cloud widget to the sidebar.
—
Bill Erickson
WordPress Consultant
https://www.billerickson.net
Dominic Z. says
Sorry for late reply. Just wanted to say thank you for your answers.
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.
Bill Erickson says
Thanks for sharing!
—
Bill Erickson
WordPress Consultant
https://www.billerickson.net
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');