Print-O-Matic non existing element test

This is a test to see how print-o-matic and print-pro-matic handle targeting a non-existing element:

[print-me target="#aintnosunshinewhenshesgone" /]

No element? no problem… do nothing.

Now what happens if we have one element that does not exist in a list of elements:

This is a little div with an id of ‘printbox’
[print-me target="non_elem, #printbox" /]

Print-O-Matic External Print Trigger – Target by Class

As of print-o-matic version 2.0.1 the ability to use class to target a print element in external print triggers has been added. Basically it works the same as using the data-print_target attribute but instead uses a unique classname in the format of printtarget-<target_id>.

Step 1

Create a target element. The element below is a div with an id of ‘my_print_target’:

<div id="my_print_target">This is the print target wrapped in a div with an element of 'my_print_target' as explained above</div>
This is the print target wrapped in a div with an element of ‘my_print_target’ as explained above

Step 2

Add an external trigger using the new class-trigger method. We’ll use a simple button like so:

<button id="my_print_button" class="printomatic printtarget-#my_print_target">Print Trigger</button>

Step 3

Like in the original example, we need to add the hidden print trigger using a print-me shortcode with the same id as our external trigger and a printstyle=”external” attribute: 

[print-me id="my_print_button" printstyle="external"/]

Print-Pro-Matic Optional No-Print

In this example, the option to include a specific element is provide by using a checkbox. This feature was introduced in Print-Pro-Matic version 2.0-beta-210121

The default print target will be the article element. The image of the donkey has been assigned a class of ‘logo’. Now we need to create our print trigger and a checkbox:

[print-me title="Print Trigger"/]

<label><input type="checkbox" id="ppm_odnp" value=".logo">Donkey Free Print</label>

The checkbox must have an ID of ppm_odnp (because print-pro-matic optional do not print is a bit long). The value is the optional do not print selector, so .logo is for items with a class of ‘logo’, while #logo is an item with an id of ‘logo’.

Here is a working demonstration.

Print Trigger

Print-Pro-Matic Placeholder Attribute

The placeholder attribute is used to add the print-me data to the page when print trigger and target will be added dynamically, for example: via AJAX or a Modal Window.

[print-me target="#print_me" placeholder="true"/]

This will not add the trigger to the page, just the targeting info for when the trigger is later displayed.

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 id="some_id" 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 printpro_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', 'printpro_print_template' );

This could be expanded further to support multiple print-only templates based on a value passed to print_view:

[print-me id="monkey_id" url="%print_view=monkey%" title="print monkey"/]
[print-me id="donkey_id" url="%print_view=donkey%" title="print donkey"/]
print monkey
print donkey

This would require that our function be modified to use the correct print template based on the print_view query var:

function printpro_print_template($original_template) {
    $print_view = get_query_var( 'print_view' );
    if ( !empty( $print_view ) ) {
        if($print_view == 'monkey'){
            $new_template = locate_template( array( 'print-template-monkey.php' ) );
        }
        else if ( get_query_var( 'print_view' ) == 'donkey' ){
	    $new_template = locate_template( array( 'print-template-donkey.php' ) );
        }
        if(!empty($new_template)){
            return $new_template;
        }
    }
    return $original_template;
}
add_filter( 'template_include', 'printpro_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.

[print-me target="%prev%"/]

Works in 2.0.
Pre 2.0:
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="https://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="https://spacedonkey.de/wp-content/uploads/2012/06/RomeSweetRome1-8v22.pdf"/]

This will produce a simple button that will print the 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="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg" alt="" width="600" height="447" pdf_url="https://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"/]

Putting it all Together

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

[print-pdf img_url="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg" alt="" width="600" height="447" pdf_url="https://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

This is some text inside the target div


Boy
Girl
Dog

OK, for some reason the current theme (Twenty-Seventeen) forces all form elements to display:none when printed. This works on other themes.
[print-me title="Print Standard HTML Form" alt="Print the HTML form" target="#html_form, #texter"/]
Print Standard HTML Form