0

brand new to WordPress and StackExchange so excuse my poor etiquette. I am making a custom WordPress theme for a class, and somewhere along the line made an error so tiny neither me nor my professor could find it, but it's specifically caused my entire CSS page to not load whatsoever. Through troubleshooting, we figured out it's probably an issue somewhere in the .php files. Does anybody see anything that could be causing such a huge problem? I regret asking so cluelessly for help, but we're stumped!

index.html



<?php get_header(); ?>
<?php get_sidebar(); ?>
  <div id="content1">
    <article>
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <h1 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
        <?php the_content(); ?>
        <?php wp_link_pages(); ?>
      <?php endwhile; ?>
    <?php endif; ?>
  </article>
</div>
<?php get_footer(); ?>

---

header.php


<html>
<head>
  <title> Portfolio</title>
  <!-- <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
  <meta name="description" content="Our first page">
  <meta name="keywords" content="html tutorial template"> -->
  <link href="style.css" rel="stylesheet">
  <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

footer.php, which doesn't have anything especially important

<footer></footer>
</div> <!-- close wrapper -->
<?php wp_footer(); ?>
</body>
</html>
1
  • You're not referencing a location for your style.css. You need a full URI not just the word "style.css". are you using proper css enqueuing in your functions?
    – rudtek
    Nov 1, 2021 at 19:25

3 Answers 3

3
<link href="style.css" rel="stylesheet">

Because you're using relative URLs.

When you are on example.com it will load example.com/style.css

When you are on example.com/test it will load example.com/test/style.css etc etc

As you move around the site, it will change where it's looking. None of your pages ever referenced your style.css, it's probably returning an empty 404 page instead.


Instead enqueue it properly with a full absolute URL that points to your theme, instead of using a relative URL in a hardcoded link tag.

2
  • That did it! It was a suuuuper rudimentary custom theme, so every file was just in one directory, css and all. Putting the css into a css folder of its own fixed it, somehow! I also recommend to newbies who might see this to use the WordPress Dev blog article on the enqueue function because it makes a lot of sense. The tutorial I followed before overcomplicated things. Thanks a lot for the answer! Nov 1, 2021 at 19:49
  • awesome, if this answers your question consider marking it as the correct answer by clicking the accept button underneath the voting controls, it looks like a big tick. This gives us both reputation points and signals to the site that your question has an answer
    – Tom J Nowell
    Nov 21, 2021 at 0:40
2

As stated, href="style.css" is the problem. But it's probably worth pointing out that, in Wordpress your best approach to link to the file is to use its built-in functions to point to the stylesheet, even if your server file structure or domain name changes.

So in your contexts, that would be:

<link href="<?php echo get_stylesheet_uri();?>" rel="stylesheet">

get_stylesheet_uri() will return the full path to your stylesheet, assuming you've placed it in the top-leve of your theme folder and named it style.css.

But, in Wordpress, the best practice would be to enqueue the stylesheet, instead, so that Wordpress knows it's being called and can call its dependencies, and other styles dependent on it can also be called. In this case, rather than actually including the code in your header.php file, you'd enqueue in your functions.php file like this:

function my_custom_enqueue_function(){
    wp_enqueue_style('my-style', get_stylesheet_uri());
}
add_action( 'wp_enqueue_scripts', 'my_custom_enqueue_function' );

There are more attributes, not in that example, to the wp_enqueue_style() function that make it even more useful, so it's worth looking up and getting to know.

4
  • This is the way to do it (enqueue), though it should include the stylesheet name (code above will not work without it) <?php echo get_stylesheet_uri() , '/path/style.css'; ?>. Doubly so if you use multiple CSS files, because you can use php conditionals to check what page, homepage, post type, archive, etc, is currently active, and then make the CSS load there. Also works for scripts. Additionally, you can use php switch and case in another function to filter your enqueue based on how you name them, and add additional code, such as for preloading and adding SRI integrity checks.
    – liquidRock
    Nov 1, 2021 at 22:14
  • @liquidRock get_stylesheet_uri() will return the full uri of the stylesheet, provided it's in the top-level directory of the theme and has the name "style.css" (the standard, and the OP's stylesheets name and location). You may be thinking of get_stylesheet_directory(), which you need to for scenarios other than that, you would need to append the path and file name.
    – StudioAl
    Nov 1, 2021 at 22:29
  • Most themes I see (and the ones I build) do not keep the primary in the theme root. They only have a minimal style.css to name the theme and such and primary is in a nested folder. I meant to type get_stylesheet_directory_uri actually :P, but one can also use get_template_directory_uri as it goes to same place. If enqueuing, I use what works. I also append the filetime so mine look like: wp_register_style( 'my-stylesheet', get_template_directory_uri() . '/library/css/style.css', array(), filemtime(get_template_directory() . '/library/css/style.css'), null, 'all'); Now my head hurts :P
    – liquidRock
    Nov 1, 2021 at 22:42
  • The main stylesheet, named styles.css must be kept in the theme root in order for Wordpress to use its header comments to recognize it as a valid theme and display information about the theme. Sure, there are very often stylesheets, enqueued conditionally, in addition to that. (All that said, your example — with the filetime() for caching — is also exactly what I use as well for the version attribute of all my enqueued scripts and styles — to the letter. 😄. Just trying to KISS for the OP, since their example implies they're linking to the main stylesheet.)
    – StudioAl
    Nov 1, 2021 at 23:14
0

Check this:

<link href="<?php echo get_stylesheet_directory_uri();?>/style.css" rel="stylesheet">

If your style.css file on the theme's root directory.

2
  • Is that better than the echo get_stylesheet_uri() in the other answer? What's the difference?
    – Rup
    Nov 2, 2021 at 12:05
  • @Rup either is fine. If the stylesheet being linked is the main stylesheet (named style.css, in the root directory of the theme), get_stylesheet_uri() is sufficient. If it's any other file, name or in a subdirectory, the method in this answer would be needed.
    – StudioAl
    Nov 2, 2021 at 23:09

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.