Print stylesheets are a powerful, often underutilized feature of CSS that allows developers to control how their web content appears when users choose to print a page. Using the @media print you can create styles that apply only when a document is being printed, hiding unnecessary layout elements, adjusting typography for legibility, and formatting content for paper.
One effective strategy when crafting a print stylesheet is to begin by hiding everything on the page with a universal selector:
@media print {
* {
display: none !important;
}
}From there, you selectively reveal only the parts of the page you want printed, such as an <article> element or a .print-area class. This approach ensures a clean and focused print output, free of headers, navigation bars, sidebars, and other on-screen clutter.
To make this process easy and accessible to WordPress site administrators, the Custom Print Stylesheet plugin below provides a full-featured interface for managing print-specific CSS. It includes:
- A settings page under Settings > Print CSS, where administrators can edit the active print stylesheet.
- A Reset to Default CSS button that restores a clean baseline style targeting only the
<article>element. - A Live Preview that renders the most recent published post using the current print styles for quick visual feedback.
- Built-in CSS rules to automatically hide Google Ads and other commonly named ad containers during printing, so the output remains clean and professional.
This plugin is ideal for bloggers, publishers, and anyone looking to offer a well-formatted printable version of their content without unnecessary extras. You can install it like any other plugin, modify the print CSS to suit your site’s structure, and give users a better printing experience in minutes.
<?php
/*
Plugin Name: Custom Print Stylesheet
Description: Allows users to edit a print stylesheet that targets the <article> element. Includes a reset button to restore default CSS and a live preview of the latest post.
Version: 1.0
Author: Douglas Karr
Author URI: https://dknewmedia.com
*/
add_action('admin_menu', 'custom_print_css_menu');
add_action('admin_init', 'custom_print_css_settings');
add_action('wp_head', 'custom_print_css_enqueue', 999);
function custom_print_css_menu() {
add_options_page(
'Custom Print CSS',
'Print CSS',
'manage_options',
'custom-print-css',
'custom_print_css_settings_page'
);
}
function custom_print_css_settings() {
register_setting('custom_print_css_options', 'custom_print_css');
}
function custom_print_css_settings_page() {
if (!current_user_can('manage_options')) return;
// Reset logic
if (isset($_POST['reset_print_css'])) {
check_admin_referer('custom_print_css_reset');
update_option('custom_print_css', custom_print_css_default());
echo '<div class="updated"><p>Print CSS has been reset to default.</p></div>';
}
$css = get_option('custom_print_css', custom_print_css_default());
?>
<div class="wrap">
<h1>Custom Print Stylesheet</h1>
<form method="post" action="options.php">
<?php
settings_fields('custom_print_css_options');
?>
<textarea name="custom_print_css" rows="20" style="width:100%; font-family: monospace;"><?php echo esc_textarea($css); ?></textarea>
<?php submit_button('Save CSS'); ?>
</form>
<form method="post">
<?php wp_nonce_field('custom_print_css_reset'); ?>
<?php submit_button('Reset to Default CSS', 'delete', 'reset_print_css'); ?>
</form>
<h2>Live Preview of Latest Post</h2>
<p>This is how your current print CSS affects the most recent post:</p>
<div id="print-css-preview" style="border: 1px solid #ccc; padding: 1em; margin-top: 1em;">
<style>
<?php echo $css; ?>
</style>
<?php
$latest_post = get_posts([
'numberposts' => 1,
'post_status' => 'publish'
]);
if (!empty($latest_post)) {
$post = $latest_post[0];
echo '<article>';
echo '<h2>' . esc_html(get_the_title($post)) . '</h2>';
echo apply_filters('the_content', $post->post_content);
echo '</article>';
} else {
echo '<p>No published posts found.</p>';
}
?>
</div>
</div>
<?php
}
function custom_print_css_enqueue() {
$css = get_option('custom_print_css', custom_print_css_default());
echo "<style type='text/css' media='print'>\n" . $css . "\n</style>";
}
function custom_print_css_default() {
return <<<EOD
@media print {
* {
display: none !important;
}
article,
article * {
display: revert !important;
}
html, body {
margin: 0;
padding: 0;
background: white;
color: black;
font: 12pt serif;
}
article {
margin: 1in;
}
/* Hide Google Ads and common ad structures */
ins.adsbygoogle,
.adsbygoogle,
.adsbygoogle iframe,
iframe[src*="ads"],
iframe[src*="doubleclick.net"],
div[id^="google_ads"],
div[class*="ad-"],
div[class*="adsbygoogle"],
.ad-container,
.ad-slot,
.ad-banner,
[id*="ad"],
[class*="ad"] {
display: none !important;
visibility: hidden !important;
}
}
EOD;
}How to Install This Plugin Manually
To install the Custom Print Stylesheet plugin on your WordPress site manually, follow these steps:
- Create the Plugin File:
- Open a plain text editor such as VS Code, Sublime Text, or Notepad.
- Paste the entire plugin code into the file.
- Save the file as
custom-print-css.php.
- Create a Plugin Directory:
- On your computer, create a folder named
custom-print-css. - Move the
custom-print-css.phpfile into this folder.
- On your computer, create a folder named
- Upload the Plugin to WordPress:
- Use an FTP client or your hosting file manager to connect to your WordPress site.
- Navigate to the
/wp-content/plugins/directory. - Upload the entire
custom-print-cssfolder into thepluginsdirectory.
- Activate the Plugin:
- Log in to your WordPress admin dashboard.
- Go to Plugins > Installed Plugins.
- Find Custom Print Stylesheet in the list and click Activate.
- Edit Your Print CSS:
- After activation, go to Settings > Print CSS in your admin menu.
- Edit the default print styles or paste in your own.
- Click Save CSS to apply your changes.
- Use the built-in live preview to see how the most recent post will print.
- Optional: Reset to Default CSS
- If you want to revert to the original CSS that only prints the
<article>and hides ads, use the Reset to Default CSS button at any time.
- If you want to revert to the original CSS that only prints the
This plugin does not require any third-party dependencies or configuration. It works out of the box and ensures your content is optimized for printing—while stripping away elements like ads, navigation, and footers that don’t belong on the printed page.
Related Martech Zone Content
