Even though so much is online these days, from email to shopping, sometimes we still like to read stuff on paper. Whether it's a e-guide, or a recipe, or a short book, or even a blog post, it is good to offer your readers the option to print a copy so that they can refer to it later.On this website I offer a lot of instructional posts, and people print a copy to read when following the steps. So just recently I have added a simple little print button so that people know they can print out the page. This tutorial will show you the procedure I've used to implement the print button, so you are welcome to do the same on your website. (note that you may want to make sure that your website pages print nicely, so also add a print stylesheet to your website if you don't already have one)This is what the button looks like:[print-me-button]
How to add a jQuery print button to your web page with a WordPress shortcode
Step 1:Create a javascript file called "printthisbutton.js" and add the button script below, then upload to your childtheme (I like to keep the scripts together and upload into a folder called "js" inside the childtheme folder. This way if I change theme's in the future, I can simply transfer that folder to the new childtheme)/* Print this page script v 1.0.0 */
jQuery(document).ready(function($) {
//setup click function for button target the image class
$('img.printme').click(function(){
window.print();
return false;
});
});
Step 2:Now we need our website to load the javascript file, by enqueue in the footer. Also we only want it to load the script on a page that has our print button. So we'll register the script ready for enqueueing.Add the following function into your childtheme's functions.php file. (If you didn't load your printthisbutton.js into a folder called "js" inside your childtheme folder, then amend the path to your file accordingly)//register script for print button
function printthispagebutton_script() {
wp_register_script('printthispagebutton',get_stylesheet_directory_uri().'/js/printthisbutton.js',array(jquery),'1.0.0',true);
}
add_action('wp_enqueue_scripts','printthispagebutton_script');
Step 3:Now let's create a shortcode so we can add the print button onto pages and posts, where ever you like. Add the following function into your childtheme's functions.php file also. You can change the default buttontext to suit your website. Also you will need to upload a print icon / image to your media library, then amend the url path for "img src".
//a print button shortcode
function add_a_simple_print_button_sc($atts, $content = null) {
wp_enqueue_script('printthispagebutton');
extract(shortcode_atts(array(
'buttontext' => 'Print a nice copy of this page for reference',
), $atts));
ob_start(); ?>
<div class="printthispagebutton">
<p><img src="/wp-content/uploads/2014/11/printer-button.png" width="32px" height="32px" class="printme"/>
<?php echo $buttontext; ?></p>
</div><?php
$printmebuttonoutput = ob_get_clean();
return $printmebuttonoutput;
}
add_shortcode('print-me-button', 'add_a_simple_print_button_sc');
Step 5:Now you can test out your shortcode. Simply use [print-me-button] or if you want to customise the text, then use [print-me-button buttontext="add a print message" ]
Step 6: OptionalIt's probably a good idea to try and remove the button from displaying on most mobile devices and tablets, which don't use the print function like a computer. You can do this by hiding the button with css. Add the following line of css to your responsive css for smaller devices..printthispagebutton { display: none; }
So there's a simple tutorial for adding a nice print button to your WordPress page. Enjoy.[social-icon-message st_type="evernote" message="Did you know you can clip this page to your Evernote?"]
Comments: