Création d'un thème WordPress

Je vous propose de créer un thème simple : un blog avec des articles ainsi que quelques pages statiques reliées par un menu. Il contiendra des images mises en avant cliquables pour atteindre le contenu des articles.

Création d'un thème WordPress

Dossier du thème

Un thème, c'est d'abord un dossier. Créez un dossier nommé acteurs et déposez-le dans /wp-content/themes

Feuille de style

Créez un fichier nommé style.css et écrivez le code suivant :

/*
Theme name: Les acteurs
Version: 0.1
Author: Guillaume
Description: Le thème Les acteurs par Guillaume
*/

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    color: #333;
}

Le commentaire en début de feuille de style permet de préciser certaines informations concernant le thème, à savoir le nom, la version, l'auteur et le descriptif du thème. Attention à ne pas mettre d'espace avant les deux points. Je précise que le vrai nom du thème est le nom du dossier. Celui précisé par Theme Name: est purement esthétique.

Fichier index.php

Un autre fichier indispensable est index.php qui affiche la boucle des articles (et affichera les pages si le modèle des pages page.php est absent). C'est aussi la page d'accueil, en absence du modèle spécifique pour la page d'accueil nommé home.php.

Voici son contenu :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
        <meta charset="utf-8">
        <title><?php bloginfo('name') ?></title>
    </head>
    <body>
        <h1><?php bloginfo('name') ?></h1>
        <main id="accueil">
                <?php while(have_posts()) : the_post() ?>
                <article>
                    <h2><?php the_title() ?></h2>
                    <?php the_content() ?>
                </article>
                <?php endwhile ?>
        </main>
        <footer>
            <p>© 2023 Les acteurs - Tous droits réservés</p>
        </footer>
    </body>
</html>

Les fonctions the_title() et the_content() affichent respectivement les titres et les contenus des articles. Ces fonctions sont contenues dans une boucle while qui affichera la totalité des articles sur la page d'accueil. Par défaut, WordPress est en mode blog.

Les fichiers index.php et style.css suffisent à donner naissance à un thème. Il est désormais activable dans le Tableau de bord. Pour agrémenter d'une vignette, enregistrez une image dans le dossier du thème nommée screenshot.jpg ou screenshot.png selon le format. Idéalement elle doit avoir un ratio 4/3.

Création d'un thème WordPress

Vous pouvez désormais ajouter des articles depuis le Tableau de bord. A ce stade, on peut déjà profiter de la convivialité de WordPress et de la richesse des extensions.

Entête et pied de page

Il est très utile de séparer l'entête et le pied de page dans des fichiers distincts. Cela permettra de modifier l'ensemble des entêtes et des pieds de pages de manière centralisée.

Entête

Tapez et enregistrez sous le nom header.php le code suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title><?php bloginfo("name") ?> - <?php bloginfo("description") ?></title>
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>">
</head>
<body>
    <h1><?php bloginfo("name") ?></h1>

Il s'agit du haut du code de la page index.php.

La fonction get_stylesheet_uri() retourne l'URL de la feuille de style principale style.css du thème. Plutôt que d'écrire manuellement : https://exemplesite.fr/wp-content/themes/acteurs/style.css, on utilise cette fonction qui trouvera la feuille de style principale quelque soit l'adresse de votre site.

La fonction bloginfo('name') renvoie le titre du site indiqué dans la rubrique Réglages -> Général du Tableau de bord. La fonction bloginfo('description') renvoie le slogan.

Pied de page

Tapez et enregistrez sous le nom footer.php le code suivant :

        <footer>
            <p>© 2023 Les acteurs - Tous droits réservés</p>
        </footer>
    </body>
</html>

Intégration de l'entête et du pied de page dans index.php

Complétons la page index.php en ajoutant les fonctions get_header() et get_footer() pour intégrer l'entête et le pied de page :

<?php get_header() ?>

    <main id="accueil">
        <?php while (have_posts()) : the_post() ?>

        <article>
            <h2><?php the_title() ?></h2>
            <?php the_excerpt() ?>
        </article>

        <?php endwhile ?>
    </main>
    
<?php get_footer() ?>

Notez que la fonction the_content() a été remplacée par the_excerpt() qui n'affiche qu'un extrait de l'article. Pour voir les articles complets, nous allons créer un modèle de page spécifique.

Article complet avec le modèle single.php

L'article complet utilisera un modèle de page nommé single.php :

<?php get_header() ?>

    <main>
        <h2><?php the_title() ?></h2>
        <?php the_content() ?>
    </main>

<?php get_footer() ?>

Pour relier les extraits aux articles complets, nous utilisons la fonction the_permalink() qui affiche l'URL de l'article :

<?php get_header() ?>

    <main id="accueil">
        <?php while (have_posts()) : the_post() ?>

        <article>
            <a href="<?php the_permalink() ?>">
                <h2><?php the_title() ?></h2>
            </a>

            <?php the_excerpt() ?>
        </article>

        <?php endwhile ?>
    </main>
    
<?php get_footer() ?>

Images mises en avant

Sur la page d'accueil, les images mises en avant seront affichées sous forme de vignettes cliquables. En cliquant sur le titre ou l'image, l'utilisateur pourra atterrir sur une page développant l'article complet.

Si vous ajoutez ou modifiez un article, vous ne verrez pas la rubrique Image mise en avant dans le Tableau de bord. Pour l'activer, il faut ajouter cette ligne dans un fichier nommé functions.php qui permet d'ajouter des fonctionnalités à notre thème :

Créer un fichier functions.php et écrivez le code suivant :

<?php
// Gestion des images mises en avant
add_theme_support("post-thumbnails");

On pourra ensuite ajouter les images mises en avant sur les pages des articles index.php en plaçant la fonction the_post_thumbnail(). Le paramètre medium affichera les vignettes avec une largeur de 300 pixels. On pourra choisir d'autres valeurs :

Fonction et paramètreLargeurHauteur
the_post_thumbnail('thumbnail')150 pixels150 pixels
the_post_thumbnail('medium')300 pixelshauteur proportionnelle
the_post_thumbnail('medium_large')768 pixelshauteur proportionnelle
the_post_thumbnail('large')1024 pixelshauteur proportionnelle
the_post_thumbnail('full')Taille originaleTaille originale

Voici le code du fichier index.php mis à jour permettant l'affichage des extraits des articles avec des liens vers les articles complets :

<?php get_header() ?>

    <main id="accueil">
        <?php while (have_posts()) : the_post() ?>

        <article>
            <a href="<?php the_permalink() ?>">
                <?php the_post_thumbnail("medium") ?>
                <h2><?php the_title() ?></h2>
            </a>

            <?php the_excerpt() ?>
        </article>

        <?php endwhile ?>
    </main>
    
<?php get_footer() ?>

Si vous souhaitez que WordPress gère d'autres tailles pour les images mises en avant, il est possible de spécifier une largeur et une hauteur dans le fichier functions.php au moyen de la fonction set_post_thumbnail_size() :

<?php
add_theme_support('post-thumbnails');
set_post_thumbnail_size( 258, 145, true );

function enregistre_mon_menu() {
    register_nav_menu( 'menu_principal', __( 'Menu principal' ) );
}
add_action( 'init', 'enregistre_mon_menu' );

Pour que les images à la unes exploitent la découpe indiquée dans functions.php, il faudra utiliser le paramètre array() dans la fonction the_post_thumbnail() :

        <article>
            <a href="<?php the_permalink() ?>">
                <?php the_post_thumbnail(array(258, 145)) ?>
                <h2><?php the_title() ?></h2>
            </a>

            <?php the_excerpt() ?>
        </article>

Modèle de page statique

