Custom Print Templates for Print-Pro-Matic

Note: This post assumes a basic understanding of WordPress templates and that a child-theme is being used.

To create a custom print template we first need to define a query var to trigger the template.
Add the following to the child-theme’s function.php file:

function printpromatic_query_var( $vars ) {
	$vars[] = 'print_view';
	return $vars;
}
add_filter( 'query_vars', 'printpromatic_query_var' );

Now WordPress will look for something like /?print_view=true at the end of any url.

Next step is to tell print-pro-matic to use the current page with the print_view query variable tacked on the back as the target url. Simply set the url attribute using the %print_view% placeholder as its value:

[print-me url="%print_view%"/]

Finally we need to check for this print_view query var and either a) use a custom print-only template file or b) modify the current page template to switch to a print-only view.

Redirect to Print-Only Template

If a print-only template exists simply redirect to this template file by adding the following code to the child-theme’s function.php file:

function printpromatic_print_template($original_template) {
    if ( get_query_var( 'print_view' ) ) {
		$new_template = locate_template( array( 'print-template.php' ) );
        return $new_template;
    }
	return $original_template;
}
add_filter( 'template_include', 'printpromatic_print_template' );

Modify the Existing Template

This method involves modifying the current page template to change what it displays based on the presence of the print_view query var.

In the page template being used, we need to check if the query_var is present:

$print_view = get_query_var( 'print_view' );

Now we need to simply wrap the existing template elements in an if statement:

//normal
if( empty($print_view) ){
   ...
}
//print only
else{
   ...
}

Print-O-Matic and WordPress Charts

Here is an example of using Print-O-Matic to print a WordPress Chart using wp-charts

First, the chart:
[wp_charts title=”mypie” type=”pie” animation=”false” align=”alignright” margin=”5px 20px” data=”10,32,50,25,5″]

Now we make a print button:

It seems we need to wrap the chart shortcode in a div so we can target that div and include it’s related javascript.
Still not. maybe we also need to include the chart js on the page?
Nope. It seems the HTML Canvas element is not cloning it’s content that was generated by the javascript… hmmm.

Print-Pro-Matic: Add PDF to Print Page

The following is an example of how to add a pdf document to be printed along with a target using the new add_print_url attribute.

First, we need a simple target to print:

<div id="print_target">This is the simple print target for the page</div>

Now, we simply add our print-me shortcode and use the add_pdf_url attribute to include a pdf document to be printed:

[print-me target="#print_target" add_pdf_url="http://spacedonkey.de/wp-content/uploads/2012/06/RomeSweetRome1-8v22.pdf" pause_time="3000"/]

Direct PDF Print

As of version 1.2.6 we have introduced a new shortcode to print-pro-matic, just for printing PDFs.Note: the ability to print pdf files from javascript is currently not supported in FireFox. Therefore the PDF will open in a new tab and the user can print from there.

[[print-pdf pdf_url="http://spacedonkey.de/wp-content/uploads/2012/06/RomeSweetRome1-8v22.pdf"/]]

This will produce a simple button that will print the pdf:
[print-pdf pdf_url=”http://spacedonkey.de/wp-content/uploads/2012/06/RomeSweetRome1-8v22.pdf” /]

The optional attirbutes for the print-pdf shortcode are as follows:
id
The ID attribute will assign a custom ID to the button. If no ID is assigned a random id will be assigned.

title
The title attribute will assign the text of the print button. If no title is assigned, the button will have the tex of: ‘Print PDF’

class
The class attribute will assign the button a custom class.

tag
The tag attribute will change the trigger element from the default button to, say a div. For example:

[[print-pdf pdf_url="url_to_pdf" tag="div"/]]

img_url
The img_url attribute is used to define the image URL to use as a trigger. Using a trigger image will override standard print trigger, replacing it with the chosen image.

[[print-pdf img_url="url_to_trigger_image"/]]

width
Use the width attribute along with the img_url to define the image width.

height
Use the height attribute along with the img_url to define the image height.

alt
Use the alt attribute along with the img_url to define the image alt value.

Demo of Trigger Image:

[[print-pdf img_url="http://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg" alt="" width="600" height="447" pdf_url="http://spacedonkey.de/wp-content/uploads/2012/06/RomeSweetRome1-8v22.pdf"]]
[print-pdf img_url=”http://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg” alt=”” width=”600″ height=”447″ pdf_url=”http://spacedonkey.de/wp-content/uploads/2012/06/RomeSweetRome1-8v22.pdf”]

redirect_url
Full url to redirect the user to after either a) the print dialogue closes or b) the pdf is loaded into a new tab (depending on which browser is being used)

