Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Print This Modification WordPress

  • SOLVED

I have tried several plug-ins to print a page out with only the main content instead of all the headers, menus etc. Most work to one degree or another but all of them have issues. The main issue is the section I want to print is a jscript portion of the page. It has several drop down menus where our customer selects options and a final price is shown at the bottom of the page.

Virtually all of the print plug-ins I have tried strip out either the selected drop down options or the actual drop downs themselves. The one that does exactly what I want (except for the problem mentioned above) is Wordpress Print This plug-in.
You can see the plug-in here:
http://twodeuces.com/wordpress-plugins/wordpress-print-this-section

I like the way this short code works in that it allows me to specify the exact part of the page that will print when the "print this" button is clicked. The problem is it resets all of the dropdown selections to default and resets the final price back to $0.00. Our customers need to be able to print out the page to send in with their order with all of their selected options and final price showing. The drop downs are a simple java script that I have working correctly except for a way to print just these out without a bunch of garbage that is confusing to the end user. I need someone who can either edit this plug-in so it wont change the drop downs including the final price or re-write a new plugin.

I have included a screen shot of the print this section with a view of the drop downs with various options selected and a price displaying. When I click on the print this button all of the drop down menus are blanked out and the price returns to $0.00

2013-02-06 by elsprod

Answers (2)

2013-02-06

Christianto answers:

Hi,

We can use cookie,

place this on your functions.php
function js_cookie_selected(){?>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.print-this-content select').each(function(){
var select_name = $(this).attr('name'), value = '';
if(document.cookie.match('(^|;) ?' + select_name + '=([^;]*)(;|$)')){
value = document.cookie.split(select_name+'=')[1].split(';')[0];
$('option[value="'+value+'"]', this).attr('selected','selected');
}
});
$('.print-this-content select').change(function(){
var select_name = $(this).attr('name'), value = $(this).val();
document.cookie = select_name+'='+escape(value);
});
});
</script>
<?php
}
add_action('wp_head','js_cookie_selected');

and edit the plugin specific template print-this.php
<em>(wordpress-print-this-section/php/print-this.php)</em>
to include jquery and our function, put

<?php
wp_print_scripts('jquery');
js_cookie_selected();
?>

below the printthis.css stylesheet (line 52 approx.), so it become:

<link rel="stylesheet" href="<?php echo plugins_url('wordpress-print-this-section/css/printthis.css'); ?>" type="text/css" media="screen, print" />
<?php
wp_print_scripts('jquery');
js_cookie_selected();
?>

elsprod comments:

I am a beginner when it comes to coding. Are there specific areas where the code should be added to to the functions.php file and the print this.php file? I also have a few different functions.php file. One that I pulled up in Notepad++ specifically said not to edit this file. I am using the Sterling theme.

I found another function.php file that appears to be the one but a little guidance would be nice. If you could clarify the first two steps as to location to add the code, I think I could try this. The third step I have found and your instructions make that an easy addition.

Thanks!

elsprod comments:

To clarify my questions:
Step 1 - I am not positive of which functions.php I should be adding this code to and where in the file it should be added. Can you tell me the location much like you did in step 2?
Step 2 - I can find this file, I just need to know where to add the code within the file.
Step 3 - I found both a print-this.css file and a print-this.php (it is the same file that I found for step 2). The print-this.php file has a very similar line at line 52 that you mention which makes me think that is the correct one to edit, while the print-this.css file looks quite different.

Here is the code from the print-this.php file:
<?php
/*
* Print This Section Template File - Used to display section for print.
*/

/* FUNCTION: extracts the div to be printed that was inserted by plugin. */
function extract_content() {
global $pages, $multipage, $numpages, $post;

if(!empty($post->post_password) && stripslashes($_COOKIE['wp-postpass_'.COOKIEHASH]) != $post->post_password) {
$content = get_the_password_form();
} else {
if($multipage) {
for($page = 0; $page < $numpages; $page++) {
$content .= $pages[$page];
}
} else {
$content = $pages[0];
}
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]&gt;', $content);

// extract Print This Section from content.
$print_this_sect_number = intval( get_query_var( 'printsect' ) );
$print_this_starting_marker = "<!-- Print This Section $print_this_sect_number Start -->";
$print_this_ending_marker = "<!-- Print This Section $print_this_sect_number End -->";
$content_chunks = explode( $print_this_starting_marker, $content, 2 );
$content = $content_chunks[1];
$content_chunks = explode( $print_this_ending_marker, $content, 2 );
$content = $content_chunks[0];
if ( !$content ) {
$content = __( 'Print This was unable to locate the section you requested. Please contact the site administrator', 'print-this-section' );
}
}

