Examples and Demos

Here you can find many examples and demos for One-click-print.

Style Sheet

The printer icons are defined by the included default style sheet as follows:
.pom-default {
background-image: url('print-icon.png');
background-repeat: no-repeat;
width: 32px;
height: 32px;
}

.pom-small {
background-image: url(‘print-icon-small.png’);
background-repeat: no-repeat;
width: 17px;
height: 16px;
}

.pom-small-black {
background-image: url(‘print-icon-small-black.png’);
background-repeat: no-repeat;
width: 17px;
height: 16px;
}

.pom-small-grey {
background-image: url(‘print-icon-small-grey.png’);
background-repeat: no-repeat;
width: 17px;
height: 16px;
}

.pom-small-white {
background-image: url('print-icon-small-white.png');
background-repeat: no-repeat;
width: 17px;
height: 16px;
}

Shortcode

The basic shortcode is [print-me] and can be placed on any post or page.

Target Attribute

By default the target element to be printed is ‘article’. This can be changed by assigning any html Element, Class, or Id.

ELEMENT

CLASS

ID

PLACEHOLDERS

As of version 1.4 the placeholder %ID% may be used to automatically insert the post ID.


As of version 1.5.5 two new placeholders where added: %prev% and %next% to print elements immediately preceding or following the print button.

MULTIPLE TARGETS

Multiple targets can be assigned using a comma to separate them. So, for example, lets say we wanted to assign an element with an ID of ‘elem1’ and some other element that has been assigned a class of ‘elem2’.


Pretty cool, right?

Do Not Print Attribute

The do_not_print attribute may be used to prevent content elements inside the target container from being printed. The following code would display but not print any content inside all elements assigned the class of “noprint”.

Print Only Attribute

This feature is available in the pro version only.
The print_only attribute may be used to assign content elements by Element, ID or CLASS that are to be displayed only on the print page. Print Only content will be hidden until printed. The following code would not display but only print any content inside all elements assigned the class of “printonly”.

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