[Resolved] wp_head hook appears inside HTML body

Home › Forums › Support › wp_head hook appears inside HTML body

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 22, 2020 at 5:00 pm #1250104
    Dean

    Hi a;;,

    I have a custom style sheet (dogwatch.css) that I want to appear after all other css. I am using a standard GPP theme, not a child/parent theme set up. I can get my custom stylesheet to appear using the snippets plugin, with this line of code in a snippet, with the snippet priority input set to ’10’:

    wp_enqueue_style( 'dogwatch', get_template_directory_uri() . '/dogwatch.css',array(),'1.1','all');

    In this case the dogwatch stylesheet shows up on line 31:

    <link rel='stylesheet' id='dogwatch-css' href='https://dwdev.local/wp-content/themes/generatepress/dogwatch.css?ver=1.1' type='text/css' media='all' />

    and the theme stylesheet shows up on line 52:

    <link rel='stylesheet' id='generate-style-css' href='https://dwdev.local/wp-content/themes/generatepress/style.min.css?ver=2.4.2' type='text/css' media='all' />

    Changing the snippet priority (0, 10, 99 etc) doesn’t alter the order.

    If I change my snippet to wrap it inside a function it now comes after the theme css, BUT it’s at the bottom of the main page (inside the <body> element):

    add_action( 'wp_head','dw_custom_css' );  
function dw_custom_css() { 
    wp_enqueue_style( 'dogwatch', get_template_directory_uri() . '/dogwatch.css');
 }

    I thought that specifying wp_head as the add_action parameter would place my css into the <head>, so I wonder why it didn’t do that?

    I tried using a GPP hook element to do this, again specifying wp_head and ticking execute php but this broke my site so I guess I don’t understand how hooks are supposed to work.

    My question is (finally!) – how do I inject my custom css into the header of my site and make sure it appears after the theme css?

    My website is not live currently and I’m using local by flywheel to provide a “live link” URL – not sure how permanent the URL will be so please let me know if you need me to refresh it.

    Cheers
    Dean

    April 23, 2020 at 4:40 am #1250988
    David
    Staff
    Customer Support

    Hi there,

    try this method:

    add_action( 'wp_enqueue_scripts', function() {
    // Add your wp_enqueue_style here
}, 999 );

    Documentation: http://docs.generatepress.com/
    Adding CSS: http://docs.generatepress.com/article/adding-css/

    April 23, 2020 at 4:03 pm #1252294
    Dean

    Brilliant! That worked, thank you.

    April 24, 2020 at 1:16 am #1252759
    David
    Staff
    Customer Support

    You’re welcome

    Documentation: http://docs.generatepress.com/
    Adding CSS: http://docs.generatepress.com/article/adding-css/

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.