Relative file paths in CSS when linking directly (not enqueuing)

I am creating a single-page child theme, in which (apologies to the WordPress community) I am basically trying to stay out of using PHP or the WordPress API as much as possible, because I really just want to deploy a single page with its own scripts and style.

I’m having problems with relative file paths. I have gathered that when it comes to PHP pages I need to use the get_theme_file_uri() function, and that is working fine in my main PHP page (page-my-slug.php). (As a side note, I would prefer to use get_template_directory_uri() but this is giving the parent theme folder. How to get round this? [edit: this part is solved])

But what is the solution for my CSS file (eg. for images)? This page suggests I should just be able to insert relative links in there, but that’s not working for me.

I am linking my stylesheet directly in my page-my-slug.php, because I want to override the parent theme style totally, and don’t want to get into the details of enqueuing:

<link rel=”stylesheet” type=”text/css” href=”<?php echo get_stylesheet_directory_uri(); ?>/style.css”>
<!– or, for exactly the same effect… –>
<link rel=”stylesheet” type=”text/css” href=”<?php echo get_theme_file_uri(‘style.css’); ?>”>

In my style.css I am using, for example:

#ffw {
background-image: url(images/ffw.png);
}

But, when loading the page I get an error:

GET https://domain.com/images/ffw.png 404 ()

Which suggests it is looking in the root directory rather than relative to the stylesheet.

What am I doing wrong? I wonder if it has something to do with the fact that I have linked my CSS directly rather than enqueued it…

Read more here:: Relative file paths in CSS when linking directly (not enqueuing)

Leave a Reply

Your email address will not be published. Required fields are marked *