WordPress admin print styles

One of our clients, a local live music venue, wants to use WordPress as more then just their CMS – by adding some custom reports and back-end functionality to Event Organiser, we’ve been able to turn WordPress into a complete venue management solution.

It’s useful for them to be able to print out reports (staffing reports, guest lists and the like) for the evening. Print styles to the rescue!

First, we’ll need to add a bit to our functions.php to enqueue additional admin styles:

function load_custom_admin_styles() {
  wp_register_style( 'admin-styles', get_stylesheet_directory_uri() . '/admin-styles.css', false, '1.0.0' );
  wp_enqueue_style( 'admin-styles' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_admin_styles' );

You can also use the same hook to enqueue admin JavaScript.

Now drop the following in the base of your theme in admin-styles.css:

/* WordPress admin print styles */

@media print {
  #adminmenuwrap, #adminmenuback, #wpadminbar{
    /* Hide WordPress menus*/
    display: none;
  }
  #wpcontent{
    /* Drop the left-hand margin on the content wrapper*/
    margin: 0;
  }
  body{
    /* For Chrome and Safari, force display background colours */
    -webkit-print-color-adjust:exact;
  }
  @page
    /* Remove print header and footer – Chrome only */
  {
    margin: 0;
  }
}