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

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 Receipt</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 {
padding:8px 20px;
line-height:1em;
background-color: #005288;
color: #FFF;
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.

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.

Source: How to Add a Print Button to a WordPress Page or Post • DESIGNSbyTIERNEY

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s