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

Question

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...

Answer 1

Relative paths in CSS are relative to the stylesheet file. So if you have this structure:

- style.css
- images/
-- logo.png
-- background.jpg

Then the paths in CSS for the images would be url(images/logo.png) and url(images/background.jpg). This is because the relative paths in CSS are relative to the stylesheet itself, not the main domain (if you want that, start with a slash: url(/images/logo.png)).

None of this is affected by how you choose to enqueue the file.

Where you might be going wrong is that you mentioned a parent theme. If you're trying to load an image from the parent theme, a relative path like the above example isn't going to work. CSS has no knowledge or concept of a parent/child theme relationship.

So if your directory structure looks like this:

- parent-theme/
-- images/
--- logo.png
- child-theme/
-- style.css
-- images/
--- background.jpg

So if you want to go up a directory and then into the parent directory your path needs to look be url(../parent-theme/images/logo.png).

Answer 2

You should be using get_stylesheet_directory_uri(). This is the same function as get_template_directory_uri() but it uses the directory of the child theme.

as an example:

get_template_directory_uri().'/logos/coollogo.png';

will pull the logo from the logos folder in your child theme.

Answer 3

I think I know what the answer is. I just clicked through from the source code to my stylesheet, and found that the server is caching an old version in which I had mistakenly written url(/images/logo.png) with the initial slash taking me to the root.

Sorry everyone, another question about CSS paths that comes down to a silly peripheral issue.