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.