echo $content;
}

/* FUNCTION: retrieves the specified print this option. */
function get_print_this_option( $option ) {
global $print_this_plugin;
return $print_this_plugin->admin_options[$option];
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="Robots" content="noindex, nofollow" />
<link rel="stylesheet" href="<?php echo plugins_url('wordpress-print-this-section/css/printthis.css'); ?>" type="text/css" media="screen, print" />
</head>
<body class="print-this-body">
<!-- <p style="text-align: center;"><strong>From: <?php bloginfo('name'); ?> - <span dir="ltr"><?php bloginfo('url')?></span> -</strong></p> -->
<div class="Center">
<div id="Outline">
<?php if (have_posts()): ?>
<?php while (have_posts()): the_post(); ?>
<?php if ( get_print_this_option( 'print_title' ) ): ?><p id="BlogTitle"><?php the_title(); ?></p><?php endif; ?>
<?php if ( get_print_this_option( 'print_by_line' ) ): ?><p id="BlogDate"><?php _e('Posted By', 'print-this-section'); ?> <?php the_author(); ?> <?php _e('On', 'print-this-section'); ?> <?php the_time(sprintf(__('%s @ %s', 'print-this-section'), get_option('date_format'), get_option('time_format'))); ?> </p><?php endif; ?>
<div id="BlogContent"><?php extract_content(); ?></div>
<?php endwhile; ?>
<hr class="Divider" style="text-align: center;" />
<?php if ( get_print_this_option( 'print_article' ) ) : ?><p><?php _e('Article printed from', 'print-this-section'); ?> <?php bloginfo('name'); ?>: <strong dir="ltr"><?php bloginfo('url'); ?></strong></p><?php endif; ?>
<?php if ( get_print_this_option( 'print_url' ) ) : ?><p><?php _e('URL to article', 'print-this-section'); ?>: <strong dir="ltr"><?php the_permalink(); ?></strong></p><?php endif; ?>
<p id="print-link"><?php _e('Click', 'print-this-section'); ?> <a href="#Print" onclick="window.print(); return false;" title="<?php _e('Click here to print.', 'print-this-section'); ?>"><?php _e('here', 'print-this-section'); ?></a> <?php _e('to print.', 'print-this-section'); ?></p>
<?php else: ?>
<p><?php _e('No posts matched your criteria.', 'print-this-section'); ?></p>
<?php endif; ?>
</div>
</div>
<?php if ( get_print_this_option( 'print_disclaimer' ) ) : ?><p id="print-disclaimer"><?php echo get_print_this_option( 'disclaimer' ); ?></p><?php endif; ?>
</body>
</html>
Here is the code from the print-this.css file:
/*
Document : printthis
Created on : Mar 31, 2011, 1:40:10 PM
Author : Scott Hair
Description:
Stylesheet for the print page.
*/

/*
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

.print-this-body {
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
color: #000000;
}

.Center {
margin: 0px auto 0px auto;
}

#Outline {
width: 90%;
margin-left: auto;
margin-right: auto;
padding: 10px;
border: 1px solid #000000;
}

#BlogTitle {
font-weight: bold;
font-size: 16px;
margin-bottom: 5px;
}

#BlogDate {
margin-top: 5px;
margin-bottom: 10px;
}

#BlogContent {
padding: 10px;
margin-top: 10px;
}

HR.Divider {
width: 80%;
height: 1px;
color: #000000;
}

#print-disclaimer {
text-align: center;
}

#print-link {
text-align: right;
margin-right: 20px;
}

.print-this-body .print-this-content {
background-color: transparent;
margin: 0px;
padding: 0px;
border: 0px solid #999999;
}

.print-this-content {
border: 1px solid #999999;
padding: 10px;
margin: 5px;
background-color: #EEEEEE;
}


.clear {
clear: both;
}

.print-this-button-shell {
text-align: right;
margin-right: 10px;
}


@media print {
#comments_controls,
#print-link {
display: none;
}

#Outline {
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 10px;
border: 0px solid #000000;
}

.print-this-body {
font-family: Verdana, Arial, Tahoma;
font-size: 10px;
color: #000000;
}
}

As you can see I am a little confused. I don't want to change the wrong file and end up with problems on the rest of the site. I think I can try your suggestion if I get a little more clarification. Thanks!

Christianto comments:

Hi,

Sorry for the delay,
You can replace 2 files on your plugin folder with [[LINK href="https://www.dropbox.com/s/rj69h9rt66up21w/wordpress-print-this-section.zip"]]files that I've edited here[[/LINK]]

wp-print-this-section.php on plugin root folder,
and print-this.php on php directory..

let me know if it doesn't work on your side.

Christianto comments:

I think its ok to edit directly the plugin file since the plugin isn't updated for 2 years,
if you need to update it, you can check the both edited file to adjust it.

best,
nc

elsprod comments:

I replaced the two files but it still dose the same thing (blanks out the drop downs and price). Do I still need to edit the functions.php file? If so I am still not sure which one to edit and where to place the edit. I am referring to this code that you had in the very first post.
function js_cookie_selected(){?>

<script type="text/javascript">

jQuery(document).ready(function($){

$('.print-this-content select').each(function(){

var select_name = $(this).attr('name'), value = '';

if(document.cookie.match('(^|;) ?' + select_name + '=([^;]*)(;|$)')){

value = document.cookie.split(select_name+'=')[1].split(';')[0];

$('option[value="'+value+'"]', this).attr('selected','selected');

}

});

$('.print-this-content select').change(function(){

var select_name = $(this).attr('name'), value = $(this).val();

document.cookie = select_name+'='+escape(value);

});

});

</script>

<?php

}

add_action('wp_head','js_cookie_selected');

Christianto comments:

Is it the site online?
I need to check it first, I try it on my local installation and it work.

<blockquote>I replaced the two files but it still dose the same thing (blanks out the drop downs and price)</blockquote>
No you don't have to put the code on functions.php, its included inside edited wp-print-this-section.php file

elsprod comments:

Right now the page is only on a local xammp host. I tried it again to make sure the two files were replaced and I rebooted xammp to make sure, I still get the same results I got originally. I would be happy to send code from either a script or the html from the page. I appreciate your effort. let me know. Thanks!

elsprod comments:

OK, on further examination it is transferring the drop downs but the calculated price is not transferring. I kept glancing at the final price to gauge if it was working or not and didn't notice that it was keeping the selections in the drop downs. So we are close. Any chance we can figure out how to get the price to be included?

Christianto comments:

Could you post the html source code of the print area?
yes, I only targeted dropdown element, did you use some function to calculate the price? is it javascript code?

elsprod comments:

Yes it is a jscript that figures the final price. Here is the html code.[print_this]
QTY<select id="qty">
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="250">250</option>
<option value="500">500</option>
</select><br />

Disc Type<select id="quote1">
<option value="">None</option>
<option value="1">CD</option>
<option value="2">DVD</option>
<option value="3">Blu-ray</option>
</select><br />

<a href="http://localhost/wordpress/disc-imprint-options" title="Disc Imprint Options" target="_blank">Disc Imprint Type</a><select id="quote2">
<option value="">No Imprint</option>
<option value="1">Mono Black</option>
<option value="2">Mono Red</option>
<option value="3">Mono Blue</option>
<option value="4">Photo Quality B&amp;W</option>
<option value="5">Photo Quality Color</option>
</select><br />

<a href="http://localhost/wordpress/jewel-case-types-2" title="Jewel Case Types" target="_blank">Case Type</a><select id="quote3">
<option value="">No Case</option>
<option value="1">Standard</option>
<option value="2">Slimline</option>
</select><br />

<a href="http://localhost/wordpress/panel-description" title="Panel Description" target="_blank">Insert Type</a><select id="quote4">
<option value="">No Insert</option>
<option value="1">One Panel</option>
<option value="2">Two Panel</option>
<option value="3">Four Panel</option>
<option value="4">Six Panel</option>
<option value="5">Eight Panel</option>
<option value="6">Twelve Panel</option>
<option value="7">Sixteen Panel</option>
</select><br />

<a href="http://localhost/wordpress/jewel-case-tray-options" title="Jewel Case Tray Options" target="_blank">Tray Card</a><select id="quote5">
<option value="">No Tray Card</option>
<option value="1">One Sided with Black Tray</option>
<option value="2">One Sided with Clear Tray</option>
<option value="3">Two Sided with Clear Tray</option>
</select><br />

<a href="http://localhost/wordpress/overwrap-and-shrinkwrap" title="Overwrap and Shrinkwrap" target="_blank">Overwrap - Shrinkwrap</a><select id="quote6">
<option value="">No Wrap</option>
<option value="1">Cello Overwrap Yes</option>
</select>

Rush Job  <select id="quote7">
<option value="">3 Day Turn Standard</option>
<option value="1">2 Day Turn</option>
<option value="2">1 Day Turn</option>
</select><br />

<h2>SUB TOTAL</h2>
<div id="quoteTotal">$0.00</div><div>(plus S&amp;H)</div><br class="none" />
<span style="font-size: 14px;">If you need different quantities then are shown on the drop down choices, </span><br /><span style="font-size: 14px;">call us at 1-800-927-3472 and we will customize a quote just for your needs.</span><br class="none" /><span style="font-size: 14px;">
Pricing assumes print ready art using our <a href="http://localhost/wordpress/templates" title="Templates" target="_blank">templates</a>. If there are problems with your art and </span><br /><span style="font-size: 14px;">you choose to have us fix the problem, you will be charged extra (you will be contacted first).</span><br /><span style="font-size: 14px;">We offer graphic layout and typesetting starting at just $15.00 per panel. Call for info.</span>
<span style="font-size: 12px;"><br /></span><h4>Shipping and Handling Charges for Jewel Case Product.</h4>Shipping and Handling to 48 States. Call for quote to Hawaii or Alaska. Place appropriate price in S&amp;H box on order form.<table border="0" cellpadding="1" cellspacing="1" style="border-color: #000000; border-width: 0px;"><tbody><tr><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> Item</span></td><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> 25</span></td><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> 50</span></td><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> 100</span></td><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> 250</span></td><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> 500</span></td></tr><tr><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> Standard Jewel Case  </span></td><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> $15.00 </span></td><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> $20.00 </span></td><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> $25.00 </span></td><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> $70.00 </span></td><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> $125.00 </span></td></tr><tr><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> Slimline Jewel Case</span></td><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> $14.00</span></td><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> $18.00</span></td><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> $23.00</span></td><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> $55.00</span></td><td style="border: 1px solid #000000;"><span style="font-size: 22px;"> $95.00</span></td></tr></tbody></table><p><span style="font-size: 1em;">
<br class="none" />
<h4>Add a Barcode for just $15.00 - Posters Starting at just $39.00 for 50 with your order.</h4>See order form or <a href="http://localhost/wordpress/posters" title="Posters" target="_blank">poster page</a> for more poster options.[/print_this]

Christianto comments:

This is the calculated price?
<div id="quoteTotal">$0.00</div>

please replace wp-print-this-section.php file [[LINK href="https://www.dropbox.com/s/nxpdy61qdycdtqb/wordpress-print-this-section.php"]]with this file[[/LINK]].

elsprod comments:

Yes that is the calculated price.

I replaced the file and it did transfer a price over but it was the incorrect one. In fact I tried it several times with different options selected and the price was always the same $60.50, but I couldn't make it come up with the actual price from the previous page.

My concern is Wordpress obviously doesn't like this kind of code. It may have something to do with the way Wordpress handles the html. Any ideas?

elsprod comments:

I am noticing some other flaws. Sometimes it is changing some of the drop down selections when I click on the print this screen. Also, Once I have clicked on the print this section and I use the browser button to go back to the page, the drop downs all have the previous selections but the price is zeroed out. A refresh of the page will not bring it back to normal.

But even stranger is if I go to a different product page with the same basic script but different options, they all have options selected instead of starting at the normal starting point. The only way I can clear it is to actually close the page and start over. None of this is your fault and I realize it is turning into a more complex problem. I am open to ideas that are fair for both of us.

Christianto comments:

Maybe we can try to pass the data to url, when user click "print" button, so it won't use cookie,
and instead of open the print page at same window, we open it on new popup window,
so user can close it without losing original selected option..

please try this,
replace wordpress-print-this-section.php with [[LINK href="https://www.dropbox.com/s/nxpdy61qdycdtqb/wordpress-print-this-section.php"]]this edited file[[/LINK]]





elsprod comments:

That is perfect! Works like a charm. Thank you so much.

2013-02-06

Naveen Chand answers:

Please post the code that is generating the form and also tell us where this code is placed - in a template file or inside page content. I would like to attempt to send the values selected to the same page itself using GET variables and then collect them in a function that executes your print shortcode. The only limitation in this model would be that the page will be reloaded but you could get the desired outcome plus we can also ensure that filled-in value remain intact.

elsprod comments:

Here is the code from the page I showed as an example. I am using this same basic structure on several pages with different drop downs based on the product type.

<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="quoteCB.js"></script>

[print_this]<br />QTY  <select id="qty">
<option value="50">50</option>
<option value="100">100</option>
<option value="250">250</option>
<option value="500">500</option>
</select><br />

Disc Type  <select id="quote1">
<option value=""></option>
<option value="1">CD</option>
<option value="2">DVD</option>
<option value="3">Blu-ray</option>
</select><br />

Disc Imprint Type  <select id="quote2">
<option value=""></option>
<option value="1">Mono Black</option>
<option value="2">Mono Red</option>
<option value="3">Mono Blue</option>
<option value="4">Photo Quality B&amp;W</option>
<option value="5">Photo Quality Color</option>
</select><br />

Package Type  <select id="quote3">
<option value=""></option>
<option value="1">Two Panel Cardboard Sleeve</option>
<option value="2">Four Panel Eco-Wallet</option>
<option value="3">Six Panel Eco-Wallet</option>
<option value="4">Four Panel Digi-Pack</option>
<option value="5">Four Panel Digi-Pack Tall</option>
<option value="6">Six Panel Digi-Pack</option>
</select><br />

Shrinkwrap  <select id="quote4">
<option value=""></option>
<option value="1">Yes Shrinkwrap</option>
<option value="2">No Shrinkwrap</option>
</select>
<div id="quoteTotal">$0.00</div>SUB-TOTAL
<br />
<br /><br /><div>Add UPS Ground shipping and handling  (within 48 states), as follows:<br />(Hawaii and Alaska call for quote)<br /><br /><table border="0" style="border: 0px solid #000000;"><tbody><tr><td style="border: 1px solid #000000;">Item</td><td style="border: 1px solid #000000;">50qty </td><td style="border: 1px solid #000000;">100 qty </td><td style="border: 1px solid #000000;">250 qty </td><td style="border: 1px solid #000000;">500 qty </td></tr><tr><td style="border: 1px solid #000000;">Cardboard Sleeve </td><td style="border: 1px solid #000000;">$13.00</td><td style="border: 1px solid #000000;">$20.00</td><td style="border: 1px solid #000000;">$45.00</td><td style="border: 1px solid #000000;">$75.00</td></tr><tr><td style="border: 1px solid #000000;">Eco-wallet</td><td style="border: 1px solid #000000;">$15.00</td><td style="border: 1px solid #000000;">$22.00</td><td style="border: 1px solid #000000;">$55.00</td><td style="border: 1px solid #000000;">$90.00</td></tr><tr><td style="border: 1px solid #000000;">Digi-Pack</td><td style="border: 1px solid #000000;">$20.00</td><td style="border: 1px solid #000000;">$25.00</td><td style="border: 1px solid #000000;">$70.00</td><td style="border: 1px solid #000000;">$125.00</td></tr></tbody></table><p><span style="font-size: 16px;">Print this page from your browser print button. Then click the <a href="http://localhost/wordpress/wp-content/uploads/ELS-Productions-Order-Form.pdf" target="_blank">Order Form</a> Link and fill out the order form and print it. Send both pages (this page and the order form) in with your master disc and artwork.</span><br />[/print_this]</p></div>