How to Create a Print-Friendly Stylesheet for Your WordPress Site

This guide will walk you through the essential steps of crafting a print-friendly stylesheet for your WordPress website. A well-designed print stylesheet ensures that when users print pages from your website, the output is polished and easy to read. Let’s explore the basics of CSS media queries, creating a dedicated print stylesheet, optimizing for a smooth transition from digital to print format, and seamlessly integrating it into your WordPress child theme.

Before proceeding with any customizations in WordPress, it’s essential to set up a child theme. A child theme acts as a safe and efficient way to make modifications without affecting the parent theme. If you haven’t set up a child theme yet, follow this tutorial on How to Create a Child Theme for Customization. It will guide you through the process and ensure that your customizations remain intact even after theme updates.

Setting Up a Print Stylesheet

Start by recognizing the importance of having a separate CSS file for print styles. This focused approach allows you to style print content without affecting the way it looks digitally.

Create a New CSS Folder:

  • In your child theme folder, create a new folder named css.
  • Inside the css folder, make a new CSS file, for instance, print.css.
  • Upload this file to your child theme css directory.

Link the Print Stylesheet:

  • Open your child theme’s functions.php file.
  • Use hooks to enqueue the print stylesheet. Add this code:
function enqueue_print_stylesheet() {
	wp_enqueue_style( 'print-stylesheet', get_stylesheet_directory_uri() . '/css/print.css', array(), false, 'print' );
}

add_action( 'wp_enqueue_scripts', 'enqueue_print_stylesheet' );
Code language: PHP (php)

This code enqueues the print stylesheet and ensures it’s used only for print media.

Optimizing Content for Print

Make it convenient for users by hiding unnecessary elements meant for digital viewing, such as navigation menus and sidebars.

/* Hide navigation and sidebars for print */
@media print {
	nav,
	aside {
		display: none;
	}
}

Code language: CSS (css)

Adjust font sizes and spacing to make your content more readable when printed.

/* Adjust font sizes and spacing for better print readability */
@media print {
	body {
		font-size: 12pt;
		line-height: 1.5;
	}
}
Code language: CSS (css)

Testing and Adjusting

Thoroughly test your print stylesheet using the print preview feature in your browser. This step helps identify issues, allowing you to fine-tune styles based on testing results.

Testing Print Styles:

  • Visit any page on your WordPress child theme.
  • Utilize the browser’s print preview feature to see how the page will look when printed.

Adjusting Based on Testing:

  • Make necessary adjustments to your print stylesheet in print.css based on testing results.
  • Fine-tune styles to ensure optimal print readability.

Enhanced Print.css Example (optional)

Feel free to copy and paste the following enhanced print.css example into your print.css file and add or remove any CSS to make sure it works well with your website:

/* Reset styles for printing */
@media print {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	body {
		margin: 0;
		color: #333;
		background-color: #fff;
		font-family: Arial, sans-serif;
		font-size: 12pt;
		line-height: 1.5;
	}

	a,
	a:visited {
		color: #0066cc;
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: "";
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group;
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
		height: auto !important;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}

	select {
		background-color: #fff !important;
	}

	/* Remove elements not suitable for print */
	header,
	footer,
	.sidebar {
		display: none;
	}

	/* Hide navigation and sidebars for print */
	nav,
	aside {
		display: none;
	}

	/* Define font styles for headings */
	h1,
	h2,
	h3 {
		font-family: "Times New Roman", serif;
		font-weight: normal;
		page-break-after: avoid;
	}

	/* Improve list styling */
	ul,
	ol {
		list-style-position: inside;
	}

	/* Adjust font sizes and spacing for better print readability */
	body {
		font-size: 12pt;
		line-height: 1.5;
	}

	/* Add page numbers */
	@page {
		margin: 2cm;
		counter-increment: page;
		content: "Page " counter(page);
		size: A4 landscape; /* Adjust for larger screens */
	}
}

Code language: PHP (php)

This consolidated print.css file includes improved image printing, page numbers, removal of unnecessary elements, adjusted font styles for headings, improved list styling, and more. Feel free to customize it further based on your specific needs.

That’s it! You’ve successfully crafted a print-friendly stylesheet for your WordPress child theme, ensuring that users can print pages with a visually appealing and readable output. This improvement not only enhances the user experience but also reflects positively on your child theme’s professionalism.

Now, users can confidently print pages from your WordPress child theme, knowing that the printed output will be well-designed and optimized for readability.

Leave your feedback and help us improve ๐Ÿถ

We hope you found this article helpful! If you have any questions, feedback, or spot any errors, please let us know in the comments. Your input is valuable and helps us improve. If you liked this article, please consider sharing it with others. And if you really enjoyed it, you can show your support by buying us a cup of coffee โ˜•๏ธ or donating via PayPal ๐Ÿ’ฐ.

More free knowledge, because why not?

Your thoughts matter, leave a reply ๐Ÿ’ฌ

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