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

  • Why would you prefer to use get_template_directory_uri() over get_theme_file_uri()? Apr 16, 2018 at 1:39
  • @JacobPeattie Because I can save that as a string and append to it, rather than having to pass in my filename to the function. get_stylesheet_directory_uri() did the trick.
    – Igid
    Apr 16, 2018 at 12:42
  • So just pass the string as the argument to the function... Apr 16, 2018 at 12:43
  • That would require using a PHP tag everywhere I want to retrieve a file from the same folder. Using a function returning the directory, I can save that as a string (in JavaScript) and prepend it to all file paths.
    – Igid
    Apr 16, 2018 at 12:53

3 Answers 3


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

  • I have used url(images/logo.png), and the images folder is in my child theme directory along with my stylesheet. However, when I load the page I get the error GET https://domain.com/images/logo.png 404 () which suggests that it is navigating from the root directory. I've made sure not to start the path with a /.
    – Igid
    Apr 16, 2018 at 12:49
  • Can you update the question with the code used to enqueue the stylesheet to begin with? Apr 16, 2018 at 12:52
  • Done. As I tried to make clear originally, and as you can see now, I am linking it directly, not enqueuing it.
    – Igid
    Apr 16, 2018 at 13:00
  • Looking at that code, this is the behaviour I'd expect if the php tags there weren't echoing anything and it was being interpreted as /style.css. If you look at the link tag in the actual source, does it have the full URL, or just style.css? Apr 16, 2018 at 13:01
  • The style.css is definitely being loaded, as styles are being applied. I can confirm that in the source it is https://domain.com/wp-content/themes/my-child-theme/style.css
    – Igid
    Apr 16, 2018 at 13:04

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:


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

  • Ok, that sounds promising. Thanks for answering my side question but you haven't addressed my main question at all, viz. what to do in the css file.
    – Igid
    Apr 15, 2018 at 22:31

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.