• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / WordPress / How to create a custom print stylesheet for Genesis

How to create a custom print stylesheet for Genesis

Posted: April 10, 2015 Updated: September 11, 2020 by Claire Brotherton
7 Comments

Improved print style for A Bright Clear Web

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.

No print style for a Bright Clear Web

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.

Genesis Printstyle Plus styling for categories, tags and footer

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(http://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.

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(http://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;
	}
}
Improved print style for A Bright Clear Web

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.

Related

Category: WordPress Tags: CSS, Genesis, plugin, print style

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Sarah Arrow says

    April 10, 2015 at 2:19 pm

    Thanks Claire, very handy πŸ™‚ I have a lot of clients on Genesis who will love this, so I’ve shared πŸ™‚

    Reply
  2. Claire Brotherton says

    April 10, 2015 at 9:50 pm

    Thanks Sarah, appreciated. πŸ™‚

    Reply
  3. Mickey Shimek says

    June 5, 2015 at 5:38 am

    Thanks for the tutorial. I am just beginning with Genesis, so it will take me some time to make the best use of the tutorial.

    Reply
    • Claire Brotherton says

      June 11, 2015 at 1:06 pm

      Glad it helped – using Genesis is a bit of a learning curve. πŸ™‚

      Reply
  4. Chad P. Howard says

    May 10, 2016 at 10:50 am

    Really informative tutorial but took me a bit of time to understand the things.

    Reply
  5. zach says

    January 8, 2018 at 5:55 pm

    Great article and exactly what I was looking for so thank you. Quick question, once the custom print CSS file has been added to the child theme’s root directory, is there any additional code required such as in the functions file to enable the custom print CSS file? In otherwords, is there anything else required besides just adding the custom print CSS file to the root directory? Thanks a bunch!

    Reply
    • Claire Brotherton says

      January 9, 2018 at 10:13 pm

      Hi Zach

      You could add your print CSS to a Genesis child theme’s style.css. I’ve added my print CSS to a file abcweb_style.css and enqueued it using this code:

      //* Add custom style sheet
      add_action( 'wp_enqueue_scripts', 'custom_load_custom_style_sheet' );
      function custom_load_custom_style_sheet() {
      wp_enqueue_style( 'custom-stylesheet', CHILD_URL . '/abcweb_style.css?v=3', array(), PARENT_THEME_VERSION );
      }

      You can read more about the wp_enqueue_style function here: https://developer.wordpress.org/reference/functions/wp_enqueue_style/

      There must be a reason why it has the version parameter, but I can’t recall why!

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map