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

Home Forums Support How to enqueue a stand-alone @media print css file

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #829745
    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
    #830050
    Tom
    Lead Developer
    Lead Developer

    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.

    #830210
    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?

    #830215
    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; }
    }
    #830801
    Tom
    Lead Developer
    Lead Developer

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

    #830803
    Whelan

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

    #830813
    Tom
    Lead Developer
    Lead Developer

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

    It’s loading correctly 🙂

    #1005046
    Whelan

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

    #1005241
    Tom
    Lead Developer
    Lead Developer
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.