WordPress Print Button

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 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" href="javascript:window.print()">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:8px 20px;
line-height:1em;
background-color: #005288;
color: #FFF !important;
font-size: 14px;
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 #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-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.

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

  1. sucharitha March 15, 2017 at 3:44 am #

    how can we change apply button in posts page in wordpress from our own plugin?

  2. vanesa March 8, 2017 at 3:05 pm #

    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.

    • David Tierney March 9, 2017 at 11:50 am #

      You would have to provide a working sample for me to look at so I could offer any feedback.

  3. Buddy Roberts October 3, 2016 at 3:19 am #

    I’m trying to print a popup window only but the page underneath prints also. Is there any way I can only print the popup?
    Thanks for the great information.
    Buddy

    • David Tierney October 3, 2016 at 11:04 am #

      Hi Buddy,

      Sorry. I don’t know the answer to that one.

  4. atriacenter June 7, 2016 at 9:43 am #

    Thanks a lot, works like a charm.

  5. Pocholo May 17, 2016 at 11:18 pm #

    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!

    • David Tierney May 18, 2016 at 3:09 pm #

      That is a bit more complicated than I have time to support in a forum response. You might try contacting these guys at WPML.

  6. michael May 12, 2016 at 7:07 am #

    this really helped alot

    thanks

  7. t January 21, 2016 at 4:15 pm #

    I just shows the word Print this but no clickability fora wordpress post.

    • David Tierney January 21, 2016 at 9:21 pm #

      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.

  8. Max September 29, 2015 at 8:41 am #

    Hey,

    I was just looking at your code and thank you for posting. All I am seeing in the javascript area is…Print This Page?

    • David Tierney October 1, 2015 at 11:51 am #

      Thanks. That code keeps getting removed by accident. I fixed it.

      • Max October 1, 2015 at 3:23 pm #

        Thanks!

  9. FEDERICO BUENDIA July 1, 2015 at 1:57 pm #

    How define what this button will print when click it.
    POST TITLE : CONTENT : FOOTER : IMAGES

    • David Tierney July 1, 2015 at 2:57 pm #

      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.

  10. Suraj May 11, 2015 at 7:07 am #

    if i want to add print link in wordpress loop then how can i add it

    waiting for your reply

    • David Tierney May 11, 2015 at 9:47 am #

      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.

  11. Grant Rollo April 30, 2015 at 4:36 am #

    Hi. Just came across this great article. Ive got this working using the functions PHP. How could I add this functionality to a clickable button or image?

  12. George April 19, 2015 at 4:56 pm #

    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.

    • David Tierney April 19, 2015 at 8:09 pm #

      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.

  13. Rex January 21, 2015 at 6:15 am #

    Thanks. This is something I am looking for. 🙂

  14. Scott November 5, 2014 at 1:52 pm #

    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…

    • David Tierney November 6, 2014 at 4:02 pm #

      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.

  15. Jolanda November 4, 2014 at 1:44 am #

    Thanks, this was just what I needed!!

  16. Md Abul Bashar August 7, 2014 at 4:02 am #

    very nice, and it is working.. thanks for share.

  17. Norma February 16, 2014 at 5:23 am #

    Thank you for making this great bit of code available. So easy and so useful!

    • David Tierney February 17, 2014 at 2:03 pm #

      No sweat. I like your blog. This line made me laugh, in the context of the article you wrote, “Russian engineers, when faced with the same problem, decided to use a pencil.”

    • Fahim Khan March 5, 2017 at 4:15 pm #

      it is working very nice. thanks for share

Leave a Comment. Join the Conversation!
Did that help? Do you have questions?

Pin It on Pinterest

Share This

Share This

Share this post with your friends!