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