CODEWITHSUNDEEP
phphtmlwordpress
Fan Jane
Fan Jane

Reputation: 13

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

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

Upvotes: 1

Views: 318

Answers (1)

Harry Mumford-Turner
Harry Mumford-Turner

Reputation: 924

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

Upvotes: 1

Related Questions