Print All Custom Post Type Button WordPress
- SOLVED
I've got a client that is using a real estate theme with a custom post type called property. They have listing pages (archives) that are paginated. We're using the PrintFriendly PDF plugin to print listings and content on other pages, but it is limited to the content displayed on a page (you have to manually wrap a section of content with an element with a specific class "pf-content").
They would like to have a button that they could place anywhere that would allow them to print all the property listings. This would be image, title, custom price field, excerpt, et cetera.
What I need is a way to condense this function into a single button that will launch to printfriendly interface with this content. I figured it's an ajax/javascript combination to grab the content and place it into a container (invisible to the user) and launch the print interface.
Obviously, the easier way would be to have it open a new page with all the listings and auto-load the print interface, but that's one extra step than they would prefer.
Answers (3)
timDesain Nanang answers:
what theme is being used?
Joshua Nelson comments:
It's a theme called realto from themeforest :-/
timDesain Nanang comments:
how about using this plugin: https://github.com/posabsolute/jQuery-printPage-plugin
screenshot:
- print button using shortcode placed in widget
[[LINK href="http://i.imgur.com/6gINP84.png"]]http://i.imgur.com/6gINP84.png[[/LINK]]
- spooling
[[LINK href="http://i.imgur.com/NLhfj3T.png"]]http://i.imgur.com/NLhfj3T.png[[/LINK]]
- printing interface (chrome) (71 pages => note: using 49 posts with loop 20 time = 980 posts)
http://i.imgur.com/d9tRJeE.png
the idea:
add_action('wp_enqueue_scripts', 'wpq_print_enqueue', 1000);
function wpq_print_enqueue(){
wp_enqueue_script('printPage', 'http://www.position-absolute.com/creation/print/jquery.printPage.js', array('jquery'), '1');
}
add_action('wp_footer', 'wpq_print_footer');
function wpq_print_footer(){
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".printall").printPage();
});
</script>
<?php
}
add_action('wp_head', 'wpq_print_css', 9999);
function wpq_print_css() {
?>
<style type="text/css" media="screen">
.printall{display:block;text-align:center;font-size:24px;text-transform:uppercase;background-color:#069;color:#fff !important;text-decoration:none;}
</style>
<?php
}
add_shortcode('print_all', 'wpq_print_sc');
function wpq_print_sc() {
$output = '<a href="'.home_url('?print=all').'" class="printall">Print All Posts</a>';
return $output;
}
add_action('init', 'wpq_print_init');
function wpq_print_init() {
global $wpdb;
if(!isset($_GET['print'])) return;
if(isset($_GET['print']) AND $_GET['print']<>'all') return;
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title>Print All Properties</title>
<style type="text/css" media="print">
body{font-family:verdana,arial,sans-serif;font-size:12px;line-height:1.2;}
.print-area{width:1368px;}
.property-item{margin:10px 0}
.property-title{margin:15px 0;font-size:16px;font-weight:bold;}
.property-thumb{margin:15px 15px 0 0;float:left;}
.property-excerpt{margin:15px 0;font-size:12px;}
.property-price{margin:15px 0;font-size:24px;}
.property-for{margin:15px 0;font-size:24px;}
.clear{clear:both}
</style>
</head>
<body <?php body_class(); ?>>
<h1>Print All Properties</h1>
<div class="print-area">
<?php
for($i=0;$i<20;$i++) : // performance test only
//--------------------------------------------
$args = array(
'post_type' => 'post',
'posts_per_page' => '-1'
);
$wpq = new WP_Query( $args );
while ( $wpq->have_posts() ) : $wpq->the_post();
$prize = get_post_meta( get_the_ID(), 'prize', true );
$purpose = get_post_meta( get_the_ID(), 'purpose', true );
echo '<div class="property-item">';
echo '<div class="property-title">'.get_the_title().'</div>';
the_post_thumbnail('thumbnail', array('class' => 'property-thumb'));
echo '<div class="property-excerpt">'.get_the_excerpt().'</div>';
echo '<div class="property-price">'.$prize.'</div>';
echo '<div class="property-for">'.$purpose.'</div>';
echo '<br class="clear" />';
echo '</div>';
endwhile;
//--------------------------------------------
endfor;
?>
</div>
</body>
</html>
<?php
die();
}
timDesain Nanang comments:
i mean 67 posts x 20 loop = 1340 items
since the query without arg post_status
timDesain Nanang comments:
the print button can be converted to a form that have options:
- category/ taxonomy,
- for sale/rent,
- price range,
etc
Joshua Nelson comments:
I'll be around later today and able to test this out, thanks Tim, I'll let you know if it works
timDesain Nanang comments:
you can try the demo that i gave you yesterday
then, try the code
hopefully this will work as you need
Joshua Nelson comments:
Tim,
This works well, but I'd really love to use the prtinfriendly script, because that window also allows for pdf and email options, plus we're using it elsewhere. That said, this might be good for this purpose. I'll see what I can put together for the client and if they have feedback. I know they didn't like the $40/yr license for the printfriendly option.
Thanks!
Romel Apuya answers:
Can you give link to the site??
Joshua Nelson comments:
I cannot, it's on a staging server and I'm sub-contracted for the WordPress development. Ajax/java is not my strong suit (yet).
Basically, I need a java/ajax function that initiates on the button click, loads all the desired formatted content (into a cache or into a hidden div on the page?), and initiates the printfriendly screen (wordpress.org/plugins/printfriendly/).
Romel Apuya comments:
Are you placing the print button manually??
or can you sent me in PM the wp-login details.
Romel Apuya comments:
Can you give the code of single-property.php??
or here's the idea.
On your single-property.php
you need to query all the posts on the custom post type property.
put it in a div hidden inside the div clearfix pf-content.
on the query you need to exclude the current property you are in.
code like this
<?php
$currentID = get_the_ID();
$my_query = new WP_Query( array('post_type' => 'property', 'showposts' => '-1', 'post__not_in' => array($currentID)));
while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<h2><?php the_title() ?></h2>
<?php the_content(); ?>
<?php endwhile; ?>
but ofcourse you need to style the post according to the needs of the print friendly plugin
Joshua Nelson comments:
The issue with that is that it loads all the posts whenever that page loads, which would big down page load times. It needs to load the content after the button is pushed. Nothing really special in the single-property template, I'll post the code shortly.
Romel Apuya comments:
hi,
Install this plugin
https://wordpress.org/plugins/ajax-load-more/
and after the loop in single-property.php
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; ?>
<?php //wp_link_pages(); ?>
<?php endif; ?>
add this
<div style="display:none;">
<?php
$currentID = get_the_ID();
echo do_shortcode('[ajax_load_more post_type="property" exclude="'.$currentID.'" repeater="default" posts_per_page="-1" transition="fade" button_label="Older Posts"]');
?>
</div>
you might need to configure the plugin to suit or wrap the loaded post in pf-content class
Joshua Nelson comments:
This is close, but it will actually cause it to load these posts upon scrolling down, not pressing a button. Further, I need the button to be visible and not only load the posts on click, but then load the printfriendly window. Also, I don't need it on the single page, I need it on teh archive - so no need to exclude a post.
It needs to work like this: 1. Press the Print All listings button. 2. Ajax loads post content into a hidden div. 3. Print window pops up with content.
This might be the wrong forum for an answer, I am really looking for a java/ajax solution. I can handle the php/WordPress aspects.
Romel Apuya comments:
<div id="holder" style="display:none;">
<?php
echo do_shortcode('[ajax_load_more post_type="property" repeater="default" posts_per_page="-1" transition="fade" button_label="Older Posts"]');
?>
</div>
you need to add trigger event to the load more post
so no need to scroll
<script type="text/javascript">
$('#holder').find('#load-more').trigger('click');
</script>
Joshua Nelson comments:
Romel,
This seems like it would be a good idea, but it doesn't actually work in practice. The posts still load on scrolling to the button.
Sébastien | French WordpressDesigner answers:
add class="print-only" to the parent content element you need print
see : [[LINK href="http://support.printfriendly.com/customer/portal/articles/526027-custom-commands"]]this documentation[[/LINK]]
and [[LINK href="http://support.printfriendly.com/customer/portal/articles/1364607-page-content-not-selected"]]this one[[/LINK]]
Joshua Nelson comments:
Yes, I know how to use printfriendly. I'm trying to expand its use to something different.
Sébastien | French WordpressDesigner comments:
you can create a page specific with all posts (as you said in your question). In this page, you add a script. "Onload" this script click on the printfriendly button (trigger) and close the page. Simple.
Joshua Nelson comments:
Right, but that opens a new page. I want a solution that achieves this in the same window without the new page load (hence the ajax).
Sébastien | French WordpressDesigner comments:
same process but load your page in a frame (with height=0)