How to Add a Print Button to a WordPress Post or Page Without a Plugin

How to Add a Print Button to a WordPress Post or Page

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.

Print Button Example

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

Important

In this tutorial, we'll be directly editing WordPress theme files and we recommend that you create a child theme of your existing parent theme. By using a child theme you will be able to apply modifications without altering the parent theme files and ensuring any changes you make are kept following any parent theme updates.

Note

If you don't feel comfortable with editing the functions.php file directly, we would recommend you use the Code Snippets plugin. This plugin will enable you to easily add, manage and delete WordPress code snippets from your dashboard. To find out more about adding custom code snippets using a plugin see our tutorial How to Add Custom Code Snippets to WordPress with the Code Snippets Plugin for more information.

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.

Print Button Link

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:

Print Button Link CSS

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:

Print Button Link CSS Alternative

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; }
}

Note

As you can see in the example above we have used display:block; and display:none; attributes to control the displayed content. The display:block; attribute will include the section to print and the display:none; attribute will prevent the section from printing.

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.

How useful was this guide?

Click on a star to rate it!

Average rating / 5. Vote count:

Be the first to rate this guide.

We are sorry that this guide was not useful for you!

Help us to improve this guide!

Tell us how we can improve this guide?

By VPSBasics

This guide was written by the VPS Basics editorial team, led by Gilberto Van Roosen. They are a unique blend of people, dedicated to providing highly detailed, comprehensive and importantly easy to follow tutorials, written in plain English. They specialise in tutorials for managing Linux servers and its software.

6 Comments for How to Add a Print Button to a WordPress Post or Page Without a Plugin

I know nothing about php and almost nothing about css but i really need to make it work.
How would I go about making a small portion of a recipe post printable, without a plugin? I would like to make a block with the ingredients and directions and have a print recipe text above it?
Can I give a block a css class and make text print the block in that class with @media print {?

Hi Till

Yes you can make a css class e.g. CONTENT and then wrap the portion of the recipe inside this. Then using your child theme css file you can add the @media print section to exclude the sections you didn’t want printed e.g. if you didn’t want to print the #site-header and #site-footer you would add the following css to your print.css file – @media print { #site-header, #site-footer { display: none !important; } }.

Hope that helps.

Kind Regards
VPSBasics

Hi Terungwa

What are you wanting the “Save” button to achieve? Are you looking to for it to add to browser bookmarks or something else?

Kind Regards
VPSBasics

Hi VPSBasics;

I needed to add it to the woocommerce thank you page, to allow customers click to save as “PDF”. The thank you page has order barcodes that users would want to save. I could implement this myself if I say a guide.

Thank you.

Hi Terungwa

There is a plugin in the WordPress repository called WP Advanced PDF that could be useful for you, although it hasn’t been updated in a few years. There are also a couple of projects on GitHub called Print.js and jsPDF which could be used to implement a solution for your Woocommerce thank you page.

Hope that helps.

Kind Regards
VPSBasics

Join the Conversation

Note: Your email address will not be published when posting a comment.

Note: All comments are held for moderation and are reviewed by our editorial team prior to approval.

VPSBasics uses Akismet anti-spam filters to reduce spam across our website. Our website is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply. Learn how your data is processed.

More from VPSBasics

Newsletter

Keep up to date with all the latest guides, updates and news from VPSBasics by subscribing to our newsletter.