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.

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 :

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.

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 …

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.

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.

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 !