[Resolved] How to enqueue a stand-alone @media print css file

[Whelan]

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.

GeneratePress 2.2.2

GP Premium 1.7.8

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Whelan]

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?

[Whelan]

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; }
}

[Tom]

Try this: <link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Whelan]

No that doesn’t work. I assume I need to select execute php?

[Tom]

Looks like it’s working: http://prntscr.com/mu7af9

It’s loading correctly 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Whelan]

Yes, working now. Thanks (sorry it took me so long to reply).

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts