How to create a custom print stylesheet for Genesis

A few weeks ago, I was asked to give a short talk to the WordPress Edinburgh Meetup group. I went to print out my plugins for improving accessibility post that I based it on and horror of horrors, it came out at 16 pages, and the formatting was all over the place.

I thought that it was about time that I improved the print styling for my website, just in case I ever wanted to print anything out from it again, or anyone else did.

Print styling the easy way

As my site uses the Genesis framework, my first thought was to Google “print stylesheet for genesis”. I quickly discovered the Genesis Printstyle Plus plugin. This plugin adds a print stylesheet to a WordPress site running Genesis or a child theme. (I use the Beautiful Pro theme.) The stylesheet removes unwanted elements from print, including the navigation, sidebar and footer widgets. It also adds in the URLs to all links in the printed copy.

The plugin is really easy to use – just download, install and activate and you’re done.

I still ended up with a 12 page document, though. Certain things were printed out that I didn’t want such as the Related Posts section (part of Jetpack).  It felt unnecessary to print the URLs for the likes of the author, category and tag links.

My blog comments were excised in print, which I was a little disappointed about.

Last but not least, I did not like the big blank white space at the top of the page!

Making a custom print stylesheet for Genesis

I decided my best bet was to create my own print stylesheet, customised to my needs. Some of this is specific to my own site, some specific to Genesis and some relates to WordPress in general.

To create print style can be tricky. Chrome Developer Tools has a good emulator which was very helpful.

Set up the body CSS

This prepares the page for printing. I chose to use a 12pt font size for print, which is the minimum recommended by RNIB. You can of course choose to print pages at a larger text size in browsers such as Firefox and Internet Explorer.

body {
	background: none repeat scroll 0 0 white;
	color: black;
	margin: 0;
	float: none;
	font-size: 12pt;
}

Getting the logo to show

One problem I encountered was that I wanted my logo to show at the top. But it is actually a background image. This means that it would print if background colours and images were set to print, but otherwise it would leave the aforementioned blank space.

Since I couldn’t be sure that users would allow the background graphics printing option, I had to think of another way. I eventually decided to hide everything in the header area, and hit upon the idea of using the CSS content property with the :before pseudo element. What this does is to inject the logo URL into the page before the main area.

This was the code I used:

/* Show the logo before the content */
main.content:before {
	content: url(https://www.abrightclearweb.com/wp-content/uploads/2014/07/A-Bright-Clear-Web-Logo.jpg);
	display: block;
	margin-top: 65px;
}

Find out more about the content property in this CSS-Tricks article.

Widening the content area

By default in the theme the content is set to a 720px width. This looked a bit strange on the page with a missing sidebar, so I set the content to take up the full width of the page:

/*widen content out to 100%*/
main.content {
	width: 100%;
}

Printing link URLs

I also decided that I wanted the URLs to print out, but not in every location on the page. Another CSS Tricks article enabled me to print out URLs after links globally:

/*Put link URL after the link text*/
article.entry a:after {
	content:" (" attr(href) ") ";
	font-size:0.8em;
	font-weight:normal;
}

I then had to override this with a series of CSS rules so that certain other links wouldn’t print, particularly in the comments section. Here is one example:

/*No link URLs here*/
span.entry-comments-link a:after, span.entry-categories a:after, span.entry-tags a:after {
	content:"";
}

I also chose to underline links in the print stylesheet.

Avoiding split images

Another annoyance was images splitting over two pages. A Stack Overflow thread helped here:

• Print styles: How to ensure image doesn’t span a page break

The code is:

/*Avoid page breaks within images*/
img {
    page-break-before: auto; 
    page-break-after: auto; 
    page-break-inside: avoid; 
}

The page-break-inside: avoid; rule prevents images being split over two pages.

The final code

Here is the final print stylesheet:

@media print {
	body {
		background: none repeat scroll 0 0 white;
		color: black;
		margin: 0;
		float: none;
		font-size: 12pt;
	}
	
	/*Don't show navigation, social icons, search, breadcrumbs, edit link or title area*/
	.nav-primary, .hdr-social, #search-3, .sidebar, .breadcrumb, .post-edit-link, div.title-area {
		display: none;
	}
	
	/* Show the logo before the content */
	main.content:before {
		content: url(https://www.abrightclearweb.com/wp-content/uploads/2014/07/A-Bright-Clear-Web-Logo.jpg);
		display: block;
		margin-top: 65px;
	}
	
	/*Underline links*/
	body a {
		text-decoration: underline;
	}
	
	/*Reduce the space after each entry - particularly for Blog page*/
	body .entry,
											body .page.page-template-page_blog-php .entry {
		border-bottom: 1px dotted #ddd;
		padding-bottom: 0;
		padding-bottom: 0;
		margin-bottom: 10px;
		margin-bottom: 1rem;
	}
	
	/*Put link URL after the link text*/
	article.entry a:after {
		content: " (" attr(href) ") ";
		font-size: .8em;
		font-weight: normal;
	}
	
	/*No link URLs here*/
	span.entry-comments-link a:after, span.entry-categories a:after, span.entry-tags a:after {
		content: "";
	}
	
	a.entry-author-link:after {
		content: "" !important;
	}
	
	p.site-title a:after, a.comment-author-link:after, time.comment-time a:after {
		content: "";
	}
	
	.entry-comments, .entry-comments .comment, .entry-comments .comment-reply, .ping-list {
		margin-bottom: 10px !important;
		margin-bottom: 1rem !important;
	}
	
	a.comment-reply-link {
		display: none;
	}
	
	#simple-social-icons-2 {
		display: none;
	}
	
	/*move the content up*/
	.site-inner {
		margin-top: -17rem;
	}
	
	/*widen content out to 100%*/
	main.content {
		width: 100%;
	}
	
	/*Hide the header widget area*/
	aside.widget-area.header-widget-area {
		display: none;
	}
	
	/*Avoid page breaks within images*/
	img {
		page-break-before: auto;
		page-break-after: auto;
		page-break-inside: avoid;
	}
	
	/*Hide simple share buttons and the Leave a reply box*/
	div.ssba, div#respond {
		display: none;
	}
	
	/*Hide related posts*/
	div#jp-relatedposts {
		display: none !important;
	}
	
	/*Hide footer widgets, go to top link & after footer areas*/
	div.gototop, .footer-widgets, .after-footer-left, .after-footer-right {
		display: none;
	}
	
	div.creds {
		color: black;
	}
	
	/*No borders for footer*/
	footer.site-footer {
		border-top: none;
		border-bottom: none;
	}
	
	/*Blue link for footer*/
	footer.site-footer a {
		color: #0A5FAF;
	}
}

You can see the end result by print previewing in your browser. The number of pages printed is dependent on the browser you use, plus the print settings for that browser.

What do you think of the end result? Please let me know in the comments, or contact me.