1

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()? – Jacob Peattie Apr 16 '18 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 '18 at 12:42
  • So just pass the string as the argument to the function... – Jacob Peattie Apr 16 '18 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 '18 at 12:53
2

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 '18 at 12:49
  • Can you update the question with the code used to enqueue the stylesheet to begin with? – Jacob Peattie Apr 16 '18 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 '18 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? – Jacob Peattie Apr 16 '18 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 '18 at 13:04
0

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.

  • 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 '18 at 22:31
0

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, privacy policy and cookie policy

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