Tout savoir sur WordPress
Tutoriel WordPress

Modifier le dossier du css principal de votre thème WordPress

Par défaut, le css principal d’un thème WordPress se trouve à la racine de son dossier et se nomme style.css. Il est possible de modifier le nom et le dossier parent de cette feuille de style.

Lors du développement d’un thème, WordPress impose la création d’une feuille de style à sa racine et elle doit être nommée style.css. Heureusement pour nous, il est possible de modifier l’appel de la fonction bloginfo('stylesheet_url') si on désire récupérer l’url de notre feuille de style après l’avoir renommée ou déplacée dans un nouveau dossier.

Un développeur maniaque comme moi crée toujours un dossier « design » à la racine de son thème. Ce dossier contient la feuille de style principale du thème et le dossier « images ».

Modifier le dossier parent de la feuille de style

Cette organisation pose problème si on souhaite appeler sa feuille de style grâce à bloginfo('stylesheet_url'). La fonction va renvoyer un lien du type http://www.mon-site.com/wp-content/themes/nom-theme/style.css

Le code suivant permet de modifier le chemin du dossier contenant le fichier style.css

add_filter('stylesheet_directory_uri','gkp_stylesheet_directory_uri', 10, 2);
function gkp_stylesheet_directory_uri($stylesheet_dir_uri, $stylesheet) {

    // On ajoute notre dossier
    return $stylesheet_dir_uri.'/design';

}

A partir de maintenant, bloginfo('stylesheet_url') va renvoyer l’adresse suivante : http://www.mon-site.com/wp-content/themes/nom-theme/design/style.css

Modifier le nom du style principal

Si vous préférez nommer votre feuille de style autrement que style.css, nous avons la possibilité de modifier son nom grâce à quelques lignes de code supplémentaires.

add_filter('stylesheet_uri', 'gkp_stylesheet_uri', 10, 2);
function gkp_stylesheet_uri($stylesheet_uri, $stylesheet_dir_uri) {

    // On change le nom du fichier
    return $stylesheet_dir_uri.'/montheme.css';

}

La fonction bloginfo('stylesheet_url') va renvoyer l’adresse suivante : http://www.mon-site.com/wp-content/themes/nom-theme/design/montheme.css

Cet article a été mis à jour il y a 2641 jours - Il n'est peut être plus à jour !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

18 Commentaires

  1. Malheureusement ça ne fonctionne pas…

    bloginfo(‘stylesheet_url’) renvoi bien la bonne url mais dans l’administration du theme, il ne supporte pas l’absence du fichier style.css à la racine.

    Si quelqu’un à une idée…

    • Je n’ai pas dit que le fichier style.css de la racine devait être supprimé :)

      Il faut toujours garder un style.css avec les commentaires de déclaration du thème.

      Je n’ai pas encore trouver la solution pour palier ce détail.

      Ce script permet de faire appel à notre fichier css qui contient notre code si on souhaite le mettre dans un autre dossier autre que la racine du thème.

  2. @Adrien : Pas forcément, il suffit de laisser le style.css à la racine du thème uniquement pour la déclaration du thème et sans rien d’autres dedans.

    Comme ça, on peut mettre le css de notre thème où l’on souhaite grâce à l’astuce ^^

  3. Oui mais même en mettant nos css dans un dossier à part, on ne fait finalement que l’économie d’un niveau dans la déclaration de la stylesheet non ?

    Au lieu de :

    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/reset.css" type="text/css" media="screen" />
    

    On a :

    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/reset.css" type="text/css" media="screen" />
    

    Est-ce que ça vaut tant le coup que ça d’écrire un filtre ?

  4. @Jonathan: « Je n’ai pas encore trouver la solution pour palier ce détail. »
    Tu ne peux tout simplement pas, c’est en dur dans le core de WP, « style.css » DOIT être présent à la racine.

  5. Bonjour, je pensais qu’il était plus simple et fluide de créer un thème enfant (en css). Ce qui préserve le core de wp, et les mises à jour n’interfèrent pas sur le fichier ‘parent’ css du thème utulisé. Existe t il une solution ‘ideale’? Un compromis entre requête et script qui alourdit (encore) le temps de chargement d’une page web ???
    Merci pour vos réponses :)
    Sophie

  6. @Sophie : Je ne vois pas trop le rapport avec l’astuce. On ne parle pas de thème enfant mais la modification du retour de la fonction bloginfo(‘stylesheet_url’).

  7. Bonjour à tous,

    Je suis tombé sur cet article un peu par hasard et je pense qu’il va me servir.

    Cependant, quelqu’un peut-il me dire où insérer le code de ce filtre ?

    Merci à vous.
    Et Bonne Année, on est encore en janvier.

    @+

  8. Merci pour l’astuce.
    Bien pratique pour Compass qui crée un dossier /stylesheets/styles.css.
    Mêmes si je sais qu’on peut paramétrer Compass pour changer le chemin.

  9. salut, je me suis donné pour mission la conception du site web de mon groupe d’ambiance. je suis véritablement un débutant et je voudrais des conseils de toute la communauté quels quel soit pour me permettre de mettre sur pied un site de qualité.
    j’ai installé wampserver et j’utilise le theme mainstream
    dites moi tout plungin nécessaire astuces et autres
    merci pour votre soutien

non dapibus leo adipiscing et, justo