[[print-pdf pdf_url="url_to_pdf" redirect_url="http://starwars.wikia.com/wiki/Main_Page"/]]
[print-pdf pdf_url=”http://spacedonkey.de/wp-content/uploads/2012/06/RomeSweetRome1-8v22.pdf” redirect_url=”http://starwars.wikia.com/wiki/Main_Page” title=”Print & Redirect”/]

Putting it all Together

Here we will have a trigger image that redirects on print close:

[[print-pdf img_url="http://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg" alt="" width="600" height="447" pdf_url="http://spacedonkey.de/wp-content/uploads/2012/06/RomeSweetRome1-8v22.pdf" redirect_url="http://starwars.wikia.com/wiki/Main_Page" title="Ninja Power"]]
[print-pdf img_url=”http://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg” alt=”” width=”600″ height=”447″ pdf_url=”http://spacedonkey.de/wp-content/uploads/2012/06/RomeSweetRome1-8v22.pdf” redirect_url=”http://starwars.wikia.com/wiki/Main_Page” title=”Ninja Power”]

Ultimate Print-O-Matic Form Elements Test

This is a test for printing various forms using Print-O-Matic and Print-Pro-Matic plugins.

Standard HTML Form



Boy
Girl
Dog


Print Standard HTML Form

Contact Form 7

Ninja Forms

print me

here is some more text

Ninja Forms with Success Message

Fields marked with a * are required.

Google Form

[wpgform id=’2769′]
Print Google Form

Print-O-Matic External Buttons

this is a test element


As of version 1.6.7c we introduced a new printstyle value ‘external’ for Print-O-Matic. Now it is possible to create an external button to trigger a print in a less-hacky way. Here is an example of this works: To print the following div with an id of ‘print_me_please’:

<div id="print_me_please">This is our target print element</div>

First we create a kind of roll-your-own print trigger. The details that must be included are:

  1. a unique id
  2. a print-o-matic class such as printomatic or printomatictext
  3. a data-print_target attribute

For example:

<button id="my_print_button" class="printomatic" data-print_target="#print_me_please">Print Trigger</button>

Which will output:

The final thing we need to do is include a hidden print trigger using a print-me shortcode with the same id as our external trigger and the new external printstyle attribute. This shortcode must be placed someplace on the same page, and will load in all the required scripts and settings to make the print trigger work correctly.

[print-me id="my_print_button" printstyle="external"/]
This shortcode will not output anything to the page.
That’s it. You are done! Let us know on the WordPress Support Forum if you require any further assistance.

Wonky Submit & Print-Pro-Matic Button

This is a Dr. Frankenstein experiment with Contact Form 7’s Submit button and the Print-Pro-Matic Print external trigger. When the user clicks submit, the form should also force-launch the print dialogue. Years of working in UI tells us NOT do this, but people still have music playing on page load, so what do we know.

[contact-form-7 id="1018" title="SubPrint"/]

To cross-breed the Submit button with the print-pro-matic print trigger, just follow the following steps.

  1. In the form: add a cf7 submit/print button, and assign it a unique ID (in this case subprint) and a class of printme_trigger like so:
[submit id:subprint class:printme_trigger]
  1. In the post that the form shortcode is displayed on: simply target the form to be printed and assign the external_trigger attribute the id of the external print/submit button:
[print-me target="#wpcf7-f1018-p2316-o1i" external_trigger="subprint"/]

Update: Submit & Print With Validation

The above will work nicely if there is no validation to consider. However if we only want to print the form after it has passes validation we need another approach.

First: We will not actually have the print triggered via clicking the submit button, so we can remove the id and class in the submit tag in the form:

[submit]

If the submit button does not trigger the print what will? If you notice in the Contact Form 7 edit page, there is an Additional Settings tab. Here we can use Contact 7 own on_sent_ok: to trigger the print like so:

on_sent_ok: "print_trigger('my_print_trigger');"

Now, finally, we must provide an ID to our hidden print-me shortcode:

[print-me id="my_print_trigger" target="#wpcf7-f1018-p2316-o1" external_trigger="on_sent_ok"/]

Demo

deactivated due to spam abuse.
[contact-form-7 id="1018" title="SubPrint"/]

Print-Pro-Matic Advanced External Triggers

There are times when it would be nice to turn ANY element into an external print trigger. This is a feature often asked for when trying to hook up a Visual Editor button to be a print trigger. As of Print-Pro-Matic v 1.1.4e we have added:

  • new printme_trigger class that turns anything into a print trigger
  • new external_trigger shortcode element to enter the id or ids of the element(s) that should be used as an external trigger

And this is how it works:

First we need an element that has a unique id. There must also be the ability to add the printme_trigger class to it.

<button id="my_button" class="printme_trigger">Print</button>

Next we add the print-me shortcode like normal… but also add the external_trigger attribute like so:

[print-me target="#intro_text" external_trigger="my_button"/]

And that’s it! Note: The external_trigger attribute can accept a comma separated list of multiple id’s. Also: When an external_trigger attribute is assigned, no standard print-pro-matic icon or text will be displayed, as the external trigger will be used instead.