WordPress – optimizing the print version of a website with a print.css stylesheet

Anyone who has ever printed a website knows how miserable the printability of websites can be. WordPress websites are no different – unless you do something about it. By default, the theme’s stylesheet is set to media=”all”, so it applies to screens and printers alike. The browser’s print function, however, pays little attention to that. The print layout is usually still unusable. Here is how to bring some order to the chaos with just a few steps.

How does printing a website work?

Printing a website works much like output on screen. First the HTML code is generated, which contains the elements and content of a website. Then design attributes are assigned to these elements with the help of stylesheets, so that the finished website appears in the end.

You can control which media the stylesheets apply to, which makes different layouts possible for screen and print. That is useful for saving ink in the print version. In addition, “sizes” behave differently in print than on screen.

How do I add a print stylesheet?

If you search for “WordPress print” or similar terms, you will find a number of guides on how to optimize the print version of a WordPress website. Unfortunately, a “mistake” is often made in the very first step. To make the appearance of a website in print independent of the normal browser version, you have to include a special stylesheet file in the system. This stylesheet file then provides the look of all elements of the website for the print version.

Creating the print.css file

First you have to create a new file named “print.css” and move it into the theme folder of your WordPress installation.

Adding print.css to WordPress

Some articles say you should include the stylesheet in the header.php of the theme folder, in the <head> section of the website.

The code for that looks like this:

<link rel="stylesheet" type="text/css" href="print.css" media="print"/>

However, you should include stylesheets (.css files) and JavaScript (.js files) in the function.php via the wp_enqueue_style and wp_enqueue_script commands. This allows cache plugins, for example, to minify or combine these files.

So in the function.php you look for the place where the other stylesheets are included and simply add the print.css. We also extend the style.css entry so that it is only used for “screens”.

wp_enqueue_style( 'style', get_stylesheet_uri(), array() );

becomes:

wp_enqueue_style( 'style', get_stylesheet_uri(), array(), $theme_version, 'screen' );
wp_enqueue_style( 'print', get_stylesheet_directory_uri(). "/print.css", array(), $theme_version, 'print' );

Now the print.css file is automatically included in the <head> section of the website and is therefore loaded on every page view.

Contents of the print.css file

CSS offers a wide range of options for designing the print version of the website. It is worth highlighting that there are numerous print-specific properties you can use. You will find a detailed list in this very interesting article: https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/ .

Here, however, I do not want to go that deep into the subject, but to show how you can get good results with simpler means.

To get started, you should add this code to the print.css file:

/* Print Style Sheet */
@media print and (color) {
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
body { background:white; color:black; margin:0; width: 100%; }
/* ab hier eigenen Code einfügen */

}

Your own CSS code now depends on how the HTML structure of the theme is built.

You should give all elements that span the full width these CSS properties. The element with the class “container” is just an example here.

.container {
width: 100%;
margin: 0 auto;
padding: 0 0px;
}

Now you can simply hide all elements that should not appear in the print view.

header, footer,#scrollup {
display: none !important;
}

Of course you can also reverse this principle and deliberately add content for the print version of the page, which you then hide for the screen display in the style.css. To streamline the process a bit, you can create your own classes for this.

In the style.css:

.hide-on-screen {
display: none !important;
}

In the print.css:

.hide-on-print {
display: none !important;
}

Now you can simply assign this class to elements and thereby control their visibility on screen and in the print version.

Customizing your individual CSS code

To optimize the website’s CSS code for printing, you can theoretically just copy the relevant parts from the style.css file into the print.css and then modify the website’s appearance there. You can reduce font sizes and dimensions in general a bit, and remove unnecessary backgrounds. I cannot give more specific tips here without knowing the actual CSS code.

And what about plugins?

There are some plugins that promise to optimize the print version of the website. Unfortunately, I have not been able to test any of them yet. If I gain experience with one or another plugin in the future, I will update this article accordingly.