I’m adding some inline styles to the
file_get_contents(some-style.css) and the
wp_head hook. My relative image paths don’t work once they are added to the head, although they do work if I just use
<link> to load the file instead.
'/assets/imgs/my_image.jpg' '../assets/imgs/my_image.jpg' 'assets/imgs/my_image.jpg'
The only solution I have to this issue is doing a search and replace on the results of
file_get_contents and add the
template_directory_uri path to it. I would rather not have to do that.
I also tried adding a base url as the theme directory, which solved the issue, but then I create other issues (eg. hashes won’t work).
I am also aware of the function
wp_add_inline_style, but that requires another style to have already been loaded, which is what I am trying to avoid.
Is there a better solution to what I am trying to achieve? Or is there a path I can use?
If they are inline, your image paths should be
/wp-content/themes/theme_name/ and then whatever the directory is in.
Since you are already loading them via
file_get_contents(), why not do a search & replace and use the full URL for them? With proper caching, this shouldn’t make any impact on the load time itself.
The usual way is to enqueue your styles via
wp_enqueue_style(). Plugins like W3 Total Cache or WP-Optimize offer solutions to merge all those loaded styles – this will only work if you properly enqueue them and not if you inline them.