Créer son premier thème WordPress en 2020 (version 5.3)

WordPress est un gestionnaire de contenu extrêmement puissant tout en restant simple d’utilisation. Je passerai l’étape de l’installation, car la plupart des hébergeurs web vous permettent de le faire automatiquement en quelques cliques, et c’est très simple. Par contre pour une installation locale vous pouvez consulter cet article.

Une fois votre site WordPress installé, vous allez devoir choisir son aspect, son design. Il y a beaucoup de thèmes pré-installés ou téléchargeables gratuitement ou contre paiement (thème premium), certains hébergeur en propose même des packs complet (comme c’est le cas d’Infomaniak). Tout ça c’est bien, mais au final c’est quand même mieux d’avoir un thème unique qui répond parfaitement à ses envies non ? C’est ce que nous allons faire au travers de plusieurs articles. On y a va créons le squelette de votre premier thème WordPress 5.3.

Création du dossier du thème

Dans le dossier wp-content/themes vous allez créer un nouveau dossier qui contiendra les fichiers de votre thème. Je vous conseille fortement de ne rien modifier dans les autres dossiers de WordPress, au risque de ne plus pouvoir mettre à jour votre site. Une fois fait, dans votre dossier (que j’ai appelé skweb-min-theme dans l’exemple qui suit) vous allez créer les fichiers suivants (vous pouvez aussi les télécharger sur mon github) :

Création des fichiers minimum

Les fichiers style.css et index.php sont les 2 seuls fichiers obligatoires. Le premier contient les styles CSS (facile) et le second la structure principale du thème.

wp-content/themes/skweb-min-theme/style.css

C’est ce fichier qui va déclarer notre thème à WordPress. Il faudra donc le commencer avec certains tags. Seul le tag Theme Name: est obligatoire, les autres sont par la force des choses optionnels.

/*
Theme Name: Thème WP minimum
Theme URI:  https://github.com/stefankummer/wp-minimum-theme
Author: Stefan Kummer
URI: https://www.skweb.ch
Description: Skeleton pour la création de thème WordPress
Version: 1.0 
License: MIT License
License URI:  https://github.com/stefankummer/wp-minimum-theme/blob/master/LICENSE
Tags: minimum, skeleton
Text Domain: skweb-min-theme
*/

Vous trouverez le détail de tous les tags utilisables dans le codex de WordPress. Ne mettez pas d’espace entre le tag et les « : », le tag sera ignoré.

Astuce: pour hériter des propriétés d’un thème existant (parent) et juste lui apporter quelques modifications, on peut créer un thème enfant. Pour cela ajoutez dans les commentaires le tag : Template: [nom-du-dossier-theme-parent]

wp-content/themes/skweb-min-theme/index.php

Le fichier index.php est le cœur de votre thème. Il contient toute la structure de celui-ci. Il pourrait même être le seul fichier, mais pour des raisons pratique je vais en utiliser d’autres comme header.php, footer.php, etc… On le verra par la suite.

<!-- On appelle le header -->
<?php get_header(); ?>

<!-- C'est ici qu'on mettra le contenu du site, comme par exemple la boucle wordpress -->
<?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
    
    <h1><?php the_title(); ?></h1>
    <?php the_content(); ?>

<?php endwhile; endif; ?>

<!-- On appelle le footer -->
<?php get_footer(); ?> 

Vous trouverez une description des fonctions sur la page : WordPress 5 les fonctions utiles lors de la création d’un thème.

Astuce : si vous créez un fichier avec le nom front-page.php cela vous permettra d’avoir une première page différente des autres. En l’absence de ce fichier c’est index.php qui est appelé. Il existe aussi les fichiers page.php et single.php qui sont appelés respectivement lors de l’affichage d’une page ou d’un article. Lire l’article sur la hiérarchie des templates de WordPress pour plus détail.

On modifie le header et le footer par défaut.

On va profiter d’inclure bootstrap et jquery dans notre skeleton, libre à vous de les utiliser ou non.

Téléchargez bootstrap et jquery sur leur site respectif et placer les fichiers dans les dossiers que vous aller créer js et css de votre thème

wp-content/themes/skweb-min-theme/header.php

