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

I wanted to add a print button to a client’s WordPress based website for a payment receipt page.  There are many instances you may want to add a print button – even though all popular browsers have a simple Print command built right in for any web page.

I started by trying out the various WordPress plugins but they either did not print properly or they included advertising to the end-user once they print – which would be unacceptable in my case.

So I just created one myself and thought to share this with you, to make your life easier as well.

It is simple enough to add a link with some javascript:

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

You will need to add that to your text editor when it is in “Text” mode rather than “Visual” mode.

It doesn’t seem that you lose javascript anymore in the WordPress text editor when toggling back and forth between “Text” mode and “Visual” mode, but if you have an older version of WordPress or for other reasons do not want Javascript in your WordPress text editor, then you can add the following to your theme’s functions.php file, (or create one if one does not exist):

// [print_button]
function print_button_shortcode( $atts ){
return '<a class="print-link">Print This Page</a>';
}
add_shortcode( 'print_button', 'print_button_shortcode' );

And then just add the following shortcode to the page or post that you want the button, where ever on the page you want it:

[print_button]

I included a class in that code, “print-button” that you can add to your stylesheet and style as you like.  For example if you wanted that to be a blue button to fades to orange when hovered over you could do this:

.print-link {
display:inline-block;
margin-bottom: 15px;
padding:18px 32px;
line-height:1em;
background-color: #005288;
color: #FFF !important;
font-size: 18px;
font-family:"Lucida Grande", 'LucidaSansRegular', Arial, Helvetica, sans-serif !important;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
text-shadow: 1px 1px 1px #11111169;
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-link:hover {
background-color: #C60;
color: #FFF;
text-decoration:none;
}

You could also just change the class assigned to the code to one that is already in use on your website for a button or other style you like.

Here is a sample of what it looks like, with the styles above added.

Print This Page

Finally, if you want to customize the styling of your printed pages so that they do not print out elements of the page like backgrounds and headers and navigation, etc. that you do not want, you will need to create a print style sheet.  For that I will send you to the following page on the WordPress website for more information http://codex.wordpress.org/Styling_for_Print.

Good luck.  If this helped you or you have feedback, let me know below.

42 thoughts on “How to Add a Print Button to a WordPress Page or Post”

  1. Hi. Great code. I want to use it but I have a left nav and when I go to “print the page” my left nav is visible and huge. Any thoughts?

  2. What if we want to only print a particular element on the page and not everything, how could that be done?

  3. Its really nice but what if we only have to print a single page,there is any way to print a single page ?

  4. I just used your code on a page and it works
    I want to know if there is a way to use this on a printer icon instead the phrase “print this page”

    because in my page its not like a button but its text grey color and rose when mouse hover above

    Thanks a lot for share this with us

  5. hi, i’m trying to change the hover and text but for some reason it won’t even though it’s showing the correct title and css.

  6. Hi,

    Thank you for the wonderful tutorial! 🙂

    I’m creating a multi-language site. How can I replace the “Print this page” text for the different language versions? Thanks!

    1. It should work. I followed the post’s instructions just now and put a sample of the button at the end of the post showing it working.

      If the words are showing but it is not clickable, then perhaps you added the javascript directly rather than in the functions.php file and perhaps you either added it in Text mode rather than Visual mode as described in the post, or the javascript part of the link was removed when you toggled between Text and Visual mode which is what happens in WordPress still (check your code and see what it says in Text mode if you did this). Best is to go for the functions file.

      FYI – if you have a caching plugin on your site and upload the style sheet, you may have to purge the site cache and then wait a few minutes (depending on site size) for it to rebuild before the styles will show.

    1. To customize what prints out you could would have to specify print rules in a print CSS file. You could checkout this page about printing and try this plugin. I have not used that plugin before but the one I used, Bunny’s has not been updated in 2 years.

      Good luck.

    1. You should be able to just add the first piece of code in the above post, (after the words”It is simple enough to add a link with some javascript”), in your page template where you want it.

  7. Thank you for sharing but it didn’t working for me. I was wondering where I went wrong and I was hoping you might be able to shed some for me. Placing the code in my child theme functions page, adding the CSS to my style sheet and the shrortcode into my WordPress page seems easy enough but it didn’t work. All I get is the button and it appears as intended with the hover affect as per the style sheet but no print action. Any help would be appreciated thanks.

    1. Once again I must have visited this post in Visual mode, resulting in WP removing my javascript in the code example. Replace what you added to your functions.php file before with what is there now and it should work. My apologies.

  8. Hmmm… My site (using Genesis framework) does not print the HTML correctly. For some reason the shortcode prints as raw HTML (can’t show you the code) WP gets angry.. is what shows up. Weird…

    1. Hi Scott,

      I looked at the code in my post and it seems that some of the code was converted improperly. Instead of < for example it was showing &lt ;. Anyways, it is fixed now. Try the code above now and see if that fixes it.

Leave a Comment

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

Need Help with Your Website?

Why not get it done FASTER and EASIER with help from a friendly, helpful Professional?

Call (707) 965-9727

Or use our Contact Form

I am located in Northern California, U.S.A.

Great!

Scroll to Top