wp_head hook appears inside HTML body

This topic has 3 replies, 2 voices, and was last updated 6 months ago by David.

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.