Dans ce fichier vous allez retrouver le contenu de votre header qui sera ensuite appelé avec la fonction get_header() depuis le fichier index.php ou les autres fichiers de template.

 <!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

    <?php wp_body_open(); ?> 

wp-content/themes/skweb-min-theme/footer.php

Idem pour le pied de page qui sera lui appelé par la fonction get_footer().

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

wp-content/themes/skweb-min-theme/functions.php

JQuery 1.12.4 est inclus par défaut dans WordPress 5.3.2. Si vous désirez inclure une version plus récente de JQuery (3.4.1 par exemple) gardez le fichier functions.php comme ci-dessous. Sinon supprimez la fonction replace_jquery_version().

 <?php
    // On ajoute la prise en charge des images mises en avant
    add_theme_support( 'post-thumbnails' );

    /**
     * Charge les fichiers CSS
     *
     * @return void
     */
    function loadcss()
    {
        wp_register_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
        wp_enqueue_style('bootstrap');
    }
    add_action('wp_enqueue_scripts', 'loadcss');

    /**
     * On ajoute les js
     *
     * @return void
     */
    function loadjs()
    {
        wp_register_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.bundle.min.js');
    }
    add_action('wp_enqueue_scripts', 'loadjs');

    /**
     * Remplace la version de jquery
     *
     * @return void
     */
    function replace_jquery_version() {
        wp_deregister_script( 'jquery-core' );
        wp_register_script( 'jquery-core', "https://code.jquery.com/jquery-3.4.1.min.js", array(), '3.4.1' );
        wp_deregister_script( 'jquery-migrate' );
        wp_register_script( 'jquery-migrate', "https://code.jquery.com/jquery-migrate-3.0.0.min.js", array(), '3.0.0' );
    } 

Astuce: si votre fichier ne contient que du PHP , oubliez intentionnellement la balise de fermeture ?>, cela évitera d’envoyer l’en-tête de la page en cas d’oubli d’un caractère après (si un espace traîne après par exemple). Cette astuce est valable pour tous les fichiers PHP et pas spécifique à WordPress.

wp-content/thems/skweb-min-theme/screenshot.png

Ce fichier image est optionnel, mais il permet d’afficher un aperçu du thème dans l’administration sous Apparence > Thèmes. Fichier au format png de dimension 880 x 660 pixels. En cours de développement j’utilise le site placeolder.com durant la phase de développement : https://via.placeholder.com/880×660.png?text=thème+par+skweb.ch

Et voilà c’est fini pour cette première étape, vous pouvez déjà maintenant activer votre thème depuis l’administration de WordPress. Rendez-vous à la prochaine étape.

WordPress 5.3 les fonctions essentielles lors de la création d’un thème

Dans cet article je vais répertorier une partie des fonctions les plus utilisées pour la création d’un thème. Lors de l’écriture de cet article la version de WordPress est 5.3. D’autres articles suivront avec les fonctions utiles lors de la création de plugins.

add_action( $hook, $function, $priority = 10, $accepted_args = 1 )
Permet d’ajouter une fonction $function au noyau de WordPress a un moment $hook spécifique (voir liste).

add_theme_support( 'post-thumbnails' )
Ajoute la prise en charge des images mises en avant.
add_theme_support( 'title-tag' )
Permet aux thèmes et plugins de gérer le tag <title>. A utiliser à la place de wp_title().

body_class( array $class )
Affiche les classes CSS attachés à la balise <body> en ajoutant les $class spécifiés (optionnel).

bloginfo( $show, $filter = 'raw' )
Affiche les informations sur le site courant. Valeurs possibles pour $show : name, description, wpurl, url, admin_email, charset, version, html_type, text_direction, language, stylesheet_url, stylesheet_directory, template_url, pingback_url, atom_url, rdf_url, rss_url, rss2_url, comments_atom_url, comments_rss2_url

get_footer( $name ) / get_header( $name ) / get_sidebar( $name )
Inclusion du contenu du fichier footer.php ou footer-$name.php si $name est spécifié, respectivement header.php ou sidebar.php.

