Comment créer un thème WordPress facilement ?

Sommaire du cours

  1. Introduction
  2. Prérequis
  3. Préparatifs
  4. Le fichier style.css
    1. Informations du thème
    2. Quelques règles css de base
  5. Le fichier index.php
    1. Création de l’en-tête
    2. Affichage des articles
  6. Le fichier functions.php
    1. Création d’un menu
    2. Création de deux sidebars
  7. Affichage du menu et des sidebars
    1. Utilisation de la fonction wp_nav_menu
    2. Utilisation de la fonction dynamic_sidebar
  8. Ajout du style à notre thème
  9. Résultat final

Introduction à la création d’un thème WordPress

Dans ce guide, vous allez apprendre à créer un thème WordPress facilement et en très peu de temps. Que vous soyez néophytes ou déjà utilisateur averti de WordPress, j’ai regroupé toutes les informations essentielles pour que vous puissiez faire un thème 100% fonctionnel répondant à la plupart des besoins lorsqu’on veut créer un site web ou un blog personnel sous WordPress.

Le thème que nous allons créer sera parfaitement adapté pour un blog.

Le thème créé permettra notamment :

  1. D’afficher les derniers articles du blog sur la page d’accueil
  2. De disposer d’une barre latérale pour ajouter des widgets
  3. De disposer d’un menu horizontal pour mettre en avant certaines pages
  4. D’avoir un footer personnalisé

Grâce à ce guide vous allez apprendre les choses suivantes :

  1. Comment fonctionne un thème WordPress
  2. Comment coder un thème pour WordPress en partant d’une feuille blanche
  3. Comment gérer l’affichage des contenus dans un thème
  4. Comment gérer les menus dans WordPress
  5. Comment gérer les sidebars et les widgets dans WordPress

Ensemble, nous allons créer un thème de base qui ressemblera à ça :

L’avantage de ce thème est qu’il est très facile à personnaliser selon vos besoins et qu’il est parfait pour s’exercer.


Prérequis

En prérequis, vous devez avoir installé le célèbre système de gestion de contenu en local (localhost) ou sur un hébèrgement mutualisé comme OVH par exemple.

Si vous ne savez pas comment installer WordPress, vous pouvez trouver de nombreux tutoriels sur Google. L’installation de WordPress est relativement simple, rassurez-vous !

Pour ce qui est des connaissances techniques nécessaires à la création de thème WordPress, il est préférable d’avoir des notions en html, css et php.


Préparatifs du thème WordPress


Lorsqu’on veut créer son propre thème WordPress, la première chose à faire est de créer un dossier. Un thème est composé d’un dossier dans lequel on trouve au minimum 2 fichiers.

Un fichier style.css qui permet de définir les informations du thème et de mettre les règles css qui vont mettre en forme le contenu.

Un fichier index.php qui permet d’afficher le contenu du site. Dans WordPress, on appelle ce genre de fichiers un fichier “template”. Il existe d’autres fichiers “template” que le fichier index.php mais nous ne les utiliserons pas pour le moment.

On trouve souvent un 3ème fichier nommé functions.php, bien que facultatif, ce fichier est important car il permet d’ajouter ou d’utiliser des fonctionnalités présentes dans WordPress.

Commençons la création de notre thème WordPress !

  1. Allez dans le dossier “wp-content/themes” dans WordPress et créez un dossier “montheme”.
  2. Dans ce dossier :
    1. Créez un fichier style.css
    2. Créez un fichier index.php
    3. Créez un fichier functions.php

Bravo, vous venez de finir la 1ère étape !


Le fichier style.css

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
Author: TutoWP
Author URI: https://www.tutowp.fr
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. Cet e-book 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.


Le fichier index.php

Nous allons maintenant créer le fichier index.php.

Dans WordPress, ce fichier php correspond à un fichier de template. Les fichiers de template sont des fichiers qui permettent d’afficher le contenu de notre site WordPress en fonction du contexte.

Création de l’en-tête

Tout d’abord créons un marquage HTML simple.

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>Hello</title>
</head>
<body>
  <p>Hello World !</p>
</body>
</html>

A la ligne 4 et 5, nous ajoutons une balise meta viewport qui adapte la largeur du contenu à la largeur de l’appareil utilisé pour consulter le site web. Cette balise est très importante pour créer un thème WordPress responsive.

Si vous vous rendez sur la page d’accueil de votre site WordPress vous allez obtenir un joli “Hello World !”

