Tout savoir sur WordPress

WordCamp Genève : Créer son premier thème en 30 minutes

Le premier WordCamp Genève a eu lieu en ce 18  novembre 2016. J’ai pu y tenir un atelier concernant la création de thèmes avec WordPress. L’objectif était de démontrer qu’il n’est pas si difficile que ça de créer un thème sur mesure, à partir du moment où l’on a quelques compétences en HTML et CSS (et un peu PHP)

Les slides

Voici les slides récapitulatives de mon atelier.

Vous pourrez aussi les trouver ici http://slides.com/maximebj/creer-theme-wp-30-minutes#/

Télécharger le theme utilisé pendant l’atelier

Si vous voulez décortiquer le thème que j’ai conçu pour cet exercice, téléchargez cette archive.

[smoothie_button url=”https://www.geekpress.fr/wp-content/uploads/2016/11/premier-theme.zip” label=”Télécharger le thème”]

Vous y retrouverez tous les fichiers avec le strict minimum afin de vous aider à bien comprendre chaque modèle.

Résumé : ce qu’il faut connaitre pour créer un thème

Alors, qu’est-ce qu’il est important de retenir pour démarrer la création de thèmes ?

0. Les Pré requis

  • Savoir installer WordPress en local (grâce à Mamp par exemple)
  • Connaitre assez bien le HTML et le CSS
  • Avoir quelques bases en PHP, ce qui suffira au début

Pour vous former efficacement en HTML et CSS, il existe de nombreux sites comme OpenClassRoom, TeamTreehouse (anglais), sitePoint, CSSTricks …

1. Les bases

Les thèmes sont stockés dans le dossier wp-content/themes : on peut y retrouver d’ailleurs les thèmes par défaut comme twentysixteen.

architecture-wp

Pour créer votre thème il vous suffit de créer un dossier et d’y mettre :

  • index.php
  • style.css
  • screenshot.png (880*660px)

Dans le fichier style.css il faut déclarer quelques informations sur le thème :

style-css

Dans l’admin vous devriez maintenant voir votre thèmes (apparence > thèmes).

2. Header et footer

viennent s’additionner ensuite header.php et footer.php qui vont contenir la base fixe du site (le haut et le bas), commune à chaque page.

header

On retrouve du HTML et quelques fonctions made in WordPress comme bloginfo(‘charset’); qui permet de récupérer l’encodage du site ou encore bloginfo(‘template_directory’); qui permet d’aller chercher des ressources situées dans votre thème.

3. Le template hierarchy

WordPress sait automatiquement quel modèle charger en fonction du contexte. Pour cela un schéma très explicite, appelé Template hierarchy, permet de vous y retrouver entre les différents fichiers de template (single, archive, page…).

Quand WordPress affiche un article, il va chercher le modèle single.php, et pour une page simple : page.php. Quand on affiche la liste d’articles (le blog, une catégorie…) WP charge archive.php …

template-hierarchy

Plus d’informations à ce sujet sur le Codex WordPress.

Chaque page doit commencer par get_header(); et finir par get_footer(); pour récupérer l’entête et le pied de page du site.

4. The Loop et les templates tags

Autre concept essentiel : la boucle WordPress. Un petit bout de code permet à WordPress de récupérer le contenu (de la page en cours, de l’article en cours) ou la liste des derniers articles dans le cas du blog. Peut importe le modèle (page.php, single.php) il doit intégrer cette boucle.

template

Dans la boucle on a accès a des fonctions WordPress pour afficher le contenu, comme par exemple :

  • the_title(); pour afficher le titre principal
  • the_content(); pour afficher le contenu
  • the_permalink(); pour le lien vers l’article (à utiliser dans archive.php)
  • the_category(); liste des catégories

5. Functions.php

Enfin, ce fichier vous permettra de configurer votre thème et ses fonctionnalités. C’est ici que l’on déclare les menus, les sidebars, les tailles pour les images à la Une et que l’on charge correctement les scripts JS et feuilles de styles.

functions

Frameworks et themes de base

Il existe différents frameworks qui vous permettent de commencer plus sereinement vos développements, comme Genesis pour n’en citer qu’un seul.

Sinon, plus simple, il existe des thèmes de bases faciles à prendre en main et je vous conseille actuellement Underscores ,le starter theme pour WordPress

[smoothie_button url=”https://underscores.me/” label=”Télécharger Underscores”]

Envie d’en apprendre plus ?

Vous voulez devenir un pro dans le développement de thèmes et d’extensions WordPress ? Alors suivez-moi sur Twitter : @maximebj et je vous tiendrais au courant du lancement de mon nouveau site e-learning et mes formations pour les pros début 2017 !

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

Article écrit par Maxime BJ

Développeur, bloggeur et formateur Web spécialisé WordPress. 36 ans. Grenoblois. Co-fondateur de WPChef, l’organisme de formation WordPress.

Co-fondateur de WPChef, la formation WordPress pour les débutants. Vous pouvez me rencontrer lors d’événements tels que les WordCamp. Traducteur Français de l’extension Advanced Custom Fields. Je m’occupe un site pour apprendre l’informatique aux débutants gratuitement.

4 Commentaires

  1. Bonjour, je viens de lire ce post qui est un peu du chinois pour moi malgré que j’utilise du wordpress, jvais essayer d’y passer un peu plus de temps pour apprend merci et bonne continuation

    • Oui je vais un peu vite en besogne car c’est surtout un résumé de la conférence mais si ça peut t’intéresser je vais faire un cours complet à ce sujet dès 2017

  2. Bonjour et merci Maxime pour cette article. Je suppose que l’on peut avoir un thème de base pré configurer un minimum pour gagner du temps?
    +1 pour tes futur formations en 2017.
    Bon courage pour la suite
    Deuns26

    • Oui tout à fait ! Je te conseille Underscore du coup qui est pas mal ! Je vais mettre à jour l’article