get_search_form( array $args )
Affiche le champ de recherche se trouvant dans searchform.php si il existe sinon affiche le formulaire WordPress par défaut.

get_template_directory_uri()
Retourne le répertoire du thème.

have_posts()
Retourne si il y a des éléments à afficher dans la loop WordPress.

home_url( $path, $scheme )
Retourne l’url de l’accueil du site WordPress.

language_attributes()
Affcihe les attributs de langage du tag <html>.

the_content( $more_link_text = null, $strip_teaser = false )
Affiche le contenu du post.

the_post()
Permet d’itérer la boucle WordPress. A appeler au début de celle-ci.

the_title( $before = '', $after = '' , $echo = true )
Affiche ou retourne le titre du post actuel.

wp_body_open()
Exécute l’action wp_body_open.

wp_enqueue_style( $handle, $src = '', $deps = [], $ver = false, $media = 'all')
Empile une feuille CSS à la liste.

wp_footer()
Essentiel au bon fonctionnement du site, à inclure avant de fermer la balise <body>.

wp_head()
Essentielle au bon fonctionnement du site, à inclure avant de fermer la balise <head>.

wp_register_script( $handle, $src, $deps = [], $ver = false, $in_footer = false)
Annonce un script qui pourra ensuite être empilé à la liste des scripts appelé par WordPress avec la fonction wp_enqueue_style().

Et voilà pour une première liste succincte et non exhaustive des fonctions essentielles lors de la création d’un thème WordPress.

La hiérarchie des templates de WordPress 5.3

Dans WordPress il existe une hiérarchie pour vos templates (ou fichiers modèles si vous préférez) ce qui va permettre à WordPress de savoir comment afficher tel ou tel type de contenu. On parle de hiérarchie car WordPress va regarder si il trouve un template pour le type de contenu à afficher, et si il ne trouve pas il va en chercher un autre un peu plus générique et si il ne trouve toujours pas, il finira par retomber sur index.php qui lui est dans tous les cas obligatoire pour la définition d’un thème.

La hiérarchie des templates de WordPress https://developer.wordpress.org/files/2014/10/Screenshot-2019-01-23-00.20.04.png

Comment lire ce schéma?

Tout simplement commencez à gauche en choisissant le type de contenu à afficher. Suivez ensuite le cheminement et quand vous arrivez sur une case dont le fichier existe vous y êtes ?.

De manière générale les cases violettes sont les plus fréquemment utilisées (Primary Template), les vertes sont déjà un peu plus spécifiques (Secondary Template), et les oranges sont variables (Variable Template).

Donc en exemples…

Les pages

Pour la page d’accueil du site (Site Front Page) c’est le template front-page.php qui est appelé, à défaut page.php ou home.php suivant que votre site affiche une page ou un blog en accueil.

Le template variable page-$slug.php affichera si il existe la page définie par $slug. Par exemple vous créez une page contact depuis l’administration avec le slug contact, puis un fichier template page-contact.php. Le template se chargera donc de rendre cette page spécifique. Il est également possible de le faire avec l’id de la page page-3.php, mais ne le faite que pour votre propre thème, et non pour un thème destiné à être distribué.

Pour la page des résultats de recherche (Search Result Page) search.php à défaut index.php.

Et si la page n’existe pas (Error 404 Page) ce sera 404.php.

Les archives

Dans WordPress sitôt que vous cliquez sur une catégorie ou une étiquette, vous arrivez dans les archives (Archive Page). Le template est rendu avec le fichier archive.php. Cette page gère aussi l’affichage de la liste des articles du blog.

Il existe aussi les templates plus génériques date.php, category.php, tag.php, author.php, taxonomy.php et archive-$posttype.php$posttype peut prendre les valeurs (par défaut par le cœur de WordPress, d’autres valeurs sont possibles en fonction de vos plugins installés) :

  • post
  • page
  • attachment
  • revision
  • nav_menu_item

Les articles

C’est le fichier single.php qui va cette fois gérer l’affichage lorsque l’internaute aura cliqué sur le titre d’un article (Singular Page > Single Post Page) de votre blog.

Et les body class dans tout ça ?

