Style.css doesn't work on my custom wordpress themes

1
votes

I'm new at wordpress and I know that there is a lot of answer about my problem but, even I already tries a lot of them and it still doesn't work no matter what I do.

I already make my own custom wordpress themes and it works using bootstrap external link style but my own style.css doesn't apply right. just to make sure I already include it in my header.php too. I make it using this tutorial converting-html-sites-to-wordpress-sites

this is my header.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>walabi</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <link href="https://fonts.googleapis.com/css?family=Niconne&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>css/style.css">

    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.7/css/mdb.min.css" rel="stylesheet">

    <!-- Cache Control -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="refresh" content="600">

</head>
<body>
    <!-- Header Start -->
    <nav id="paham-nav" class="navbar navbar-expand-lg fixed-top scrolling-navbar">

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"><i class="fas fa-chevron-down" style="color: aliceblue"></i></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul class="navbar-nav ml-auto nav-flex-icons">
                <li class="nav-item">
                    <a class="nav-link" href="index.php">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="career.php">Career</a>
                </li>
            </ul>
        </div>    
    </nav>
    <!-- Header End -->

this is my function.php (first of all how this function.php work? when i'm not even declare it)

<?php
//Definir le répertoire du thème
define("THEME_DIR", get_template_directory_uri());

//Enlever le générateur de tags meta pour la sécurité (les gents ne peuvent pas voir quelle version WP)
remove_action('wp_head', 'wp_generator');


// ENQUEUE STYLES
function enqueue_styles() {

    /* Main CSS */
    wp_register_style( 'style', THEME_DIR . '/style.css', array(), '1', 'all');
    wp_enqueue_style( 'style' );

}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
?>

this is some answer that i try:

style-css-in-wordpress-doesnt-work-after-adding-header-php-file

style-css-not-loading-in-wordpress-theme

style-css-not-working-in-wordpress

Just to make sure this is my directory :

this is my themes directory

in my directory there is:

  • career.php
  • footer.php
  • header.php
  • index.php
  • function.php
  • screenshot.png
  • style.css

can someone help me to solve this? I still can't solve this since yesterday

4
phphtmlcsswordpress

4 Answers

2
votes

Did you try to make a echo of bloginfo('stylesheet_url') ? Maybe the function dosn't return anything or a wrong path.

For testing, you can also put the path of the css file directly on HTML.

 <!-- Custom CSS -->
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>css/style.css">


 <!-- Custom CSS -->
        <link rel="stylesheet" href="PATH_TO_CUSTOM_CSS/css/style.css">
1
votes

try this on functions.php

function enqueue_styles() {

    /* Main CSS */
    wp_register_style( 'style', THEME_DIR . '/style.css', array(), '1', 'all');
    wp_register_style( 'bootstrap', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css');
    wp_register_style( 'material', 'https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.7/css/mdb.min.css');

add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
    wp_enqueue_style( 'style' );

}
1
votes

Have you inspected the source code and seen if the stylesheet is being called on the page? If so, try clicking or pasting the link into another tab and making sure it loads, and if not, try to compare the path it's trying to load the CSS from, to what the actual path is.

You can also right click on the page and click inspect, and go to the network tab and reload that page, it should tell you if that stylesheet is being loaded or failed to load.

Let me know when you do this and I'll check back and see if you need any more help.

1
votes

Look at this line you have:

 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>css/style.css">

bloginfo('stylesheet_url') is already the full URL of the stylesheet itself, including the file path and name. So you don't need to append css/style.css to it! Just make that 

 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

And note: The stylesheet should be in the theme directory, not in a separate 'css' directory for this to work.