Genius is nothing but great effort applied. – Awa Kenzo

How To: Create a Print Friendly Thesis Website

I was thrown a curve ball this week when a new client asked that their site be print friendly. He said his clientele was older felt like they might print off his homepage which contains his phone number, hours, and a map. Of course I obliged, and found myself having a blast “blowing everything up” so it could fit on an 8×11 sheet of paper.

We will need to remove backgrounds, images, the navigation, and change the font from Pixels or EM to the print friendly “pt”.

Step 1: Create a new stylesheet called, “print.css” and upload it to /custom/


/*Reset Style*/
body.custom {
	margin: 0;
	padding: 0;
	line-height: 1.4em;
	word-spacing: 1px;
	letter-spacing: 0.2px;
	font: 12pt Arial, Helvetica, "Lucida Grande", serif;
	color: #000;
	background: none;
	border: none;
}
a, a:hover {
	color: #000;
	font-weight: bold;
}
#logo, #logo a {
	background: none;
	font-size: 20pt;
	font-weight: bold;
	text-decoration: none;
	margin: 0;
	padding: 0;
}
#tagline h1 {
	font-size: 16pt;
	font-weight: bold;
}
h1, h1 a {
	font-size: 16pt;
	font-weight: bold;
}
h2, h2 a {
	font-size: 14pt;
	font-weight: bold;
}
h3, h3 a {
	font-size: 12pt;
	font-weight: bold;
}
h4, h4 a {
	font-size: 10pt;
	font-weight: bold;
}
/*Move Element*/
#content {
	float: left;
}
#sidebars {
	float: right;
}
/*Remove Element*/
.menu {
	display:none;
}
#sidebars ul li {
	list-style: none;
}
#multimedia_box {
	display:none;
}
#footer {
	background: none;
}

Step 2: Link up the Stylesheet using custom_functions.php


// Print Friendly CSS
function print_css() {
?>
<link rel="stylesheet" href="http://cdn.gregrickaby.com/wp-content/themes/thesis_16/custom/print.css.gzip" type="text/css" media="print" />
<?php }
add_action('wp_head','print_css');

Just FYI – If you need to create an Internet Explorer friendly print.css (and you probably will) then use instead the code below on custom_functions.php


// Print Friendly CSS
function print_css() {
?>
<!--[if IE]?>
<link rel="stylesheet" href="http://cdn.gregrickaby.com/wp-content/themes/thesis_16/custom/ie-print.css.gzip" type="text/css" media="print"?>
<![endif]--?>
<link rel="stylesheet" href="http://cdn.gregrickaby.com/wp-content/themes/thesis_16/custom/print.css.gzip" type="text/css" media="print" />
<?php }
add_action('wp_head','print_css');

Step 3: Check your work

Using any major browser: File –> Print Preview

how-to-create-print-friendly-css-thesis

OR

Using the Web Developer Toolbar for Firefox: CSS –> Display CSS By Media Type –> Print

how-to-create-print-friendly-css-thesis-2

Greg Rickaby runs on the Genesis Framework

Genesis Framework

The theme you're viewing is the eleven40 Child Theme, which was built on Genesis.

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

Comments

  1. 1
    mfarney :

    If I take all the tutorials from this site I'm pretty sure I'll manage to build a very nice site for myself with all the functions I need. If you'd only have the time to make a tutorial about getting all the forms and functions together for those people who don't have programming skills.
    ________________
    Mathew Farney – Web Hosting

  2. 2
    Avinash D'Souza :

    Greg,

    This is so so awesome! This is precisely what I was looking for…

    Would this also work at post level or only at page level?

  3. 3

    @Avinash: The code above will add the print.css style sheet header to every page on a Thesis site: Home, posts, archives, etc.

    If you want to customize it for different pages, you can do it either via CSS, applying styles to elements found only on, say, the Category archives page; or, you can add an if statement to the print_css() function, e.g.:

    if( is_page(‘about’) ) { // About page
    // echo print style sheet specific to the About page
    }
    elseif( is_home() ) { // Blog front page
    // echo Home page print style sheet
    }
    elseif( is_single() ) { // Blog posting pages
    // echo print style sheet for posts
    }
    else {
    // Default print style sheet
    }

    Unless your needs are _very_ unusual, you should be able to do everything you want in one style sheet, by adding multiple styles.

  4. 4

    Rather than hard-coding the path to the print style sheet, I would recommend using one of the Thesis constants that are available, e.g.:

    echo ”;

    That way when you upgrade to Thesis 1.7 (or 2.0, etc.), you won’t need to edit your code. This is especially important for a feature like a print style sheet, which you won’t notice if it’s not working just by reloading your site.

  5. 5

    Let’s try that again, with escaped code:

    echo ‘<link rel=”stylesheet” href=”‘ . THESIS_CUSTOM_FOLDER . ‘/print.css” type=”text/css” media=”print” />’;

Trackbacks

  1. [...] to Add a 3rd Sidebar to your Thesis Theme 10. How to Create a Custom page Template in Thesis 11. How to create a Print friendly Thesis Website 12. The Times v1.1 – Thesis Skin 13. How to Add/Remove Thesis Elements 14. Thesis Skins [...]

Leave a Comment

Comment Policy: Thanks for visiting my site! Comments are a permanent record of who you are and what you stand for. Your words are your own, so be nice and helpful if you can. Unhelpful, disrespectful, or spammy comments will be deleted. All comments are read and appreciated, and if you have a question, I will try to respond within a couple days.

*