Ajoutez le fichier page.php dans le dossier du thème pour créer un modèle pour l'ensemble de vos pages statiques. Le code est plus simple que celui d'index.php car il ne contient pas de boucle while ni de balise <article>.

<?php get_header() ?>

    <main>
        <h2><?php the_title() ?></h2>
        <?php the_content() ?>
    </main>

<?php get_footer() ?>

Ajouter un menu

La gestion du menu est une fonctionnalité que vous devez activer pour votre thème. Complétez le fichier functions.php pour ajouter la gestion du menu :

<?php
// Gestion des images mises en avant
add_theme_support("post-thumbnails");

// Gestion des menus
function enregistre_mon_menu() {
    register_nav_menu( 'menu_principal', __( 'Menu principal' ) );
}
add_action( 'init', 'enregistre_mon_menu' );

Vous pouvez maintenant créer des pages et un menu dans le Tableau de bord. Pensez à cocher la case Menu principal dans les réglages du menu.

Pour que le menu apparaisse en haut des pages et des articles, on ajoute la fonction wp_nav_menu() dans l'entête header.php.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title><?php bloginfo("name") ?> - <?php bloginfo("description") ?></title>
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>">
</head>
<body>
    <?php wp_nav_menu(array( 'theme_location' => 'menu_principal' )) ?>
    <h1><?php bloginfo("name") ?></h1>

Code CSS complet

Pour améliorer la présentation de notre thème, je vous propose ce code CSS :

/*
Theme name: Les acteurs
Version: 0.1
Author: Guillaume
Description: Le thème Les acteurs par Guillaume
*/

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    color: #333;
}

