Création du fichier style.css du thème WordPress

Nous l’avons vu dans la précédente étape : la création d’un thème pour WordPress passe par la création d’un dossier et de quelques fichiers de base.

Parmi ces fichiers, nous avons le fichier style.css qui permet de :

1. Configurer le thème
2. Ajouter des règles de style

Configurer le thème

Informations du thème

Pour que le système WordPress prenne en compte votre thème, vous devez ajouter des informations tout en haut du fichier style.css.

Ajoutez les lignes suivantes dans le fichier style.css :

/*
Theme Name: Mon thème
Theme URI: https://www.tutowp.fr/tutowp
Author: TutoWP
Author URI: https://www.tutowp.fr/tutowp
Description: Thème simple avec un menu et une barre latérale
Version: 1.0
*/

Votre thème est maintenant reconnu par WordPress ! Jetez un coup d’oeil dans la section Apparence > Thèmes et activez le thème.

Quelques règles css de base

Comme vous vous en doutez, le fichier style.css permet également d’ajouter les styles de notre site.

Vous pouvez donc ajouter autant de règles css que vous le voulez pour mettre en forme votre site.

En rappel pour les débutants, le css est un langage qui permet de mettre en forme du contenu HTML. Ce cours n’a pas pour vocation d’apprendre le css mais les règles utilisées ci-dessous resteront très simples.

Par exemple, ajoutons ces quelques lignes :

{box-sizing: border-box;}
body {background: #f1f1f1; color: #23282d; font-family: Arial, sans-serif; margin: 0;}

Ces règles permettent de mettre un fond légèrement grisé, une couleur proche du noir et la police Arial.

On en profite également pour supprimer les marges latérales présentes par défaut.

Voilà, notre fichier style.css est encore très simple mais il permet d’activer notre thème et de mettre les premières règles css de notre thème. Nous en ajouterons d’autres par la suite.

Nous pouvons maintenant passer à la création du template : index.php !