For this, you’ll actually want to utilize the wp_enqueue_scripts action instead of wp_head.
wp_enqueue_scripts is technically the proper way to add scripts and styles to your site. This action allows us to both register scripts and styles for later use (which is what we want here) and allows us to output scripts and styles to our page without hard coding. Also this matters because wp_head runs before the_content which means that you won’t be able to modify the head once your code gets to the_content.
First let’s register our style using the wp_enqueue_scripts action.
/**
* Register the gallery stylesheet for later use if our content contains the gallery shortcode.
*/
function enqueue_gallery_style(){
wp_register_style('gallery_style', get_stylesheet_directory_uri() . '/assets/css/gallery.css');
}
add_action('wp_enqueue_scripts', 'enqueue_gallery_style'); // register with the wp_enqueue_scripts action
We register the script using the wp_register_style function. In this case we’ll make use of the first two parameters. The first is the name we want to give to the style so we can use it later. You can name it whatever you want. Here I’ve named it “gallery_style”. The second parameter is the url path to the stylesheet in your theme or plugin (make sure to update based on your specific path). Here are more details on wp_register_style
Now we can add another the_content filter in addition to your image_posts filter to perform the shortcode conditional check. Inside the check, if we find it, then we run the wp_enqueue_style function to enqueue our gallery style and add it to that specific page.
/**
* This function is used to check the_content to see if it contains any shortcodes
*
* @param $content
*
* @return string
*/
function shortcode_check( $content ) {
if ( has_shortcode( $content, 'gallery' ) ) {
wp_enqueue_style( 'gallery_style' ); // this is the same name we gave our gallery style when we registered it.
}
return $content; // Make sure you still return your content or else nothing will display.
}
add_filter( 'the_content', 'shortcode_check' );
More info on wp_enqueue_style
Method if you are trying to add admin-generated styles (eg. from customizer or other settings) that won’t have a physical file.
If you need to output styles that are generated via the admin (ie, colors) you can utilize the wp_add_inline_style function.
This function will allow you to add on styles to a registered stylesheet.
So in the case of our already registered gallery.css file above, we can add
wp_add_inline_style( 'gallery_style', $user_css ); and it will add that as an inline style immediately after registered stylesheet.
Here $user_css would be the styles as a string without the <style> wrapper.
So in your case, you could register a stylesheet for gallery with some base styles and then use this function to add styles that would override those base styles.
function shortcode_check( $content ) {
if ( has_shortcode( $content, 'gallery' ) ) {
wp_enqueue_style('gallery_style');
wp_add_inline_style( 'gallery_style', $user_css ); // this will add our inline styles. Make sure to sanitize!!!
}
return $content; // Make sure you still return your content or else nothing will display.
}
More on wp_add_inline_style