Nous allons maintenant ajouter des fonctionnalités de WordPress pour dynamiser l’affichage du contenu.

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title><?php wp_title(''); ?></title>
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
  <?php wp_head(); ?>
</head>
<body>

  <header id="header">
      <h1><?php echo bloginfo('name'); ?></h1>
      <nav id="navigation">
      </nav>
  </header>

  <div id="wrap">
      <section id="content">
      </section>

      <aside id="sidebar">
      </aside>
  </div>

  <footer id="footer">
  </footer>

  <?php wp_footer(); ?>
</body>
</html>

A la ligne 6, nous utilisons la fonction wp_title() qui permet d’afficher le titre de la page en cours.

A la ligne 7, nous ajoutons la feuille de style style.css grâce à la fonction bloginfo(‘stylesheet_url’) qui permet de récupérer l’url de ce fichier.

A la ligne 9, nous ajoutons la fonctionnalité wp_head(). Cette fonction est un peu particulière. Elle permet à WordPress d’ajouter du code dans la partie “head” du site. Cette fonction est notamment utilisée par des plugins pour ajouter des fonctionnalités. Si vous n’ajoutez pas cette balise votre thème ne sera pas compatible avec certains plugins.

A la ligne 30, nous ajoutons la fonction wp_footer() qui est similaire à wp_head() mais pour le footer.

Affichage des articles

Maintenant, affichons les articles de notre blog. Pour cela, nous allons faire appel à une fonctionnalité de WordPress appelée “La boucle”.

Placez ce code dans la balise “<section id=”content>” :

<?php if(have_posts()) : ?>
   <div id="loop">
       <?php while(have_posts()) : the_post(); ?>
           <article>
               <h1><?php the_title(); ?></h1>
               <p>Publié le <?php the_time('d/m/Y'); ?><?php if(!is_page()) : ?> dans <?php the_category(', '); ?><?php endif; ?></p>
               <?php if(is_singular()) : ?>
                   <?php the_content(); ?>
               <?php else : ?>
                   <?php the_excerpt(); ?>
                   <a href="<?php the_permalink(); ?>">Lire la suite</a>
               <?php endif; ?>
           </article>
       <?php endwhile; ?>
   </div>
   <div id="pagination">
       <?php echo paginate_links(); ?>
   </div>
<?php else : ?>
   <p>Aucun résultat</p>
<?php endif; ?>

Quelle que soit la page affichée par WordPress, c’est le système de boucle qui permet d’afficher le contenu. Si vous êtes sur la page d’accueil, elle va afficher les x derniers posts. Si vous êtes la page d’un article, elle va afficher l’article en question. Si vous êtes sur une catégorie, elle affichera les x derniers articles de la catégorie.

Voici comment elle fonctionne :

La condition if(have_posts()) (ligne 1) permet de vérifier s’il y a des posts à afficher.

S’il y a des posts à afficher, nous pouvons alors lister les contenus grâce à une boucle “while”. Nous avons donc while(have_posts()) : the_post(); (ligne 3) qui signifie “Tant qu’il y a des posts à afficher, alors on charge le post en cours. La fonction the_post() permet de charger le post en cours.

Dans cette boucle, nous pouvons afficher le contenu grâce à des fonctions de WordPress.

Par exemple :

  • Pour afficher le titre de l’article, on utilisera the_title()
  • Pour afficher un extrait de l’article, on utilisera the_excerpt()
  • Pour afficher le lien vers l’article, on utilisera the_permalink()

Dans WordPress, on peut également utiliser des conditions comme if(!is_page()) ou if(is_singular()) pour afficher un contenu différent.

La fonction is_page() permet de déterminer si la page est en cours est une page WordPress. Le “!” devant la fonction permet d’inverser la condition. Ainsi, if(!is_page()) (ligne 7) revient à dire “Si la page est en cours n’est pas une page alors …”. Dans notre exemple, nous nous servons de cette fonction pour afficher (ou pas) la catégorie de la page en cours. En effet, dans WordPress, les deux types de contenu sont “Pages” et “Articles”. Les articles peuvent avoir des catégories contrairement au page. La ligne 7 permet donc de ne pas afficher de texte quand une page affichée par le site.

La fonction is_singular() permet de déterminer si la page en cours est un post ou une page. Si c’est le cas, on affiche le contenu entier avec la fonction the_content() (ligne 9), sinon, on affiche l’extrait avec the_excerpt() (ligne 11). On utilise cette technique pour différencier l’affichage des contenus (articles, pages) de l’affichage des listes de contenus (catégories, résultats de recherche …).

