Archived topic
How to enqueue a stand-alone @media print css file
8 replies · Started by Whelan on March 5, 2019
Hi
I've created a child theme and use the GP Premium hooks.
I also use bootstrap 3.0 css
My site is getting quite css heavy and script heavy.
I now want to specify some print styles and think it's best to put these in a separate css file that's only used when required.
I tried to follow this codex https://codex.wordpress.org/Styling_for_Print
It says to "insert this code to create a link in the head section of my header.php template file"
<link rel="stylesheet" type="text/css" media="print"
href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />Is this the best way to do it? Or should I use the wp_head hook? I tried inserting the code in the wp_head text box, but I don't think it worked am a little out of my depth when it comes to WP hooks and PHP.
The wp_head hook is definitely the way to go.
That code assumes there's a print.css file inside the root directory of your child theme.
Thanks for your reply. Yes, that's what I've done but it's not working.
I've uploaded print.css to the root directory of the child them.
I've inserted the code into wp_head and execute php is checked.
It's hosted with GoDadddy 'managed wp', so I used their 'flush cache' tool and cleared the cache on my browser - not working.
----
To test my print.css, I edited header.php and added to the child theme. This method is working but I'd prefer to use wp_head.
----
Can you see anything I'm doing wrong?
This is my print.css:
/* Print Styles */
@media print {
body { background:white; color:black; margin:0; }
#site-navigation, #sidebar {display:none; }
#commentform,#respond { display:none; }
#content, #comments { display:block; }
#footer-widgets, #at-expanding-share-button { display:none; }
h1, h2, h3, h4, h5, h6 { page-break-after:avoid; page-break-inside:avoid; }
img { page-break-inside:avoid; page-break-after:avoid; }
blockquote, table, pre { page-break-inside:avoid; }
ul, ol, dl { page-break-before:avoid; }
.d-print-none, .hidden-print { display:none; }
}Try this: <link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />
No that doesn't work. I assume I need to select execute php?
Looks like it's working: http://prntscr.com/mu7af9
It's loading correctly :)
Yes, working now. Thanks (sorry it took me so long to reply).
No problem :)
