Converting HTML Template to Wordpress Theme

Question

While I was trying to convert a Static HTML page to Wordpress Theme , I had an issue . the page Doesn't run properly After Checking Google Chrome Console it turns that it loads the CSS file with the wrong path

it loads Website/css/styles.css and Website/css/style-desktop.css

here are how I've imported stylesheets from header.php

<link rel="stylesheet" href="<?php bloginfo( 'template_directory' ); ?>/css/skel.css" />
<link rel="stylesheet" href="<?php bloginfo( 'template_directory' ); ?>/css/style.css" />
<link rel="stylesheet" href="<?php bloginfo( 'template_directory' ); ?>/css/style-desktop.css" />
<link rel="stylesheet" href="<?php bloginfo( 'template_directory' ); ?>/css/style-noscript.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo( 'template_directory' ); ?>/css/ie/v8.css" /><![endif]-->
<!--[if lte IE 8]><script src="<?php bloginfo( 'template_directory' ); ?>/css/ie/html5shiv.js"></script><![endif]-->
<script src="<?php bloginfo( 'template_directory' ); ?>/js/jquery.min.js"></script>
<script src="<?php bloginfo( 'template_directory' ); ?>/js/skel.min.js"></script>
<script src="<?php bloginfo( 'template_directory' ); ?>/js/init.js"></script>

It should get the stylesheet as website.com/wp-content/theme/themename/css/styles.css

I'm not sure if there anything I should write in function.php

UPDATE1:

It turns out one of the JS files loads the CSS file directly , so I had to change the path of CSS files

It looks ok with the CSS but there are some conflict in the theme .

Answer 1

As said, you should enqueue your style sheets like this in your functions.php in your theme:

function adds_to_the_head() { // Our own unique function called adds_to_the_head

wp_register_style( 'custom-style-css', get_stylesheet_directory_uri() . '/css/styles.css','','', 'screen' ); // Register style.css

wp_enqueue_style( 'custom-style-css' ); // Enqueue our stylesheet

}
add_action( 'wp_enqueue_scripts', 'adds_to_the_head' );

Answer 2

Try like this

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js"></script>

But it is a good practice to en queue your script in function.php Function Reference/wp enqueue script

Answer 3

You can use this way. And It is also standard

/**
 * Enqueue scripts and styles.
 */
function test_name_scripts() {
    wp_enqueue_style( 'test-name-style', get_stylesheet_uri() );

    wp_enqueue_script( 'test-name-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

    wp_enqueue_script( 'test-name-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'test_name_scripts' );

And Also follow this tutorial: https://developer.wordpress.org/themes/basics/including-css-javascript/