1

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 .

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' );
0

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

0

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/

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.