WordPress is a fantastic platform for you to write exciting content, efficiently manage the content and deliver it in a visually pleasing way through your theme choice without having any web design skills. Sometimes, your visitors will want to print your articles or save them as a PDF to view later or maybe create an offline archive which can be a problem.

Today, websites are built with being fully mobile responsive and have big bold fonts with highly detailed images which can prove challenging when trying to print web pages and easily becomes an incredibly frustrating user experience. By default, when printing web pages you’ll often find it will print every detail on the paper, such as the sidebar, related posts, adverts, etc or the text will become too small or too large, even areas of the page could become cropped or missing completely.

In this guide, we will show you how to add a Print This Page button into any WordPress Post or Page using a small piece of HTML code or using our self-created WordPress shortcode, style the print button and add printer-friendly styling code to the style.css file which will enable us to remove areas of the page we don’t want to be printed, such as, the sidebar, related posts, adverts.

As you can see from the image above we use this code on our own website. Give it a try!

Add Print Button with HTML

You can simply add a Print This Page button to any web page using the HTML and Javascript window print❨) method. This piece of code will select the contents of the current window and opens the Print Dialog Box, so you can select your preferred printing options.

<a class="print-page" href="javascript:window.print()">Print This Page</a>

Add Print Button with WordPress Shortcode

Instead of adding the HTML and Javascript print method on each post or page as above, we can create our own WordPress shortcode using the functions.php and then just add our shortcode into any WordPress Post or Page as needed. To create our shortcode, simply copy and paste the following code into your functions.php file:

// Add Print Button Shortcode
function vpsb_print_button_shortcode❨ $atts ){
return '<a class="print-page" href="javascript:window.print❨)">Print This Page</a>';
}
add_shortcode( 'vpsb_print_button', 'vpsb_print_button_shortcode' );

To add the Print This Page button into any WordPress Post or Page, you can simply just use the following shortcode in the WordPress visual or text editor:

[vpsb_print_button]

Now rather than entering the shortcode on every WordPress Post or Page you can add the shortcode directly into your WordPress theme files using the WordPress function do_shortcode(). To add the Print This Page button to your WordPress theme simply add the following code:

<?php echo do_shortcode("[vpsb_print_button]"); ?>

Style the Print Button with CSS

Whether you have chosen to use the HTML and Javascript or the WordPress shortcode methods you will now need to add some styling CSS code to the style.css file.

In both the methods above we have added the print-page class which you can use to style the Print Button as you want. The CSS code below will give you a guide in how to style the button, for example, the background colour is blue background-color: #428bca; on white text color: #f9f9f9; with a grey shadow box-shadow: 1px 1px 1.2px #555555;. When you hover over the button is will turn red background-color: #d9534f;. Simply copy and paste the following code into your style.css file:

/* Print Button */
.print-page {
    display:inline-block;
    margin-bottom: 15px;
    padding:10px 25px;
    line-height:1em;
    background-color: #428bca;
    color: #f9f9f9;
    font-size: 18px;
    font-family:"Lucida Grande", 'LucidaSansRegular', Arial, Helvetica, sans-serif;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    text-shadow: 1px 1px 1px #111;
    box-shadow: 1px 1px 1.2px #555555;
    -moz-box-shadow: 1px 1px 1.2px #555555;
    -webkit-box-shadow: 1px 1px 1.2px #555555;
    transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -0-transition: all 0.5s ease 0s;
}
.print-page:hover {
    background-color: #d9534f;
    color: #f9f9f9;
    text-decoration:none;
}

With the CSS styling example above added to your style.css file the Print Button will now look like the example below:

Style the Print Button with Font Awesome and CSS

If your theme already uses the Font Awesome icon library you can easily add an icon in front of your Print This Page button using the following HTML and Javascript or the WordPress shortcode method with the example CSS styling:

HTML and Javascript Method

<a class="print-page" href="javascript:window.print()"><i class="fas fa-print"></i> Print This Page</a>

WordPress shortcode Method

// Add Print Button Shortcode
function vpsb_print_button_shortcode( $atts ){
return '<a class="print-page" href="javascript:window.print()"><i class="fas fa-print"></i> Print This Page</a>';
}
add_shortcode( 'vpsb_print_button', 'vpsb_print_button_shortcode' );

CSS Styling

/* Print Button */
.print-page {
    display:inline-block;
    line-height:1em;
    color: #428bca;
    font-size: 18px;
    font-family:"Lucida Grande", 'LucidaSansRegular', Arial, Helvetica, sans-serif;
}

With the HTML and Javascript or the WordPress shortcode method added to your functions.phpfile and the example CSS styling added to your style.css file the Print Button will now look like the example below:

We would recommend that you test the Print This Page button to see if your theme already has printer-friendly styling built-in. If the print preview is showing elements such as the sidebar, related posts, adverts, etc then you will need to move to the section below to add printer-friendly styling to your style.css file.

Add Printer-Friendly CSS Styling

You have now added a Print This Page button to your WordPress Post or Page and successfully add the necessary styling CSS code to the style.css file. Now you will need to add printer-friendly CSS into style.css file to hide elements such as the sidebar, related posts from being printed.

Below you will see an example of the printer-friendly CSS styling.

/* Print Style Sheet */
@media print {
    body { background:white; color:black; margin:0; }
    #header { display:none; }
    #content { display:block; }
    #comments { display:none; }
    #sidebar { display:none; }
    #footer { display:block; }
}

Here you will need inspect your WordPress theme to find the relevant CSS Selectors such .class or #id that are used by your WordPress theme to display the various elements. One of the easiest way to inspect the elements of your WordPress website on-the-fly is by using the DevTools built directly into Google Chrome web browser. You can find more information about Chrome DevTools from the Google developers website.

WordPress has created an extensive article called Styling for Print, which shows the different elements you can include in the style.css specifically aimed at printing WordPress websites.

That’s it. You have now added a Print This Page button into your WordPress website using a either HTML and Javascript or the WordPress shortcode method. Successfully added your own style to the print button and added printer-friendly styling code to the style.css file to remove irrelevant areas of the page, such as the sidebar, related posts, adverts.