Why my website cannot read the css and javascript file? It shows failed to load resource (404)

Question

I'm beginner for PHP. I'm using Wordpress for developing the website. Currently, I'm trying to create my own themes for wordpress. Now, I face the problem is cannot load the css which is in the CSS file as well as javascript. Could someone help me to solve the problem?

header.php

<html lang="en">
<head>
    <title>Untitled</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <script>
    var template_dir_js = "<?php echo get_template_directory_uri();?>";
    </script>
    <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
    <script src="<?php echo get_template_directory_uri();?>/js/jquery.min.js" rel="stylesheet" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/jquery.dropotron.min.js" rel="stylesheet" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/jquery.scrolly.min.js" rel="stylesheet" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/jquery.scrollgress.min.js" rel="stylesheet" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/skel.min.js" rel="stylesheet" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/skel-layers.min.js" rel="stylesheet" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/init.js" rel="stylesheet" type="text/javascript"></script>
    <noscript>
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/skel.css" />
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style.css" />
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-xlarge.css" />
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-desktop.css" />
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-mobile.css" />


    </noscript>
    <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="landing">

functions.php

    <?php
add_theme_support('menus');
function register_theme_menus() {
    register_nav_menus(array( 'primary-menu' => __('Primary Menu')));
}
add_action('init', 'register_theme_menus'); 
function wpt_theme_styles() {
    wp_enqueue_style('foundation_css', get_template_directory_uri().'/css/style.css'); 
    wp_enqueue_style('normalize_css', get_template_directory_uri().'/css/style-xlarge.css');
    wp_enqueue_style('main_css', get_template_directory_uri().'/css/skel.css'); 
    wp_enqueue_style('main_css', get_template_directory_uri().'/css/style-mobile.css'); 
}
add_action('wp_enqueue_scripts', 'wpt_theme_styles'); 
function wpt_theme_js() {
    wp_enqueue_script( 'modernizr_js', get_template_directory_uri().'/js/jquery.min.js', array('jquery'), '1.1', true ); 
    wp_enqueue_script( 'foundation_js', get_template_directory_uri().'/js/jquery.dropotron.min.js', array('jquery'), '1.1', true ); 
    wp_enqueue_script( 'main_js', get_template_directory_uri().'/js/jquery.scrolly.min.js', array('jquery'), '1.1', true );
    wp_enqueue_script( 'init_js', get_template_directory_uri().'/js/skel.min.js', array('jquery'), '1.1', true );
    wp_enqueue_script( 'init1_js', get_template_directory_uri().'/js/skel-layers.min.js', array('jquery'), '1.1', true ); 
    wp_enqueue_script( 'init2_js', get_template_directory_uri().'/js/init.js', array('jquery'), '1.1', true );  
    wp_enqueue_script( 'init2_js', get_template_directory_uri().'/js/scrollgress.min.js', array('jquery'), '1.1', true ); 
    }
add_action('wp_enqueue_script', 'wpt_theme_js'); 
?>

index.php

<?php get_header(); ?>
<div id="main">
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>

file directory after modify error

In the header.php try putting your scripts inside the <script> tags and remove rel="stylesheet" from your scripts tags. — Ayush
– Ayush, Commented Feb 25, 2017 at 16:14

Harry Mumford-Turner · Accepted Answer · 2017-02-25 16:54:43Z

Fixed:

Your style.css file isn't inside a folder called css so update the <link> tag to: <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/style.css" />
<script> tags cannot have a rel="stylesheet" attribute.
The <!-- [if lte IE 8]... tags are probably also serving from the css directory, so also reference the get_template_directory_url() in their path.
It is a good idea to only reference the css files in the <head> and place the <script> tags at the bottom of your file, before the </body> tag.

Full Fixed header.php

<html lang="en">
<head>
    <title>Untitled</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <script>
    var template_dir_js = "<?php echo get_template_directory_uri();?>";
    </script>
    <!--[if lte IE 8]><script src="<?php echo get_template_directory_uri();?>/css/ie/html5shiv.js"></script><![endif]-->
    <script src="<?php echo get_template_directory_uri();?>/js/jquery.min.js" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/jquery.dropotron.min.js" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/jquery.scrolly.min.js" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/jquery.scrollgress.min.js" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/skel.min.js" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/skel-layers.min.js" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/init.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/skel.css" />
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/style.css" />
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-xlarge.css" />
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-desktop.css" />
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-mobile.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/ie/v8.css" /><![endif]-->
</head>
<body class="landing">

Hi, why it still get the error? (Click at "after modify error" link)
@FanJane Make sure your wordpress Site URL is configured correctly, see this link: codex.wordpress.org/Changing_The_Site_URL

Collectives™ on Stack Overflow

Why my website cannot read the css and javascript file? It shows failed to load resource (404)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related