Ha ben voilà une question quelle est bonne! Et bien tout simplement le nom de votre template se retrouvera dans les class du tag <body>. Par exemple avec le template page.php on aura <body class="... page ..."> et avec archive.php <body class="... archive ...">. Ceci vous permettra de customiser les CSS de chacun des templates.

Installer WordPress en local avec WSL2

Avant de pouvoir commencer à travailler avec WordPress (ou tout autre développement web), il va vous falloir faire tourner un serveur web et un serveur de base de données au minimum.

Avec l’arrivée de WSL2 sur Windows, vous pouvez oublier les paquets comme WAMP ou EasyPHP. On va plutôt mettre en place un vrai serveur qui tournera sous Linux comme votre serveur de production (cela facilitera grandement le développement).

Si vous n’avez pas encore installé WSL2 avec une distribution Linux, vous pouvez vous rendre ici : https://docs.microsoft.com/fr-fr/windows/wsl/wsl2-install pour voir comment faire.

Ouvrez votre bash (moi j’utilise Ubuntu-18.04 avec Windows Terminal) et tapez:

sudo apt update && sudo apt upgrade
sudo apt install apache2 mysql-server-5.7 mysql-client-5.7 php7.3
sudo apt install phpmyadmin

Suivez les étapes d’installation et rendez-vous ensuite dans votre navigateur préféré et ouvrez la page http://localhost. Vous devriez voir la page d’accueil d’Apache par défaut, bravo!

Nous allons maintenant créer une hôte virtuel pour accueillir notre site WordPress:

sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/wordpress.conf
sudo mkdir /var/www/wordpress
sudo vim /etc/apache2/sites-available/wordpress.conf

Modifiez ensuite le fichier /etc/apache2/sites-available/wordpress.conf:

<VirtualHost *:80>
ServerName wordpress.localhost
DocumentRoot /var/www/wordpress
<Directory /var/www/wordpress/>
Options +Indexes +Includes +FollowSymLinks +Multiviews
AllowOverride All
</Directory>
</VirtualHost>

Activez le site et redémarrez Apache:

sudo a2ensite wordpress && sudo service apache2 restart

Modifiez le ficher C:\Windows\System32\drivers\etc\hosts (moi j’utilise Hosts file editor c’est plus pratique) et ajoutez la ligne

127.0.0.1  wordpress.localhost

Voilà maintenant on va pouvoir télécharger WordPress et l’installer…

cd /var/www
wget https://wordpress.org/latest.zip
unzip latest.zip
rm latest.zip

Accédez ensuite à http://wordpress.localhost et laissez-vous guider c’est assez simple et intuitif… Vous aurez toutefois besoin d’avoir créé une base de données à l’aide de http://localhost/phpmyadmin au préalable.

L’accès à localhost n’est possible qu’une fois sur deux avec WSL2

Il arrive que WSL2 ne soit atteignable qu’avec l’adresse IP de la machine virtuelle plutôt qu’avec localhost. Ceci est relativement embêtant d’autant plus que l’adresse IP de WSL2 change après chaque redémarrage.

Afin d’y remédier, il est nécessaire de désactiver l’option de démarrage rapide de Windows. Vous la trouverez ici :

Panneau de configuration > Système et sécurité > Options d'alimentation > Choisir l'action des boutons d'alimentations

Cliquez sur « Modifier les paramètres actuellement non disponibles » et décochez ensuite l’option « Activer le démarrage rapide (recommandé).

Enregistrer les modifications et le problème devrait être résolu…

C’est parti…

Voilà c’est reparti, je relance le site SKWeb après plusieurs années de silence… et on repart de zéro!

SKWeb est un domaine que j’ai réservé et exploité depuis 2010 (un simple whois vous permettra de le vérifier). Depuis j’ai acquis pas mal d’expériences dans plusieurs domaines. 

J’essaierai donc régulièrement de publier un article dont le sujet portera essentiellement sur :

  • WordPress
  • Magento 2
  • Windows Subsystem for Linux 2
  • NAS Synology
  • PHP & mySQL

Une des prochaines étapes sera aussi de réaliser un thème complet perso pour le site, je vous en ferez profiter en rédigeant des articles au fur et à mesure.

Donc c’est parti et à bientôt…