Creating a Custom WordPress Shortcode to Print and Download PDFs with Dynamic Backgrounds

When developing custom WordPress themes or plugins, adding functionality like printing and downloading PDFs can enhance user experience. In this guide, we’ll walk you through creating a custom shortcode that allows users to print and download PDFs directly from a button, with dynamic options like changing the button’s background color. This solution is ideal for WordPress developers who want to offer custom PDF handling without relying on third-party plugins.

Why Use a Custom Shortcode?

WordPress shortcodes are simple, flexible, and powerful. They allow you to add dynamic content or functionality into your posts, pages, or widgets by simply using a [shortcode]. Creating a custom shortcode gives you complete control over the design, functionality, and behavior of your button, avoiding potential conflicts that can arise with pre-built plugins.

What We’ll Build

We’ll create a shortcode that:

• Displays a button labeled “Print & Download PDF.”

• Opens a PDF file in a new tab, allowing the user to print or download the file.

• Accepts dynamic attributes like the PDF URL and button background color.

• Uses a unique ID for each button to prevent conflicts when multiple instances of the shortcode are used on a single page.

Step-by-Step Guide

Step 1: Adding the Shortcode to functions.php

First, you’ll need to add a custom shortcode function to your theme’s functions.php file. The following code registers a shortcode that outputs a button to print and download the PDF:

function print_pdf_button_shortcode($atts) {
    // Extract attributes passed to the shortcode
    $atts = shortcode_atts(
        array(
            'pdf_url'  => '',        // Default PDF URL is empty
            'bg_color' => '#0073aa', // Default background color (WordPress blue)
        ),
        $atts,
        'print_pdf_button'
    );

    // Ensure a PDF URL is provided
    if (!$atts['pdf_url']) {
        return 'No PDF URL provided!';
    }

    // Generate a unique ID for each button
    $unique_id = uniqid('printButton_');

    // HTML and JavaScript for the button
    ob_start(); ?>
    
    <button id="<?php echo esc_attr($unique_id); ?>" style="cursor: pointer; padding: 10px 20px; background-color: <?php echo esc_attr($atts['bg_color']); ?>; color: #fff; border: none; border-radius: 5px;">
        Print & Download PDF
    </button>

    <script>
        document.getElementById("<?php echo esc_js($unique_id); ?>").addEventListener("click", function() {
            const pdfUrl = "<?php echo esc_url($atts['pdf_url']); ?>";
            const win = window.open(pdfUrl, "_blank");
            win.focus();
            win.print();
        });
    </script>

    <?php
    return ob_get_clean();
}
add_shortcode('print_pdf_button', 'print_pdf_button_shortcode');

Step 2: How the Code Works

• Shortcode Attributes:

• pdf_url: The URL of the PDF file you want to print and download.

• bg_color: The background color of the button (defaults to WordPress’ signature blue #0073aa).

• Dynamic ID:

Each button gets a unique ID using uniqid(‘printButton_’), ensuring there’s no conflict if you add multiple buttons on the same page.

• JavaScript:

A click event listener opens the specified PDF in a new browser tab. The new tab will automatically trigger the browser’s print dialog, allowing the user to print the document directly.

Step 3: Using the Shortcode

Once you’ve added the shortcode function to your functions.php file, you can use the shortcode in any post or page. For example:

[print_pdf_button pdf_url="https://your-site.com/wp-content/uploads/your-pdf-file.pdf" bg_color="#FF5733"]

This shortcode will generate a button with the background color #FF5733 (orange) that prints the PDF located at the provided URL.

Step 4: Adding Multiple Buttons

Thanks to the dynamic ID generation, you can now add multiple buttons on the same page without any issues. Each button will operate independently:

[print_pdf_button pdf_url="https://your-site.com/wp-content/uploads/file1.pdf" bg_color="#FF5733"]
[print_pdf_button pdf_url="https://your-site.com/wp-content/uploads/file2.pdf" bg_color="#28a745"]

This will create two buttons, each with a different background color and PDF file to print and download.

Benefits for WordPress Developers

1. Customization: This shortcode gives you control over the button’s appearance, allowing you to set custom background colors using simple shortcode attributes.

2. Reusability: You can reuse the shortcode throughout your site, making it an efficient way to handle PDF downloads and prints.

3. No Plugin Dependency: By creating a custom solution, you eliminate the need for third-party plugins, reducing potential security vulnerabilities and performance issues.

4. Improved User Experience: Providing an easy-to-use button for printing and downloading PDFs directly from your site enhances usability, especially for content-heavy or document-centric websites.

Conclusion

Custom WordPress shortcodes offer a great way to enhance the functionality of your website while keeping things lightweight and flexible. By implementing this shortcode, you give users the ability to print and download PDF files directly from your site, all while offering dynamic customization options.

This solution is ideal for WordPress developers looking for a simple, clean, and effective way to handle PDF printing without bloating their sites with unnecessary plugins.