Search code examples
wordpresswordpress-themingthemes

Theme (from scratch) Wordpress doesn't work properly

I created a test theme from scratch, and i have a few problems with the stylesheet.

This is how my directory looks: enter image description here enter image description here

and this is the code:

index.php

`<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>this is a test Carolina WP</title>
    <link rel="stylesheet" href="wp-content/themes/carodev/styles.css" />
  </head>

  <body>

  <div>
    <h2>Title</h2>
    <p>this is a phrase </p>
    <img src="ressources/womanicon.png">
  </div>

    <div class="services-container">
        <div class="service">
            <div class="service-preview">
                <h6>Services</h6>
                <h2>Depannage</h2>
                <a href="#">autres services <i class="fas fa-chevron-right"></i></a>
            </div>
            <div class="service-info">
                <div class="progress-container">
                    <div class="progress"></div>
                    <span class="progress-text">
                        Trés demandé
                    </span>
                </div>
                <h2>Votre ordinateur <br>
                    ne marche pas ?</h2>
                <button class="btn">Contact-nous</button>
            </div>
        </div>
    </div>
<div class="container">

        <img src="./ressources/womanicon.png">
        <img src="../womanicon.png">
        <img src="../ressources/womanicon.png">
        <img src="womanicon.png">
        <img src="womanicon.png">
        <img src="womanicon.png">
        <img src="womanicon.png">
        <img src="womanicon.png">
        <img src="womanicon.png">
        <img src="womanicon.png">
        <img src="womanicon.png">
        <img src="womanicon.png">
</div>
  </body>
</html>`

style.css

* {
    box-sizing: border-box;
}


body {
    background-image: linear-gradient(45deg, #7175da, #9790F2);
    font-family: 'Muli', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

.service {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    max-width: 100%;
    margin: 20px;
    overflow: hidden;
    width: 700px;
}

.service h6 {
    opacity: 0.6;
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.service h2 {
    letter-spacing: 1px;
    margin: 10px 0;
}

.service-preview {
    background-color: #2A265F;
    color: #fff;
    padding: 30px;
    max-width: 250px;
}

.service-preview a {
    color: #fff;
    display: inline-block;
    font-size: 12px;
    opacity: 0.6;
    margin-top: 30px;
    text-decoration: none;
}

.service-info {
    padding: 30px;
    position: relative;
    width: 100%;
}

.progress-container {
    position: absolute;
    top: 30px;
    right: 30px;
    text-align: right;
    width: 150px;
}

.progress {
    background-color: #ddd;
    border-radius: 3px;
    height: 5px;
    width: 100%;
}

.progress::after {
    border-radius: 3px;
    background-color: #2A265F;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    width: 66%;
}

.progress-text {
    font-size: 10px;
    opacity: 0.6;
    letter-spacing: 1px;
}

.btn {
    background-color: #2A265F;
    border: 0;
    border-radius: 50px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 16px;
    padding: 12px 25px;
    position: absolute;
    bottom: 30px;
    right: 30px;
    letter-spacing: 1px;
}

.container {  display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    ". . ."
    ". . ."
    ". . ."
    ". . .";
}`

The first error that i was getting : ERROR: 404 not found 1:style.css

But when in the url i specify de style.css ex: Localhost:8888/test/style.css it worked. After that I put the container with pictures, but pictures weren't loading.

And now I have this error: enter image description here

Solution

  • Please check the WordPress documentation for theme development. As per the document, your file name should be style.css instead of styles.css

    After renaming, your stylesheet name your error will solve but this is not the right way to include files.

    You need to create a functions.php file in your theme directory. Put the below code into your functions.php file.

    <?php
/**
 * Proper way to enqueue scripts and styles
 */
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/style.css', array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

    Then, please add the below code on top of your index.php file for load header template.

    <?php
  get_header();
?>