Après la boucle, nous pouvons afficher le système de pagination (s’il existe de nombreux articles). Cette pagination s’affiche avec la fonction paginate_links(); (ligne 18).

Enfin, si aucun post n’est trouvé, on peut afficher un message comme quoi il y a aucun résultat (ligne 21).


Le fichier functions.php

Le fichier functions.php permet d’ajouter ou utiliser des fonctionnalités existantes dans WordPress. Nous allons voir comment enregistrer un menu et comment enregistrer des sidebars.

Création d’un menu WordPress

Pour enregistrer un menu avec WordPress, il suffit d’ajouter le code suivant au fichier functions.php.

function register_my_menu(){
   register_nav_menu('main', "Menu principal");
}
add_action('after_setup_theme', 'register_my_menu');

Il y a plusieurs choses à noter dans les lignes précédentes. On créer une fonction dans laquelle on place la fonction register_nav_menu(). Cette fonction prend 2 paramètres, un correspondant à l’identifiant du menu, ici “main” puis la description du menu, ici “Menu principal”.

La 4ème ligne fait appel à la fonction add_action(), cette fonction permet d’attacher une fonction à ce qu’on appelle un “hook” dans le vocabulaire WordPress. Elle prend également 2 paramètres, le 1er correspond au “hook” sur lequel on veut greffer la fonction et le 2ème paramètre correspond au nom de la fonction que l’on veut greffer.

Ici, on greffe la fonction “register_my_menu” sur le hook “after_setup_theme”. Le hook “after_setup_theme” est appelé à chaque chargement de page, après l’initialisation du thème. On l’utilise généralement pour mettre en place les réglages de base du thème.

Maintenant, rendez-vous dans WordPress dans “Apparence > Menus”.

Appuyez sur “Créer le menu”.

Ensuite, cliquez sur “Enregistrer le menu”. On vient d’attribuer le menu à l’emplacement que nous avons enregistré.

Creation de deux sidebars WordPress

Pour enregistrer des sidebars, il faut ajouter le code suivant au fichier functions.php.

function register_my_sidebars(){
   register_sidebar(
       array(
           'name' => "Sidebar principale",
           'id' => 'main-sidebar',
           'description' => "La sidebar principale",
           'before_widget' => '<div id="%1$s" class="widget %2$s">',
           'after_widget'  => '</div>',
           'before_title'  => '<h2 class="widget-title">',
           'after_title'   => '</h2>'
       )
   );
  
   register_sidebar(
       array(
           'name' => "Sidebar du footer",
           'id' => 'footer-sidebar',
           'description' => "La sidebar principale",
           'before_widget' => '<div id="%1$s" class="widget %2$s">',
           'after_widget'  => '</div>',
           'before_title'  => '<h2 class="widget-title">',
           'after_title'   => '</h2>'
       )
   );
}
add_action('widgets_init', 'register_my_sidebars');

Comme pour les menus, on attache la fonction “register_my_sidebars” au hook “widgets_init”. Le hook “widgets_init” se déclenche après l’initialisation de tous les widgets WordPress.

Si on regarde la fonction register_my_sidebars(), on voit qu’on enregistre deux sidebars avec la fonction register_sidebar(). Cette fonction prend en paramètre un tableau de réglages :

  • name : est le nom de la sidebar
  • id : est l’identifiant de la sidebar, il doit comporter que des minuscules et des tirets
  • description : est la description de la sidebar
  • before_widget : est le balisage qui se placera avant chaque widget
  • after_widget : est le balisage qui se placera après chaque widget
  • before_title : est le balisage qui se placera avant chaque titre de widget
  • after_title : est le balisage qui se placera après chaque titre de widget

Vous pouvez maintenant gérer les sidebars dans “Apparence > Widgets”.


Affichage du menu et des sidebars dans le thème WordPress

Maintenant que le menu et les sidebars sont enregistrés, nous pouvons maintenant afficher ces éléments dans le template.

Utilisation de la fonction wp_nav_menu

Pour ajouter un menu dans un fichier de template, il suffit d’utiliser la fonction wp_nav_menu() dans la balise “<header id= »header »>” :

<h1><?php echo bloginfo('name'); ?></h1>
<nav id="navigation">
   <?php wp_nav_menu(array('theme_location' => 'main')); ?>
</nav>

