I wanted to allow a PDF download on my blog. Unfortunately this turned out to be complicated for multiple problems including WP and browser caching, CSS failure and mPDF misdirection. Here are the solutions.

Issue 1: If you are editing the print.css but the browser shows the old version: Comment out or delete the reference to parent in child css

/*
Theme Name: Twenty Twenty Child 1
Theme URI: http://wordpress.org/themes/twentytwenty
@import url('../twentytwenty/style.css');
*/

and include versioning in header.php

function my_theme_enqueue_styles() { 
  wp_enqueue_style( 'twentyfourteen', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'twentyfourteen-child1', get_stylesheet_directory_uri() . '/style.css',  array(), filemtime(get_template_directory() . '/style.css'), false );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

 

Issue 2: css editing is applied but printing is still not correctly formatted, possible due to higher specificity of formatting instructions in the parent theme.

Solution: This is a bit tricky as it needs try and error to find the offending element. Chrome can show the print version in the browser as shown on this SO thread

Then add the important flag to the specific css rule..

@media print {
   .myelement1 { display: none !important; }
}

 

Issue 3: mPDF pulls the screen not the print version. Solution: Create an own mpdf media tag.

@media mpdf {
  #sidebar, #header {
    display:none !important;
  }
  blockquote, table, pre {
    page-break-inside:avoid !important;
    font-size: 0.7em  !important;
  }
}

CC-BY-NC