“PrintPress” Documentation by “Abid Omar” v1.0


“PrintPress”

Created: 19/04/2013
By: Abid Omar
Email: contact@omarabid.com

Thank you for picking PrintPress. A premium WordPress plug-in to creates a printer-friendly version of your WordPress blog posts and pages. blog


Table of Contents

  1. Introduction
  2. Plug-in Settings
  3. Print Page Template
  4. CSS comment Template
  5. Button Template
  6. Sources and Credits

A) Introduction - top

PrintPress creates a printer-friendly version of your WordPress blog posts and pages. PrintPress automatically detects the permalinks structure of your blog and apply the new rewrite rules. The plug-in has a set of features to customize the print page output. The print page is fully customizable through the "Edit Template" page.

Print Page URL

The print page URL depends on your permalink structure.

Compatibility

PrintPress works on all WordPress pages, however, you should only use it for blog posts and blog pages. PrintPress will try to find out if the requested page has any content and comments, and will try to format it. In case you have a custom page with valid content and comments, PrintPress should parse it successfully.

If you change the rewrite rules (or another plug-in do), PrintPress may stop functioning. A refresh to the rewrite rules is required. You can deactivate/activate the plug-in to refresh the rules, but a simple solution was made: The refresh button in the settings page. It'll refresh the rules without needing to deactivate/activate the plug-in.


B) Plug-in Settings - top

The plug-in has several settings which can changed from the settings panel for the plug-in.

General Settings

Rewrite Settings


C) Print Page Template - top

The Print Page is fully customizable through the "Edit template" page. You can edit the HTML code for the Print Page, add additional CSS code, edit the comment HTML code, and also customize its appearence. The following section will help you understand how the template engine works, and how you can fully customize the template.

The template

The Print Page template is a single HTML file. The content of this file is editable from the "Edit Template" Page, "Post Template" tab, and HTML Code text area.

Default Template HTML Code
<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="{{@plugin_path}}css/reset.css" />
        <link rel="stylesheet" type="text/css" href="{{@plugin_path}}css/style.css" />
        <style type="text/css">
          {{@css}}
        </style>
    </head>
    
    <body>
        <div id="header_ad">
            <img src="ad.png"/>
        </div>
        <div id="container">
            <div id="header_article">
                <h1>{{@title}}</h1>
                <div id="info">
                    <ul>
                        <li><span class="bold">Author: </span> {{@author_firstname}} {{@author_lastname}}</li>
                        <li><span class="bold">Published: </span> {{@date}}</li>
                    </ul>
                </div>
            <div class="clear"></div>
            </div>
            <div id="content">
                {{@content}}
            </div>
        </div>
        <div id="comments">
        <span id="comments-count">Comments ({{@comment_count}})</span>
          {{@comments}}
        </div>
        <div id="footer">
            <!-- Custom Footer -->
            <p></p>
        </div>
    </body>
</html>

You must know HTML and CSS, otherwise, you risk breaking the template. The template is using two CSS files "reset.css" and "style.css", which both of them can be found inside the CSS folder of the plug-in directory.

Additional CSS code

If you want to add few CSS rules, and not mess with the original CSS files, the CSS text area is for you. You can add CSS rules and they'll be automatically added to your page template. By default, it's empty.

Variables

When the Print Page URL is called, PrintPress will replace variables content with the related blog post or page. You can remove variables that you don't want to display or change their positions in your template.

A variable is detect with the following pattern: {{@variable}}

Post Template variables

D) CSS comment template - top

The comment template

A blog post might have one or many comments; or may be no comments at all. To make customizing the comment HTML code and style possible, PrintPress seperated it. The comment HTML code will be applied for each single comment. The additional CSS rules in the Post Template tab does also apply for the comment HTML code.

Default Comment HTML Code
<div class="comment">
    <div class="comment-author">
      {{@gravatar}}
      <cite>{{@author}}</cite>
      <span>Says:</span>
      <div class="comment-meta">
        <span class="date">{{@date}}</span>
      </div>
    </div>
    <p>{{@comment}}</p>
</div>
Comment Options

The comment gravatar and data format can be customized.

Comment Template Variables


E) Button Template - top

Inserting the button

There are two possible ways of inserting the print button:

Usage inside a blog post
    [printpress_button]
Usage with PHP
    <?php
        echo do_shortcode('[printpress_button]');
    ?>

The button template

You can change the generated HTML code for the button. The default generated HTML code include a simple icon which links to print page. The print page link is generated by PrintPress.

Default Button HTML
<a href="{{@print_url}}">
    <img style="float:right; padding:10px;" src="{{@print_icon_url}}" />
</a>
Button variables

F) Sources and Credits - top

I've used the following images, icons or other files as listed.


Abid Omar

Go To Table of Contents