A la ligne 1, nous ajoutons la fonction bloginfo(‘name’) qui permet d’afficher le titre du blog.

A la ligne 2, nous ajoutons la fonction wp_nav_menu(array(‘theme_location’ => ‘main’)) qui permet d’afficher le menu que nous avons enregistré auparavant.

Vous pouvez maintenant voir votre menu s’afficher.

Utilisation de la fonction dynamic_sidebar

Pour ajouter une sidebar dans un fichier de template, il faut d’utiliser la fonction dynamic_sidebar() et indiquer l’identifiant de la sidebar. Voici le code à ajouter dans la balise “<aside id= »sidebar »>” :

<?php dynamic_sidebar('main-sidebar'); ?>

Ajout du style à notre thème WordPress

Pour styliser notre thème WordPress, il ne reste plus qu’à ajouter des règles css dans le fichier style.css.

Utilisons les règles css suivantes :

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

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

a {color: #3498db; text-decoration: none;}
a:hover {color: #2980b9; text-decoration: underline;}
input[type="text"] {border-radius: 4px; border: none; padding: 10px; border: 1px solid #23282d;}
#s {margin: 0 0 10px 0;}
button, input[type="submit"] {cursor: pointer; border-radius: 4px; border: none; background: #23282d; color: #3498db; padding: 10px;}

#header {text-align: center; padding: 50px 0;}
#header nav ul {margin: 0; padding: 0;}
#header nav ul li {display: inline-block;}
#header nav ul li a {display: block; padding: 10px; text-decoration: none;}
#header nav ul li.current-menu-item a {border-bottom: 2px solid #3498db;}

#wrap {display: flex; width: 960px; margin: 0 auto;}
#loop article {margin: 0 0 50px 0; background: #fff; padding: 20px; border: 1px solid #ccc;}
#pagination {text-align: center; margin: 0 0 100px 0;}
#sidebar {padding: 0 0 0 50px; flex: 0 0 350px;}
#sidebar .widget {padding: 20px; margin: 0 0 20px 0; background: #fff; border: 1px solid #ccc;}
#footer {padding: 100px 0; display: flex; background: #23282d; color: #f1f1f1;}
#footer .widget {flex: 1; padding: 0 40px;}

@media screen and (max-width: 959px) {
    #wrap {width: 100%; flex-direction: column; padding: 0 20px;}
    #sidebar {padding: 0;}
    #footer {flex-direction: column;}
}

Vous noterez la règle « @media screen and (max-width: 959px) » qui permet de gérer le responsive design pour les écrans d’une largeur inférieure à 959px.


Résultat final du fichier index.php

<!doctype html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
   <title><?php wp_title(''); ?></title>
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
   <?php wp_head(); ?>
</head>
<body>

   <header id="header">
       <h1><?php echo bloginfo('name'); ?></h1>
       <nav id="navigation">
           <?php wp_nav_menu(array('theme_location' => 'main')); ?>
       </nav>
   </header>

   <div id="wrap">

       <section id="content">
           <?php if(have_posts()) : ?>
               <div id="loop">
                   <?php while(have_posts()) : the_post(); ?>
                       <article>
                           <h1><?php the_title(); ?></h1>
                           <p>Publié le <?php the_time('d/m/Y'); ?><?php if(!is_page()) : ?> dans <?php the_category(', '); ?><?php endif; ?></p>
                           <?php if(is_singular()) : ?>
                               <?php the_content(); ?>
                           <?php else : ?>
                               <?php the_excerpt(); ?>
                               <a href="<?php the_permalink(); ?>">Lire la suite</a>
                           <?php endif; ?>
                       </article>
                   <?php endwhile; ?>
               </div>
               <div id="pagination">
                   <?php echo paginate_links(); ?>
               </div>
           <?php else : ?>
               <p>Aucun résultat</p>
           <?php endif; ?>
       </section>

       <aside id="sidebar">
           <?php dynamic_sidebar('main-sidebar'); ?>
       </aside>

   </div>

   <footer id="footer">
       <?php dynamic_sidebar('footer-sidebar'); ?>
   </footer>

   <?php wp_footer(); ?>
</body>
</html>

C’est la fin de ce tutoriel : « Comment créer un thème WordPress facilement ? ». J’espère qu’il vous a été utile pour apprendre les concepts de base de WordPress et pour réaliser votre premier thème.

Si vous avez des questions sur ce tutoriel WordPress ou que vous voulez laisser un petit mot n’hésitez pas à commenter ci-dessous !


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *