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

How to save time and money.

Prior to contacting a web designer, there are some tasks you can do that will help save you time and money. If you bring this information you will be in a great position for a productive collaboration. Here’s what you should do:

  • Have some clearly defined goals for your new website
  • Have an outline of steps you want each of your customers/readers to take
  • Demonstrate your computer competency level
  • Have an idea of the domain name you might like to use (if a new website)
  • Pick out some key words you would like typed into a search engine for your site to be listed
  • Provide as many pictures, logos and graphics as you possibly can
  • Have a list of competitor’s websites and what you like or don’t like about each one
  • Have a list of websites you like the look and feel of and why
  • Determine whether you will be creating your own content or have a copy writer involved?
  • Have a detailed description of timelines and budgets
  • Decide how much editing you would like to do yourself
  • Think about who will be managing your website month to month
  • Decide on who will be maintaining and securing your website over time

Parts of a Website

There are several types of media that go into building a web site and not all of which may be done by one web designer.  For example:

  • The logo and graphics are usually created by an artist or graphic designer.
  • If photos make up part of the graphics a photographer can do the job.
  • The text that is written for you biography or about page as well as the business copy on other pages is crafted by content writers.
  • If you have video, you are most likely going to use a production company to create it.
  • To make you website rank in Google you will need help from a SEO specialist (Search Engine Optimization).
  • Now with the popularity of Social Media, there is another expert that handles that.

So what does your web designer do then? There is plenty left for us to do with your website.

  1. The primary job is to get all of your media published to the Internet. Domains and hosting servers help to map the media file locations to addresses so that your website is accessible online.
  2. Then we determine the navigation of your media in the most logical manner. Menus allows users of the site the ability to find the information they are seeking and to guide them to take the actions requested by the business such as signing up for a newsletter.
  3. Next we add functionality such as fields and boxes to capture data, and scripts to track how many visits each page receives.
  4. Lastly, we blend all the media into one format to give the website a consistent feel.  This includes font sizes, colour palettes, borders, sidebars, widgets, forms, headers, footers and overall design.

If you are mostly concerned with how your website looks vs how it feels and functions? You may want to consider hiring a graphic designer first and then a web designer second.

Did I miss anything? 😉