main, footer > p, body > h1, .menu {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

main figure {
    margin-left: 0;
    margin-right: 0;
}

footer, div[class^="menu"] {
    background-color: #eee;
    padding-top: 10px;
    padding-bottom: 10px;
}

ul.menu {
    padding-left: 0;
    list-style-type: none;
}

.menu-item {
    display: inline-block;
    margin-right: 20px;
}

.menu a, article a {
    text-decoration: none;
    color: #333;
}

.menu a:hover, article a:hover {
    color: #f15d22;
}

article {
    width: 300px;
    margin-top: 30px;
}

#accueil {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

footer {
    margin-top: 30px;
}

article img:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

Pour aller plus loin

Barre d'outils

Pour afficher la barre d'outils du Tableau de bord dans le Front, vous devez d'abord ajouter la fonction wp_head() dans la section <head> :

<head>
    <meta charset="utf-8">
    <title><?php bloginfo("name") ?> - <?php bloginfo("description") ?>
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>">
    <?php wp_head(); ?>
</head>

et aussi la fonction wp_footer() juste avant la balise </body> :

    <footer>
        <div><?php dynamic_sidebar( 'pied1' ); ?></div>
        <div><?php dynamic_sidebar( 'pied2' ); ?></div>
        <p>© 2023 Les acteurs - Tous droits réservés</p>
    </footer>
    <?php wp_footer() ?>
</body>

</html>

Ce qui vous permettra de modifier plus facilement votre site :

Création d'un thème WordPress

La fonction wp_head() permet également de lier des scripts et autres feuilles de style via le fichier functions.php.

Lier la feuille de style via functions.php

Plutôt que de charger la feuille de style dans header.php, on peut la lier en ajoutant le code suivant dans le fichier functions.php :

function ajouter_scripts() {
	wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'ajouter_scripts' );

Remarque : La fonction wp_enqueue_style() s'appuie sur la fonction wp_head() qui doit être présente dans votre zone d'entête.

Ajouter des widgets dans la barre latérale ou dans le pied de page

Pour ajouter des widgets dans la barre latérale ou dans le pied de page, il faut d'abord ajouter des fonctions register_sidebar() dans le fichier functions.php. Ces fonctions permettent d'activer la possibilité de greffer des widgets dans certaines zones de votre site.

// Widgets dans la bande latérale
register_sidebar(array(
	'id' => 'articles',
	'name' => 'Sidebar Articles'
));

// Widgets dans le pied de page
register_sidebar(array(
	'id' => 'pied1',
	'name' => 'Pied de page 1'
));

register_sidebar(array(
	'id' => 'pied2',
	'name' => 'Pied de page 2'
));

Ensuite, pour faire apparaître des widgets sur la barre latérale des articles, on ajoute la fonction dynamic_sidebar() dans la balise <aside> du modèle single.php :

<?php get_header() ?>

    <main>
        <h2><?php the_title() ?></h2>
        <?php the_content() ?>
    </main>

    <aside>
        <?php dynamic_sidebar( 'articles' ); ?>
    </aside>

<?php get_footer() ?>

Pour disposer des widgets dans le pied de page, il faudra également utiliser les fonctions dynamic_sidebar() dans des colonnes de la balise <footer> du modèle footer.php :

    <footer>
        <div><?php dynamic_sidebar( 'pied1' ); ?></div>
        <div><?php dynamic_sidebar( 'pied2' ); ?></div>
        <p>© 2023 Les acteurs - Tous droits réservés</p>
    </footer>
    <?php wp_footer() ?>
</body>

</html>

Pour que les widgets se positionnent correctement, vous devrez compléter le code CSS et vous devrez ajouter des widgets dans la rubrique Apparence -> Widgets.

Conclusion

Le secret de la création d'un thème repose sur un principe simple : insérer la bonne fonction au bon endroit. Dès que maîtriserez ce concept, vous pourrez créer vos propres thèmes, ou intégrer sur WordPress un site statique écrit en HTML/CSS.

Tableau des fonctions

Voici un tableau rassemblant les fonctions couramment utilisées dans la création d'un thème :

FonctionDescription
the_title()Retourne le titre de la page ou de l'article.
the_content()Retourne tout le contenu de la page ou de l'article.
the_excerpt()Retourne l'extrait de l'article.
the_permalink()Retourne le permalien de la page ou de l'article.
get_header()Inclut le fichier header.php.
get_footer()Inclut le fichier footer.php.
the_post_thumbnail()Retourne le chemin de l'image mise en avant de l'article.
bloginfo('name')Retourne le titre du site indiqué dans Réglages -> Général.
bloginfo('description')Retourne le slogan du site indiqué dans Réglages -> Général.
echo get_stylesheet_uri()Retourne le chemin du fichier de feuille de style principal style.css du thème actif
echo get_template_directory_uri()Retourne le chemin du dossier du thème parent.
echo get_stylesheet_directory_uri()Retourne le chemin du dossier du thème actif (Fonctionne avec le thème enfant).
echo site_url()Retourne l'URL du site indiqué dans Réglages -> Général. C'est aussi la page d'accueil.
wp_nav_menu()Retourne le menu principal dans une zone de liste à puces.

Tableau des fichiers du thème

Voici les fichiers que nous avons utilisés dans le thème :

FonctionDescription
index.phpModèle universel de page ou d'article. Faute de modèle personnalisé pour les articles (single.php) ou les pages (page.php), c'est le modèle index.php qui sera utilisé.
style.cssFeuille de style principale du thème. En début de fichier, la zone de commentaire contient des informations cruciales à propos du thème.
functions.phpFichier permettant d'ajouter des fonctionnalités à votre site. Il permet d'activer des options au Tableau de bord comme les menus ou les images mises en avant.
page.phpModèle pour les pages.
single.phpModèle pour les articles complets.
header.phpEntête pour les pages et les articles.
footer.phpPied de page pour les pages et les articles.

Création d'un thème en vidéo

En complément de cet article, je propose un tutoriel vidéo pour la création d'un thème WordPress à partir de zéro. Les pré-requis sont des connaissances en : HTML, CSS, PHP et WordPress. Les logiciels nécessaires : un éditeur de code, un navigateur et une distribution Apache comme MAMP, WAMP ou XAMPP.