404 error linking css file in php header

1
votes

I'm building a Wordpress site and for some reason I'm getting a 404 error for the style.css, although I've referenced the file in the header.php.

I'm not sure what I've done wrong and I'm struggling to figure it out. Any explanation or suggestions would be appreciated.

Below is the console error

enter image description here

EDIT - This is a picture my style.css which is in the directory of the theme

enter image description here

And here is how I've referenced the css file in the header.php -

<?php
/**
 * The template for displaying the header
 *
 * @subpackage the-bespoke-harvest
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
    <link rel="stylesheet" href="bespokeharvest/website/wp-content/themes/the-bespoke-harvest/patterns/public/css/style.css?ver=4.8.2" type="text/css">
    <!--[if lt IE 9]>
    <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
    <![endif]-->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCo3e_2xea4jd7wMQ2c0IkQKRQ3NH3aZmY&libraries=geometry"></script>
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<section class="section-scroller">
    <?php if (function_exists(clean_custom_menus())) clean_custom_menus(); ?>
</section>

Note - The other linked files in the head such as the google maps script & pingback are working fine.

3
javascriptphphtmlcsswordpress
No need to reference it. Just name it style.css and put it in the root directory of your theme – miknik
so you mean remove that whole reference from header.php? Because this css file is already in the root directory of my theme, and that wasn't working before. – Jordan Miguel
If your css file is formatted correctly, called style.css and in the root diretory then wordpress should just find it. Does style.css have the correct comment headers to indicate it applies to your theme? – miknik
See the image of the code I've just added to the question. When I inspect element and find the css file, I can only see the comment headers (author details etc), but not the code following. – Jordan Miguel

3 Answers

0
votes

You have not specify a valid path for css. Replace this line with this wp code structure.

<link rel="stylesheet" href="bespokeharvest/website/wp-content/themes/the-bespoke-harvest/patterns/public/css/style.css?ver=4.8.2" type="text/css">

to

<link href="<?php echo get_template_directory_uri();?>/patterns/public/css/style.css" rel="stylesheet" type="text/css" />
0
votes

I would recommend enqueueing your scrips and styles. https://developer.wordpress.org/reference/functions/wp_enqueue_style/

This best illustrates how you would do it: https://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way--cms-20402

You can still prioritise styles/scripts as well as version them.

(I’ll write the code once I get to a computer)

0
votes

I've seen your problem and I suggest you go with this.

First, open that file in your browser. Then check what path does this code return. 

<?php 
   echo get_template_directory_uri();
?>

Then merge that together.

Suppose this code return. localhost/wordpress

And your path style path is C:/xampp/htdocs/wordpress/wp-content/theme/mytheme/something/style.css

Then remove c:/xampp/htdocs/wordpress

And create something like this

<?php 
   echo get_template_directory_uri();?>/wp-content/theme/mytheme/something/style.css
?>

This is the solution whenever you got some errors like this.

Thanks.