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:


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 {
margin-bottom: 15px;
padding:8px 20px;
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;

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.

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

  1. Amanda July 20, 2020 at 11:50 am #

    Amazingly easy! Thanks for helping me avoid adding yet another unnecessary plugin!

  2. eve lurie May 1, 2020 at 12:01 pm #

    Perfect! It just works!
    I used this for a client who wanted to have folks be able to print a specific page. The print button is at the bottom. I added Print This PageI added the JS to the page. and it added the print button which opened the print dialog page.

    I had created a print stylesheet previously so I just updated it for this specific Genesis Theme, Enterprise Pro and added @media print styles to style.css
    Many thanks for a quick and easy solution!

  3. Sam March 26, 2020 at 3:11 pm #

    It works!!! I don’t particularly like adding extra plugins, so love this method.
    Just my two cents: best to use a functionality plugin, instead of tampering with the temperamental functions.php.

  4. Jeannie June 12, 2019 at 3:18 pm #

    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?

    • David Tierney June 12, 2019 at 4:52 pm #

      You would have to customize the CSS for print or try a plugin that lets you customize the print stylesheet.

  5. Ryan Sacks June 26, 2018 at 7:57 am #

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

  6. Mayank May 15, 2018 at 11:59 pm #

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

    • David Tierney May 16, 2018 at 10:12 am #

      You would typically use your devices print dialog to specify that.

  7. Maryam April 28, 2018 at 10:25 pm #

    thanks alot 🙂

  8. DIMITRA SKYLOGIANNI October 19, 2017 at 5:15 am #

    although yesterday i had problem and the code put text in my page today its ok it is a button like yours

    thanks a lot again it works very nice

  9. DIMITRA SKYLOGIANNI October 18, 2017 at 11:01 am #

    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

    • David Tierney October 18, 2017 at 2:12 pm #

      Yes, you would just place your image or image code instead of the words. In the visual editor I think you could try this by adding your image, then making it a link and for the url for the link you would put: javascript:window.print()

      Otherwise you would use the Text editor and add your image clicking the img button to add an image tag https://www.w3schools.com/tags/tag_img.asp

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

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

    • David Tierney March 15, 2017 at 11:19 am #

      Can’t say I understand what you are asking?

  11. 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.

  12. 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.

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

      Hi Buddy,

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

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

    Thanks a lot, works like a charm.

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


    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.

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

    this really helped alot


  16. 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.

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


    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 #


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

    How define what this button will print when click it.

    • 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.

  19. 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.

  20. 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?

  21. 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.

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

    Thanks. This is something I am looking for. 🙂

  23. 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.

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

    Thanks, this was just what I needed!!

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

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

  26. 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?

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.


Pin It on Pinterest

Share This

Share This

Share this post with your friends!