Create a jQuery print button WordPress shortcode

print button with jQuery

Age of Article Warning:
This article was originally published 41 months ago. The information, tips and techniques explained may outdated. Examples shown on this page may no longer work. Please consider this when viewing the below content.

print button with jQuery
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 a nice copy of this page for reference

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
        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() {

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) {
        '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>
    $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: Optional
It’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.

Filed under: WordPressTagged with: ,


  1. Hi! Thank you for the interesting instructions! Tell me please, how to make sure that the print could not display an entire page and sidebar, but only a single region of the page? what code you should use in this case? Thank you.

    • Hi Artem,
      If you just want to print the main content of your page, and not the sidebar and footer, then you can simply use a print css stylesheet to control what is printed. If you are looking for something that gives you greater flexibility on a page by page basis then you could try a jQuery plugin like (though I haven’t tested this plugin before)

Comments are closed for this article!